Any (webshop)

FAQ

Enkelsidede apps (PWA) #

Disse kaldes også Progressive Web Apps (PWA) og indlæser generelt siden som en enkelt side ved hjælp af rammer, i stedet for at indlæse individuelle sider som normalt.

Når en side indlæses første gang, aktiverer Clerk.js biblioteket automatisk en funktion til at gengive alle indholdsblokke på den pågældende side.

Dog, for enkelt-sidede apps, der bruger rammer som vue.js eller next.js, gengives sider med javascript i stedet for en standard sideindlæsning.

På grund af dette skal du kontrollere gengivelsen med Clerk.js for at matche, hvordan du indlæser sider i den enkelt-sidede app.

Inkluder Clerk.js #

Clerk.js skal kun indlæses én gang, når siden indlæses første gang. Efter dette vil biblioteket være tilgængeligt gennem sessionen. Inkluder det lige før </head> i dit HTML:

<!-- Start af Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
    (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){w.__clerk_q.push(arguments)};
    })(window,document);

    Clerk('config', {
    key: 'INSERT_PUBLIC_API_KEY'
    });
</script>
<!-- Slut af Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Kontrol af gengivelse #

Som standard gengiver Clerk.js enhver element, der har klassen clerk, uanset om det er indsat under den indledende sideindlæsning eller når DOM muterer. Du kan kontrollere timingen ved at indsætte elementet, når det er klar til at blive gengivet.

Alternativt kan du kontrollere gengivelsen med funktionen Clerk("content", "SELECTOR").

Hver gang en side indlæses, skal du følge disse trin i rækkefølge:

Tilføj Clerk-snippet til HTML. Sørg for, at det har en unik vælger, du kan målrette.
Kør Clerk("content", "SELECTOR") for at gengive det.

Når besøgende forlader siden, skal du ødelægge snippetet for at sikre, at du kan gengive det igen, hvis besøgende vender tilbage til den samme side. Dette er for at sikre, at Clerk.js ikke ser snippetet som tidligere gengivet, hvilket får det til ikke at visualisere.

Eksempel:

<span 
  id="clerk-custom-snippet"
  data-template="@home-page-visitor-recommendations">
</span>

<script>
  Clerk("content", "#clerk-custom-snippet")
</script>

Indvirkning på Pagespeed #

At tilføje et eksternt værktøj som Clerk.js til din side vil øge den tid, det tager at indlæse din side, men det er ubetydeligt sammenlignet med de ekstra konverteringer, det vil give.

Ydeevne #

Clerk.js biblioteket er kun 37.5kb i størrelse, så det indlæses meget hurtigt. Desuden indlæses Clerk-elementer asynkront, hvilket betyder, at resten af siden indlæses, mens Clerk.js gengiver indhold.

En stigning i indlæsningstiden for en side kommer oftest fra at indlæse flere billeder end tidligere, da Clerks søgeresultater og anbefalinger fungerer bedst, når de er visuelt tiltalende.

For at minimere den ekstra indlæsningstid anbefaler vi at bruge billeder i webp format, der har en opløsning, der matcher størrelsen, de har i Clerk-elementerne. F.eks. hvis billederne i anbefalingsbanneret har en opløsning på 400x400px i desktopvisning, send billeder i en opløsning på maksimalt 420x420px eller lignende.

Google Page Speed Insights #

Hvis du bruger Google Page Speed Insights til at analysere din sides ydeevne (som du bør - eller i det mindste et tilsvarende værktøj) vil du se Clerk.js opført under Udnyt browsercache. Denne artikel vil fortælle dig, hvorfor dette er en god ting.

Formålet med Clerk.js er at gøre det super enkelt at indsætte resultater fra Clerk.io på enhver hjemmeside. Clerk.js indeholder en bunke funktioner til at håndtere tracking og UI komponenter såsom søgning mens du skriver, sliders, exit-intent popups.

Når vi tilføjer nye UI funktioner eller forbedrer eksisterende, bliver de inkluderet i Clerk.js og skal downloades af slutbrugeren for at kunne bruges.

At have en cache udløbsdato på 60 minutter betyder, at når vi frigiver nye funktioner, vil de være tilgængelige for alle inden for maksimalt 60 minutter. Jo længere cache tid, jo længere tid tager det for alle at få adgang til de nyeste funktioner.

Det vigtige er, at slutbrugere kun skal downloade Clerk.js én gang, når nye funktioner er tilgængelige!

Den 60 minutters cache udløbsdato betyder blot, at slutbrugerens browser vil tjekke ind med Clerk.io hver 60. minut. Hvis der ikke er foretaget ændringer i Clerk.js, vil der ikke blive downloadet noget. Denne tjek-ind anmodning er både super hurtig og billig, da data kun vil blive downloadet, hvis en ny version af Clerk.js er tilgængelig.

Cache udløbstiden på 60 minutter er således en afvejning mellem at minimere webanmodninger og at få nye funktioner og forbedringer. Husk, at de fleste sessioner er langt under 60 minutter, og derfor vil anmodningen kun blive foretaget én gang pr. session eller besøg.

Som du kan se i skærmbilledet, er dette en normal praksis, der (ligesom Clerk.io) bliver brugt af Google, Google Analytics, Facebook, New Relic, Trustpilot og mange andre.

Foretage API-opkald #

Du kan bruge Clerk.js til at foretage API-opkald ved at bruge den indbyggede funktion Clerk.call(), denne funktion tager 3 argumenter.

Eksempelopkald #

Definer funktionen, og kald den i tracking-scriptet.

HTML

<!-- Start af Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
  (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){ w.__clerk_q.push(arguments) };
  })(window,document);

  Clerk('config', {
        key: '{$clerk_public_key}',
        collect_email: {$clerk_datasync_collect_emails},
        language: '{$language}',
        formatters: {
             log_price: function(price) {
             console.log(price);
          }
      },
    });
</script>
<!-- Slut af Clerk.io E-commerce Personalisation tool - www.clerk.io -->

<script>
  function popularProducts(){
    Clerk("call",
      "recommendations/popular",
      {
        limit: 10,
        labels:["Home Page / Bestsellers"]
      },
      function(response){
        console.log(response);
      },
      function(response){
        console.error(response);
      }
    );
  }
</script>

Respons #

responsen til et JavaScript-objekt, med status for API-opkaldet, og resultatet.

JavaScript

__clerk_cb_1(
  {
   "status":"ok",
   "count":72,
   "facets":null,
   "result":[399,410,551,338,403,439,425,402,406,456]
  }
);

Arbejde med responsen #

Brug en Callback funktion til at håndtere responsen

HTML

<script>
  Clerk("call",
    (
      "search/categories",
        {
          'query': "men",
          'limit': "10"
        },
        function(x){
          var cat = x.categories;
          if(cat.length > 0)
          {
            let heading = document.createElement('h3');
            heading.textContent = 'Relaterede Kategorier';
            document.querySelector('#your-target').append(heading);
          }
          for(var index in cat) {
            var clerkName = cat[index].name;
            var clerkUrl = cat[index].url;
            let link = document.createElement('a');

link.href = clerkUrl;
            link.textContent = clerkName;
            document.querySelector('#your-target').append(link);
         }
      }
   )
</script>

Dette eksempel vil returnere de kategorier, der matcher forespørgslen, og præsentere dem som tekst. På denne måde kan du hurtigt og nemt foretage opkald til vores API.

Tilføj-til-kurv knapper #

Disse knapper fungerer forskelligt for hver platform, og funktionaliteten kan ændre sig afhængigt af de plugins, du bruger. Fordi Clerks designs består af HTML & CSS, kan du normalt tilføje denne funktionalitet, hvis du forstår, hvordan det fungerer på dit site.

Nogle tilføj-til-kurv knapper kræver Javascript for at fungere. I disse tilfælde skal du også køre det krævede script eller funktion igen, efter at Clerk har indsat resultater. Tjek hvordan du gør dette med Events.

Inspicer tilføj-til-kurv knappen for at identificere den kode, der er knyttet til den, f.eks. på en kategoriside. Koden vil normalt være et <div> eller et button element. Kopier hele knap HTML’en.

Kopier og indsæt denne kode i dit Design. Nu skal du identificere variablerne i koden. Ofte skal du finde, hvor koden bruger:

Produkt ID
Produkt mængde

Erstat værdierne for produkt ID med den Liquid variabel {{ product.id }} og mængden med et attribut, hvis du sender det, f.eks. {{ product.qty }} eller lad det blot være 1, hvis kunder kun køber ét produkt ad gangen.

Indsæt din kode i HTML’en af dit Design.

Du kan justere dit Design ved hjælp af CSS under HTML’en.

Eksempel #

Tilføj-til-kurv knappen nedenfor er et <div>, der har klassen button-container:

Mængden vises i kurv-linket efter /cart?add= og Produkt ID er efter &id_product=.

Produkt ID refereres også ved data-id-product, og produkt mængden ved .data-minimal\_quantity

Disse værdier vil blive erstattet med dine liquid pladsholdere i Designet, så de relevante produkter og mængder refereres, når de er live på din webshop.

Med disse ændringer kan koden nedenfor nu tilføjes til dit Design, hvor du ønsker, at det skal vises:

<div class="button-container">
  <a 
    class="button ajax_add_to_cart_button btn btn-default" 
    style="position: relative;" 
    href="https://www.examplelinktocart.com/cart?add={{ product.qty }}&amp;id_product={{ product.id }}&amp;" 
    rel="nofollow" 
    title="Tilføj til kurv" 
    data-id-product-attribute="0" 
    data-id-product="{{ product.id }}" 
    data-minimal_quantity="{{ product.qty }}">
    <span style="color: orange !important">
      <i class="icon-shopping-cart" aria-hidden="true"></i>
    </span>
  </a>
</div>

Almindelige konsolfejl #

Når du opsætter Clerk.io kan du støde på problemer af forskellige årsager.

Det mest almindelige problem er, at du har installeret Clerk.io, men produkter stadig ikke vises.

Denne artikel viser dig de meddelelser, som Clerk.io viser i konsollen, og forklarer, hvordan du håndterer dem for at hjælpe dig, når du fejlfinder.

Hvis Clerk.io støder på en fejl, og vi ved, hvad fejlen er, vil du se en meddelelse i din konsol:

Ved at klikke på fejl-linket får du flere oplysninger om, hvad der gik galt, som du kan bruge til at fejlfinding fejlen selv eller sende til vores supportteam, som vil hjælpe dig.

Disse er de mest almindelige fejl fra konsollen:

“LogicalError: Unknown content ‘insert-name’” #

Denne fejl vises, hvis den indlejrede kode, du indsatte, refererer til et Website Content, der ikke findes, i data-template.

For at løse det, skal du sikre dig, at navnet i den indlejrede kode matcher et Website Content.

Du kan altid klikke på Rediger indhold for ethvert Indhold, for at se, hvad den indlejrede kode skal være:

“AuthenticationError: Ugyldig API-endpoint” #

Denne fejl opstår normalt, hvis du har brugt klassen “clerk” et sted i din HTML:

Klassen “clerk” er reserveret til brug med vores embedkoder, da den bruges til at håndtere opkaldene til vores server.

For at løse det, skal du sørge for at navngive klassen noget andet, for eksempel “clerk-product” eller lignende.

“ParsingError: Ugyldig type af argument produkt” #

Denne fejl betyder, at ID’et, der er angivet for et produkt i embedkoden, har en forkert type eller syntaks.

For eksempel, hvis dine produkt-ID’er er heltal, skal de også være det i embedkoden. Desuden er det vigtigt at huske parenteserne omkring ID’et, da det skal være en liste:

<span class="clerk" data-template="@product-page" data-products="[123]"></span>

“ParsingError: Ugyldig type af argument kategori” #

Som med ovenstående betyder dette, at ID’et, der er angivet for en kategori, er forkert.

I de fleste tilfælde sker det, hvis pladsholderen i kategori embedkoden ikke er blevet erstattet med et faktisk ID:

<span class="clerk" data-template="@category-page" data-category="INSERT_CATEGORY_ID"></span>

Outputtet af koden skal indeholde ID’et for kategorien, således:

<span class="clerk" data-template="@category-page" data-category="257"></span>

For at løse dette, vælg dit butiksystem i dropdown-menuen i Rediger indhold->Indsæt i hjemmeside før du kopierer embedkoden:

Embedkoden vil derefter ændre sig for at inkludere din platforms logik til at vælge det korrekte kategori-ID:

I tilpassede opsætninger skal du dog selv indstille din egen logik i embedkoden.

“AuthenticationError: Forkert offentlig API-nøgle” #

Denne fejl vises, hvis den offentlige API-nøgle, du har angivet, ikke matcher nogen konto i Clerk.io:

For at løse dette, log først ind på my.clerk.io, og gå til Indstillinger -> API-nøgler

Her kan du tjekke Offentlig API-nøgle og sikre dig, at dette er den nøgle, du har brugt i dit Clerk.io sporingsscript

Konvertering af designs til Clerk.js 2 #

Da Clerk.js 2 bruger det mere fleksible skabelonsprog Liquid, skal du konvertere designene til dette sprog.

1. Start med at gå til my.clerk.io og derefter Anbefalinger / Søg > Designs > Nyt Design.

2. Vælg designtypen, typen af indhold og navngiv designet (vi anbefaler at tilføje " V2" så det er tydeligt, at du bruger Clerk.js2). Klik derefter på Opret Design.

3. Vælg som Skabelon Produkt Slider (HTML) til Anbefalingerne, hvis du arbejder på søgedesignene, skal du vælge Instant Search Dropdown (HTML) eller Søgeside (HTML).

4. Når du er færdig, klik på Opret Design

5. Dette vil give dig HTML- og CSS-koden, som du manuelt kan overskrive:

6. Gå tilbage til Anbefalinger / Søg -> Designs og klik på Rediger Design for dit gamle Clerk.js 1 Design.

7. Nu skal du kopiere det gamle Clerk.js 1 Design til dit nye Clerk.js 2 Design. Du vil bemærke, at der ikke er Container Code i dit nye. Dette skyldes, at Liquid bruger for loops til at gengive alle produkterne. Kopier dit gamle Produkt HTML inden i for-loopet, og dit gamle Container Code omkring det:

8. Til sidst, kopier også dit CSS:

9. Nu skal du konvertere designet til Liquids syntaks. Den største forskel er, at de gamle designs brugte syntaksen

{% raw %} {{ formatter attribute }}   {% endraw %}

mens v2’s syntaks er

{% raw %} {{ product.attribute \| formatter }}   {% endraw %}

10. Gennemgå alle dine attributter og ændr dem til det nye format:

11. Hvis du bruger {% raw %} {{#if}} eller {{#is}} {% endraw %} udsagn, skal disse også konverteres til syntaksen {% raw %} {% if product.attribute %} {% endraw %} Gør noget {% raw %} {%else%} {% endraw %} Gør noget andet {% raw %} {% endif %} {% endraw %}:

12. Klik nu på Opdater design for at gemme ændringerne.

13. Til sidst, gå til Anbefalinger / Søg -> Indhold og ændr dit Clerk.io indhold til at bruge dit nye design.

14. Klik på Opdater indhold. Dette vil midlertidigt få dem til ikke at vise sig på din webshop, indtil du er færdig med Trin 2. Vælg det nye design for alt indhold, der skal opdateres.

Send salgdata fra et POS/ERP-system #

For nogle webshops er det relevant at uploade salg-data fra andre systemer end selve webshoppen, for eksempel hvis du vil optimere algoritmen baseret på salg fra en fysisk butik eller B2B butik.

Clerk.io differentierer ikke mellem ordrer fra forskellige kilder - så længe du kan give en ID, et tidsstempel og en liste over produkter, der blev købt, kan de uploades:

https://docs.clerk.io/reference/order-resource

Du kan uploade ordrerne på en af to måder:

Med en CSV-fil som forklaret her
Ved at implementere kald til vores CRUD API, som giver dig mulighed for at sende ordredata direkte til din butik i Clerk.io.

Med en CSV-fil vil du være i stand til manuelt at uploade dit salg, når du ønsker det, uden kodning.

Den anbefalede tilgang er at bruge CRUD API, da det giver dig mulighed for at automatisere opgaven helt.

Tilføj blot et POST-kald til /orders endpointet i dit ERP-system eller webshop, kør jobbet med jævne mellemrum, f.eks. en gang om måneden, og du vil være i stand til at bruge offline ordrer til at booste dine online anbefalinger og søgeresultater.

Valutaomregning #

Der er flere måder at arbejde med valutaomregning i Clerk.io. En simpel måde at få det til at fungere på er beskrevet nedenfor.

1. Send de forskellige priser i feedet #

Clerk skal vide priserne på hvert produkt i de forskellige valutaer. Den nemmeste måde at gøre dette på er at sende dem som et dict af formaterede priser, med valutasymbolet som nøgle, i dit Data Feed.

Eksempel:

JSON

   "products": [
        {
            "id": 1,
            "name": "Ost",
            "description": "Et pænt stykke ost.",
            "price": 100,
            "list_price": 50,
            "categories": [25, 42],
            "image": "http://example.com/images/products/1.jpg",
            "url": "http://example.com/product/1",
            "prices_formatted": "{'USD':'$100', 'EUR':'€ 87.70', 'GBP':'£ 68.68'}"
         },
         {
            "id": 2,
            "name": "Et pund nødder",
            "description": "Det er mange nødder!",
            "price": 150,
            "categories": [1],
            "image": "http://example.com/images/products/2.jpg",
            "url": "http://example.com/product/2",
            "prices_formatted": "{'USD':'$150', 'EUR':'€142', 'GBP':'£120'}"
         }
    ]

2. Opret en formatter #

I sporingsscriptet indsat på hver side af din butik, kan du definere JavaScript funktioner, der kan bruges inde i vores skabeloner.

Her kan du definere en funktion, der tager dit price-dict som argument og returnerer prisen for en specifik valuta, som du kan vælge, der matcher placeringen af valutaen i price-dict.

Sørg for, at din kode erstatter valuta med den aktuelt valgte valuta fra frontend.

JavaScript

  Clerk('config', {
        key: 'Your_API_Key',
        formatters: {
            currency_selector: function (price_list) {
            const currency = "EUR";
            price_groups_obj = JSON.parse(price_list)
              return price_groups_obj[currency];
            }
        }
   });

3. Brug af Formatter i Clerk Designs #

Til sidst kan du bruge denne funktion som en del af dit design.

HTML

<div class="price">
   <span class="price">
      {{ product.prices_formatted | currency_selector }}
   </span>
</div>

Kunde-specifikke priser #

Hvis du har brug for at vise helt unikke priser baseret på, hvilken kunde der er logget ind, skal du opsætte en Event i Clerk.io, der indsætter den korrekte pris før produkterne bliver rendere.

Events er Javascript-funktioner, der kører før eller efter Clerk.io viser produkter.

Denne metode er mulig at bruge, hvis du kan slå priser op fra din server, direkte fra en Javascript-funktion, i frontend baseret på en produkt-ID og en kunde-ID.

For at vise individuelle kundepriser, skal koden køre lige efter svaret.

Generelt eksempel #

<span class="clerk" data-template="@home-page-popular"></span>

<script>
  Clerk('on', 'response', function(content, data) {
     console.log(data.result);
  });
</script>

Funktionen tager argumentet data, som er hele svaret, som Clerk.io sender tilbage fra API’en.

Eksempel på individuelle kundepriser #

Den vigtigste del af svaret er product_data, som indeholder hver attribut af de produkter, Clerk.io sender tilbage:

Disse data kan manipuleres, så standardpriser kan blive erstattet med kunde-specifikke priser før rendering.

Et simpelt eksempel på, hvordan man gør dette, kan ses her:

<span class="clerk" data-template="@home-page-popular"></span>

<script>
   var customer_id = INSERT_CUSTOMER_ID;
   Clerk('on', 'response', function(content, data) {
      console.log(data.product_data)
      for (i = 0; i < data.product_data.length; i++) {
         var product = data.product_data[i];
         var custom_price = FETCH_PRICE_FROM_SERVER(product.id,customer_id);
         product.price = custom_price;
      }
   });
</script>

I koden skal du erstatte 2 ting:

INSERT_CUSTOMER_ID skal erstattes med en kode, der indsætter ID’en på den kunde, der i øjeblikket er logget ind.
FETCH_PRICE_FROM_SERVER skal erstattes med en Javascript Ajax-funktion, der bruger produkt-ID’en og en kunde-ID til at finde den korrekte pris.

Prisen tildeles derefter Clerk.io attributten price, som kan vises i dit Design sådan her:

{{ product.price }}

Ved at bruge denne metode kan du vise helt unikke priser, mens du stadig bruger vores nemme Javascript-løsning.

Kundegruppepriser #

Opsætningen af kundegruppepriser består af 4 trin:

Inkluder de forskellige priser i datafeedet
Inkluder en variabel, der henter den aktuelle kundegruppe-ID
Opret en funktion til at hente den relevante pris
Vis prisen i Design

1. Inkluder priser i Datafeedet #

Start med at tilføje en attribut til alle produkter, som indeholder alle de forskellige prisindstillinger, og sørg for at korrelere hver pris til en bestemt kundegruppe.

Dette kan sendes som et string-kodet JSON-objekt. Husk, at tegnet \ er nødvendigt for at undslippe citationstegnene.

For eksempel:

Priser

"customer_group_prices": "{\"GROUP1\":100,\"GROUP2\":202,\"GROUP3\":309}"

2. Variabel for kundegruppe-ID #

Tilføj en dynamisk global variabel til clerk.js, som henter kundegruppe-ID for den nuværende kunde og tilføjer den som en variabel.

Værdien af Kundegruppe-ID’et skal svare til nøgleværdien for den tilsvarende pris i Data Feed. For eksempel, en bruger der skal se prisen for gruppe 2, så skal ID’et være “GROUP2”. For eksempel:

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  }
});

3. Opret en funktion til at hente prisen #

Efter at have inkluderet prisen i datafeedet og tilføjet customer_group variablen, kan du oprette en Template Formatter, som tager customer_group som et argument og returnerer den relevante pris.

Som beskrevet ovenfor, kan du nu hente prisen fra den specifikke kundegruppe som nøglen i pris-dictionary baseret på customer_group ID.

Funktionen skal placeres direkte i besøgs-tracking scriptet, og i dette eksempel kaldes den getPrice:

Clerk('config', {
  formatters: {
    getPrice: function (product) {
      const gid = window.Clerk._config.globals.customer_group;
      if (product.customer_group_prices) {
        const map = JSON.parse(product.customer_group_prices);
        if (map[gid]) {
            return map[gid];
        } else {
            return product.price;
        }
    } else {
        return product.price;
    }
    }
  }
});

4. Vis prisen i skabelonen #

Når final_price formatteren er blevet oprettet, kan du navngive den direkte i dit Design, sammen med den customer_group_prices liste, som du oprettede i trin 1:

<li style="text-align: center; width: 180px;">
	<a href="{{ product.url }}">
		<img sre="{{ product.image }}" />
		{{ product.name }}
	</a>
	<div class="price">
		{{ product | getPrice }}
	</div>
</li>

5. Sætte det hele sammen #

Ved at samle nogle af trinene i ovenstående løsninger, har du mulighed for at oprette kundegruppepriser til at referere i dine designs ved at inkludere dem i din clerk.js udvidelsesfil.

Du kan oprette globals for dine kundegruppe-ID’er, og formatters til at hente gruppepriserne i dine Clerk.io Designs, som i eksemplet nedenfor. Sørg for at erstatte INSERT_GROUP_ID_HERE med den nuværende gruppe-ID.

Clerk('config', {
  key: 'PUBLIC_KEY',
  globals: {
    customer_group_key: "INSERT_GROUP_ID_HERE"
  },
  formatters: {
    getPrice: function (product) {
      const gid = window.Clerk._config.globals.customer_group;
      if (product.customer_group_prices) {
        const map = JSON.parse(product.customer_group_prices);
        if (map[gid]) {
            return map[gid];
        } else {
            return product.price;
        }
    } else {
        return product.price;
    }
    }
  }
});

Synkronisering med HTTP Auth #

Ofte bruges HTTP-godkendelse på staging-sider for at undgå uønskede besøgende.

Dette vil i mange tilfælde blokere Clerk-importøren og typisk vise en 401 Unauthorized fejl i synkroniseringsloggen.

Du kan nemt verificere importøren ved at indsætte godkendelsesoplysningerne i import-URL’en som nedenfor, i Data Sync på my.clerk.io:

http://USER:PASS@www.ewoksRus.com/JSONFEED

Ingen sporede ordrer i dashboardet #

Clerk.io har brug for at spore salg fra webshoppen for at holde resultaterne opdateret med dine kunders adfærd.

Men nogle indstillinger i en webshop kan forårsage, at salgssporingen fejler.

Nedenfor kan du finde ud af, hvordan du fejlfinder salgsopfølgningen og se, hvad de mest almindelige problemer og løsninger er.

Før du starter #

Sørg for, at du har installeret:

The Clerk.js tracking script på alle sider
The Sales-tracking script på din Ordre Succes side.

Disse er nødvendige for at spore salg generelt.

Fejlfinding #

I de fleste tilfælde fejler salgsopfølgningen på grund af fejl i besøgs-ID’er eller produkt-ID’er i salgsopkaldet, der sendes til Clerk efter et køb er blevet gennemført. For at fejlfinding dette, skal du lave en testordre. Dog kan det i nogle tilfælde være relateret til salgsopfølgningens script og kan fejlfinding ved at se på loggene i my.clerk.io => Data => Logs som beskrevet nedenfor.

Start med at gå til dit Clerk Dashboard, og gå til Data > Logs

Hvis salgsopfølgningen fejler på grund af en fejl i dit script, vil du ofte kunne se fejlen øverst på siden.

Klik på Detaljer for at se mere:

Hvis du ikke kan se nogen fejl i loggene, er den nemmeste måde at identificere andre salgsopfølgningsproblemer at lave en testordre.

Fejlfinding med en testordre #

Den nedenstående guide vil bruge Chrome som et eksempel til at vise, hvordan man fejlfinder salgsopfølgning med en testordre, men andre browsere har lignende funktioner.

Start med at lægge et par produkter i kurven.
Gå videre til Checkout.
Før du afgiver ordren, skal du åbne din browsers Konsol.
Find Netværk, og indsnævr resultaterne for " clerk".
Afgiv ordren, så du ser ordrebekræftelsessiden.
Klik på opkaldet, der starter med sale (normalt sale?key=…) for at se detaljerne, der sendes til og modtages af salgsopfølgningen. Ved at klikke på Forhåndsvisning kan du nemt identificere eventuelle fejl, der vil forhindre salg i at blive sporet.

Fejl 1: “Ugyldig syntaks i argument: produkter” #

Denne fejl opstår, hvis de produkt-ID’er, du sender, har en forkert syntaks.

De mest almindelige fejl er:

Produkt-ID’erne er string-kodede i salgsopfølgningen, men du bruger heltal i Clerk.io eller omvendt
Listen over produkt-ID’er indeholder tekstformaterings tegn som dette: “products”:[\“id”\:\“123-m”\]. Formatet skal være ren JSON for at eliminere enhver formatering.
Produkt-ID’erne sendt med opkaldet findes ikke i de data, du har synkroniseret med Clerk.

Fejl 2: “Manglende argument X” #

Dette betyder, at du ikke sender alle de data, Clerk.io har brug for til at spore salget.

Sørg for, at du inkluderer alle dataattributterne i salgsopfølgningen.

Fejl 3: Opkaldet bliver aldrig lavet #

Hvis du ikke kan se opkaldet til sale selv med begge scripts installeret, så har noget forårsaget, at Clerk.js-scriptet er blevet indlæst forkert. For at identificere, om dette er problemet, skal du prøve dette:

Start med at åbne Konsollen i din browser
Skriv “Clerk”.
Hvis Clerk.js ikke er blevet indlæst korrekt, vil du se en ReferenceError:

Clerk påvirker ikke ordrer #

Hvis du succesfuldt sporer salg i my.clerk.io, men ingen af dem er fra Clerk.io, kan du have en fejl i din besøgsopfølgning (klik-opfølgning) opsætning.

Start med at sikre, at besøgsopfølgning fungerer, ved at gøre følgende:

Klik på et hvilket som helst produkt gennem Clerk.io’s Søg eller Anbefalinger
Gå videre til at afgive en ordre, der indeholder dette produkt
Log ind på my.clerk.io og gå til Ordredetaljer
Vent på, at ordren vises.

Hvis besøgsopfølgning fungerer, vil du se værdien og indflydelsen fra det produkt, du tilføjede gennem Clerk.io, i Sporende Ordrer:

Hvis du ikke ser nogen værdi tilføjet i den ordre, du har afgivet, viser de følgende sektioner almindelige fejl, der kan forårsage dette.

1. Tilpassede API-opsætninger, hvor kliksporing ikke er blevet aktiveret #

Hvis du har opsat Clerk.io med en tilpasset integration direkte med API’en, skal du aktivt aktivere besøgs-sporing.

Denne guide viser, hvordan du aktiverer det.

2. Forkerte produkt-ID’er bliver sporet #

For at besøgs-sporing kan fungere, skal klik- og salgs-sporing spore de samme produkt-ID’er som dem, vi modtager i importøren.

Normalt, hvis dette ikke fungerer, er det fordi du sporer variant-ID’er i stedet for hoved-ID’er eller simpelthen sporer SKU i stedet for ID.

For at tjekke, om dette er problemet, gør følgende:

1. Gå til Ordredetaljer og klik på ID’et for den ordre, du har afgivet:

2. Hvis Clerk.io ikke kunne identificere produktet, vil du kun se ID og en

billede pladsholder:

3. Gå til Data -> Produkter i side-menuen og søg efter navnet på

det produkt, du har tilføjet. Her vil du kunne se det forventede ID

for produktet:

4. Brug dette til at sikre, at du sporer de korrekte ID’er i salgs-sporing.

3. Besøgs-ID ændringer under session #

Clerk.io bruger et besøgs-ID til at identificere hver enkelt besøgende/kunde og spore, om de køber produkter gennem Clerk.io.

Dette besøgs-ID oprettes automatisk, når du bruger Clerk.js til at lave opsætningen.

Denne fejl er sjælden, men du kan tjekke besøgs-ID’et ved at følge disse trin:

1. Åbn dine Netværk indstillinger i browseren, og indsnævr resultaterne til “clerk”.

2. Start med at tjekke nogen af de “undefined” kald, som er relateret til søgning eller

anbefalinger.

3. I “payload” kan du tjekke det nuværende Besøgs-ID. Du vil kunne gøre dette for alle kald, der er relateret til Clerk.io

4. Fortsæt med at klikke på produktet, og afgivet en ordre med dette produkt.

5. På Ordre Succes siden, tjek dit Netværk igen, og find kaldet

til " sale?". 6. Sørg for, at “besøger” i “payload” her, matcher det Besøgs-ID, du så

i trin 3.

7. Hvis besøgs-ID’erne ikke stemmer overens, skal du sørge for, at du ikke ved et uheld ændrer

dem. En almindelig årsag til ændringer i besøgs-ID’er kan være, hvis du bruger Clerk.js 2 på dine

webshop-sider, men Clerk.js 1 på din Ordre Succes side. Tjek dine sider for at

sikre, at du bruger den samme type script overalt. Brug nedenstående skærmbillede

til reference.

Hvis du er i tvivl, bedes du kontakte vores support via Live-Chat.

Ugyldig API-endpoint konsolfejl #

Clerk.io’s Javascript-bibliotek Clerk.js bruger den specialiserede klasse “clerk,” til at lede efter indlejringskoderne, der bruges til at gengive resultater.

Hvis du ser fejlen “Ugyldig API Endpoint” i din browsers konsol, betyder det normalt, at klassen “clerk” ved et uheld er blevet brugt i dit HTML et eller andet sted.

For eksempel:

For at rette dette, skal du blot omdøbe klassen til noget andet. Enhver klasse undtagen “clerk” kan bruges til styling:

Opgradering til Clerk.js 2 #

Clerk.js 2 er en hurtigere og meget mere fleksibel version af vores JavaScript-bibliotek, der gør installationen af Clerk.io på enhver webshop til en leg.

Men da de to versioner fungerer lidt forskelligt, skal du følge disse trin for at opgradere med succes.

De to hovedforskelle i Clerk.js 2 er:

Designene i my.clerk.io bruger Liquid, men kan også nemt oprettes ved hjælp af Design Editor.
Scriptet skal indsættes lige før tagget i din webshops skabelon.

Trin 1: Konvertering af Designs #

Da Clerk.js 2 har en anden tilgang til Designs, skal du oprette nye.

Du kan oprette dine Clerk.js 2 Designs på en af to måder:

1. Brug den intuitive Design Editor til at oprette nye Designs, som beskrevet i de følgende punkter.
2. Konverter dine gamle Designs. Følg denne guide for at se, hvordan du gør det.

1.1 Start med at gå til my.clerk.io -> Anbefalinger / Søg -> Designs og klik på Nyt Design:

1.2 Vælg designtypen, typen af indhold og navngiv designet (vi anbefaler at tilføje " V2", så det er tydeligt, at du bruger Clerk.js2).. Klik derefter på Opret Design.

1.3. I Design Editor, klik på et af de eksisterende elementer som navn, billede, knap osv. for at redigere det, eller tilføj nye elementer til Designet for at tilføje flere oplysninger om produkter.

1.4. Klik på Publicer Design, når du er færdig, og gå til Trin 2 i guiden.

1.5. Til sidst, gå til Anbefalinger / Søg -> Indhold og ændre dit Clerk.io Indhold til at bruge dit nye Design.

1.6. Klik på Opdater Indhold. Dette vil midlertidigt få dem til ikke at vise sig på din webshop, indtil du er færdig med Trin 2. Vælg det nye Design for alt Indhold, der skal opdateres.

1.7. Der! Du er nu klar til at skifte over til Clerk.js 2.

Trin 2: Erstatning af scriptet #

2.1. Start med at finde skabelonfilen, der bruges til at vise alle sider af webshoppen, og hvor det originale Clerk.js script findes nær bunden.

2.2. Fjern det gamle script fra filen:

2.3. Gå derefter til my.clerk.io -> Indstillinger -> Sporingskode. Denne side indeholder nu din Clerk.js 2 sporingskode.

2.4. Kopier denne kode og indsæt den lige før tagget i skabelonen:

2.5. Gem din skabelon.

Tillykke! Du kører nu på det meget forbedrede Clerk.js 2 setup!

Du kan se den fulde dokumentation for Clerk.js 2 her: https://docs.clerk.io/docs/clerkjs-quick-start

Håndtering af require.js #

Denne guide gælder kun, når du bruger Clerk.js 1.

I nogle opsætninger stopper Require.js Clerk.js fra at indlæse, hvilket betyder, at ingen sliders eller søgeresultater vil blive vist.

Når dette sker, vil følgende fejl blive vist i din konsol:

Uncaught ReferenceError: Clerk is not defined

Der er to måder at håndtere Require.js. Begge tilgange kræver, at du foretager ændringer i sporings-scriptet, som du har indsat i bunden af alle sider.

Inkluder “clerk” i Require.js #

Den bedste tilgang er at forsøge at få Require.js til at genkende Clerk.io.

Du kan gøre dette ved at indsætte require([‘clerk’], function() {}); i bunden af sporingsscriptet:

Ignorer Require.js #

Hvis den ovenstående løsning ikke virker, er det muligt at ignorere Require.js.

Du kan gøre dette ved at indsætte window.__clerk_ignore_requirejs = true;

i toppen af sporingsscriptet:

Efter at have brugt en af disse tilgange, vil Require.js nu være kompatibel med Clerk.io.

Afinstallering #

For at afinstallere Clerk.io fra din webshop, skal du fjerne de Visitor Tracking og Order Tracking scripts, du oprindeligt tilføjede.

Et eksempel på Visitor Tracking-scriptet, der skal slettes, findes i en header-fil:

Dernæst skal du fjerne Order Tracking-scriptet fra din tilpassede platform webshop.

Da du installerede Clerk.io, tilføjede du sandsynligvis Order Tracking til enten et tracking script modul eller en ordrebekræftelsesside inden for dine tema-filer, eller et tracking modul i din butik. Ligesom Visitor Tracking skal du blot fjerne Order Tracking-scriptet fra tema-filen.

Eksempel på placeringen af Order Tracking nedenfor:

Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.