Enhver (webshop)

FAQ

Svar på ofte stillede spørgsmål om tilpassede integrationer

Oplever du problemer med din brugerdefinerede integration? Denne FAQ dækker de mest almindelige problemer og deres løsninger, fra single-page apps til sporing af salg.

Single-page apps #

Disse kaldes også Progressive Web Apps (PWA) og loader generelt siden som en enkelt side, i stedet for at loade individuelle sider som normalt.

Når en side loades for første gang, udfører Clerk.js-biblioteket automatisk en funktion for at gengive alle Element blokke på den side.

For single-page apps, der bruger frameworks som vue.js eller next.js, bliver sider dog gengivet med JavaScript i stedet for en standard sideindlæsning.

Derfor skal du selv styre renderingen med Clerk.js, så det matcher den måde, du loader sider på i appen.

Inkludér Clerk.js #

Clerk.js skal kun inkluderes én gang – når websitet loades første gang.

Herefter vil biblioteket være tilgængeligt igennem hele sessionen.

Inkludér det lige før </head> i din HTML:

<!-- Start of 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>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Styr rendering #

Som standard render Clerk.js alle elementer, der har klassen clerk, uanset om det indsættes ved den oprindelige sideindlæsning eller når DOM opdateres.

Du kan styre tidspunktet ved at indsætte elementet, når det er klar til at blive gengivet.

Alternativt kan du styre rendering med funktionen Clerk("content", "SELECTOR").

Hver gang en side loades, følg disse trin i rækkefølge:

  • Tilføj Clerk-snippet til HTML’en med en unik selector, du kan målrette.

  • Kør Clerk("content", "SELECTOR") for at gengive det.

Når besøgende forlader siden, ødelæg snippets og gengiv det igen, hvis de vender tilbage til samme side.

Dette er for at sikre, at Clerk.js ikke ser snippen som tidligere gengivet, hvilket kan medføre, at den ikke visualiseres.

Eksempel:

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

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

Clerk.js kan også konfigureres til automatisk at initialisere Elements med dine egne selectors efter første rendering.

Pagespeed påvirkning #

At tilføje et eksternt værktøj som Clerk.js vil øge den tid, det tager at loade dit site, men det er ubetydeligt sammenlignet med de ekstra konverteringer, det giver.

Nedenfor kan du se, hvordan det påvirker dit sites performance.

Performance #

Clerk.js-biblioteket er kun 37,5 kb, så det loader meget hurtigt.

Desuden loader det elementer asynkront, hvilket betyder, at resten af siden indlæses, mens Clerk.js gengiver indhold.

En forøgelse i sidens indlæsningstid kommer oftest fra, at der bliver indlæst flere billeder end tidligere, da Clarks søgeresultater og anbefalinger fungerer bedst, når de er visuelt tiltalende.

For at minimere ekstra loadtid anbefaler vi at bruge billeder i webp-format med en opløsning, der matcher størrelsen i Clerk-elementerne.

Eksempelvis, hvis billeder i anbefalinger har opløsningen 400x400px på desktop, så send billeder med maksimal opløsning på 420x420px eller lignende.

Google Page Speed #

Hvis du bruger Google Page Speed Insights eller et lignende værktøj til at analysere dit sites performance, kan du se Clerk.js nævnt under Leverage browser caching.

Leverage browser caching

Formålet med Clerk.js er at gøre det super let at indsætte resultater fra Clerk på ethvert website.

Clerk.js indeholder mange funktioner til håndtering af tracking og UI-komponenter som Instant Search, sliders, popups og mere.

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

En cache-udløbstid 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 cachen varer, jo længere tid går der, før alle har adgang til de nyeste funktioner.

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

Cache-udløbstiden på 60 minutter betyder blot, at slutbrugerens browser tjekker ind hos Clerk hver 60. minut.

Hvis der ikke er foretaget ændringer i Clerk.js, bliver intet downloadet.

Cache-udløbstiden på 60 minutter er altså et kompromis mellem at minimere webforespørgsler og se nye funktioner og forbedringer.

De fleste sessioner er kortere end 60 minutter, så forespørgslen laves kun én gang pr. session.

Som du kan se på screenshot, er dette en normal praksis, der (ligesom Clerk) også anvendes af Google Analytics, Facebook, Trustpilot og mange andre.

CLS påvirkning #

Cumulative Layout Shift (CLS) kan påvirke SEO og brugeroplevelse negativt, når dynamisk indsat indhold forskyder elementer på en side.

I nogle tilfælde, blandt andre faktorer, kan Clerk bidrage til CLS-scoren.

Du kan læse mere om CLS her.

Følg kun denne retningslinje, hvis din CLS-score er højere end 0,2, og Clerk-elementer er above the fold.

For at forhindre indhold i at forskyde sig, skal der reserveres en plads til Clerk recommendations, før Clerk.js indsætter dem.

For at gøre dette skal vi tilføje en minimumshøjde baseret på forventet indholdshøjde.

Eksempel på kode:

.clerk-slider-wrapper {
    min-height: 300px; /* Tilpas baseret på forventet indholdshøjde */
    width: 100%;
}

Foretage API-kald #

Du kan bruge Clerk.js til at foretage API-kald via den indbyggede funktion Clerk("call").

Denne funktion tager 3 argumenter:

  • Et API-endpoint

  • Et JSON-ordbog med parametre

  • En callback-funktion til at håndtere svaret

Requests #

Nedenfor er et eksempel på et script, der forespørger de 10 mest populære produkter og logger svaret til konsollen.

Svaret indeholder et JavaScript-objekt med status på API-kaldet samt resultatet.

Script #

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

Svar #

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

Callbacks #

Når du foretager API-kald, kan du bruge callback-funktioner til at håndtere svaret, som du ønsker.

Funktionerne tager response som argument, som indeholder alle data returneret af API.

Nedenfor er et eksempel, der opretter en liste af HTML-elementer, der linker til kategorier, der matcher forespørgslen “men”.

Clerk("call",
  "search/categories",
  {
      'query': "men",
      'limit': "10"
  },
  function(response) {
      var cat = response.categories;
      if (cat.length > 0) {
          let heading = document.createElement('h3');
          heading.textContent = 'Related Categories';
          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);
      }
  }
)

Add-to-cart knapper #

Disse knapper fungerer forskelligt for hver platform, og funktionaliteten kan ændre sig afhængigt af hvilke plugins, du bruger.

Fordi Clerks designs består af HTML & CSS, kan du som regel tilføre denne funktion, hvis du forstår, hvordan det fungerer på dit site.

Generel tilgang #

Nogle add-to-cart knapper kræver, at JavaScript afvikles for, at de fungerer.

I disse tilfælde kan du tilføje funktionaliteten til Clerks eksisterende cart-metode.

Se, hvordan du gør dette i vores udviklerdokumentation her.

Inspicér add-to-cart-knappen for at identificere den kode, der er tilknyttet den, f.eks. på en kategoriside.

Koden vil som regel 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

  • Produktmængde

Udskift værdierne for produkt-ID’et med Liquid-variablerne for disse datapunkter.

ID’et vil altid være {{ product.id }}, og mængden vil variere afhængigt af, hvordan du sender data.

I dette eksempel kunne det være {{ product.qty }}.

Indsæt koden i HTML’en af dit Design og test, at den virker.

Eksempel #

Add-to-cart knappen nedenfor er et <div>, der har klassen button-container:

Add-To-Cart example

Mængden findes inde i indkøbskurv-linket efter /cart?add=, og produkt-ID’et findes lige efter &id_product=.

Produkt-ID’et refereres også i data-id-product, og produktmængden i .data-minimal_quantity.

Disse værdier bør udskiftes med Liquid tags i Designet, så de rigtige produkt-ID’er og mængder bruges i HTML-outputtet.

Resultatet bliver, at den endelige add-to-cart-knap ser sådan ud:

<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="Add to Cart" 
    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>

Console-fejl #

Clerk.js logger mange fejl til konsollen, som du kan bruge til fejlfinding.

Console Errors

Ved at klikke på fejl-linket får du mere information om, hvad der gik galt, som du kan bruge til selv at fejlfinde, eller sende til vores supportteam, der hjælper dig.

Herunder finder du en liste over de mest almindelige fejl.

Ukendt content #

Denne fejl vises, hvis snippen, du indsatte, refererer til et Element, der ikke eksisterer, i attributten data-template.

For at rette det skal du sikre, at navnet i embed-koden matcher en Element-blok, du har oprettet i my.clerk.io.

Du kan klikke på Edit Element for ethvert Element for at se, hvad referencen skal være.

Element ID

Ugyldigt API-endpoint #

Denne fejl opstår, hvis du har brugt klassen clerk i din HTML et andet sted.

Denne klasse er reserveret til brug med vores snippets, da Clerk.js bruger denne klasse til at identificere elementer, der skal renderes.

For at rette det, skal du give klassen et andet navn, som fx clerk-product.

Ugyldigt produkt-argument #

Denne fejl betyder, at det angivne ID for et produkt har forkert type eller syntaks.

Fx hvis dine produkt-ID’er er heltal, skal de også være det i embed-koden.

Husk også klammerne omkring ID’et, så det bliver en liste.

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

Ugyldigt kategori-argument #

Denne fejl betyder, at det leverede ID for en kategori har forkert type eller syntaks.

Oftest sker det, hvis pladsholderen i kategori-embedkoden ikke er erstattet med et faktisk ID:

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

Uddataen af koden skal indeholde det konkrete kategori-ID:

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

Hvis du kopierede snippen manuelt, skal du sørge for at vælge dit shopsystem i Choose your platform-dropdownen, før du kopierer snippen.

Den vil så inkludere din platforms logik for at vælge det rigtige kategori-ID.

Hvis din platform ikke er på listen, skal du manuelt tilføje logikken til at vælge det rigtige kategori-ID ud fra dit webshops funktionalitet.

Forkert API-nøgle #

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

For at rette dette, log ind på my.clerk.io og gå til Developers > API Keys.

Her kan du finde Public API Key, som du derefter kan tilføje til dit Clerk.js tracking-script – enten direkte i koden eller i indstillingerne for din integration, afhængigt af din platform.

POS/ERP salgsdata #

For nogle webshops er det relevant at uploade salgsdata fra andre systemer end selve webshoppen.

Fx hvis du vil optimere algoritmen på baggrund af salg fra en fysisk butik eller B2B-butik.

Clerk skelner ikke mellem ordrer fra forskellige kilder – så længe du kan oplyse et ID, et tidsstempel og en liste af købte produkter, kan de uploades til Clerk.

Den anbefalede løsning er at bruge CRUD API, da det gør det muligt at automatisere opgaven helt.

Ved at implementere disse API-kald kan du sende ordredata direkte til din Store i Clerk.

Opret blot et POST-kald til /orders-endpointet i dit ERP-system eller webshop, kør jobbet regelmæssigt, fx en gang om måneden, og du kan bruge offline ordrer til at booste dine online-anbefalinger og søgeresultater.

Alternativt kan du uploade en CSV-fil manuelt uden at kode noget.

Du kan læse mere om CSV-filer her.

Valutaomregning #

Der findes flere måder at arbejde med valutaomregning i Clerk.

En simpel måde at få det til at virke er beskrevet nedenfor.

Send price objects #

Clerk skal kende priserne på hvert produkt i de forskellige valutaer.

Den nemmeste måde er at sende dem som et string-encodet JSON-objekt af formaterede priser med valutakode som nøgle i dit Data Feed.

"products": [
  {
    "id": 1,
    "name": "Cheese",
    "description": "A nice piece of cheese.",
    "price": 100,
    "list_price": 50,
    "categories": [25, 42],
    "image": "http://example.com/images/products/1.jpg",
    "url": "http://example.com/product/1",
    "on_sale": true,
    // String-encoded JSON examples
    "prices_formatted": "{\"USD\":\"$100\", \"EUR\":\"€87.70\", \"GBP\":\"£68.68\"}",
    "list_prices_formatted": "{\"USD\":\"$120\", \"EUR\":\"€97.70\", \"GBP\":\"£78.68\"}"  
  },
  {
    "id": 2,
    "name": "A pound of nuts",
    "description": "That's a lot of nuts!",
    "price": 150,
    "categories": [1],
    "image": "http://example.com/images/products/2.jpg",
    "url": "http://example.com/product/2",
    "on_sale": false,
    // String-encoded JSON example
    "prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}",
    "list_prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}"
  }
]

Opret formatter #

I Clerk.js kan du definere JavaScript-funktioner, der kan bruges i dine Designs.

Her kan du definere en funktion, der tager din pris-dict som argument og returnerer prisen for en bestemt valuta ud fra frontend-logikken, du vælger.

Sørg for at erstatte currency med den aktuelt valgte valuta fra frontend.

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];
      }
  }
});

Brug formatter #

Når formatteren er defineret, kan den bruges i dit design med følgende syntaks:

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

Kunde-specifikke priser #

For at vise helt unikke priser baseret på, hvilken kunde der er logget ind, skal du oprette en Event i Clerk, der indsætter den korrekte pris, før produkterne rendes.

Events er JavaScript-funktioner, der køres før eller efter Clerk viser produkter.

Metoden kan bruges, hvis du kan slå priser op fra din server direkte fra en JavaScript-funktion i frontend baseret på product ID og customer ID.

For at vise individuelle kundepriser bør koden køre lige efter svaret.

Herunder et eksempel på et simpelt event.

<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 responsen, som Clerk returnerer fra API’et.

Individuelle kundepriser #

Hvis du skal vise helt unikke priser baseret på, hvilken kunde der er logget ind, skal du opsætte et Event, der indsætter den korrekte pris, efter produkterne er rendet.

Events er JavaScript-funktioner, der køres før eller efter Clerk viser produkter.

Denne tilgang forudsætter, at du kan slå priser op via AJAX-kald til din server i frontend på baggrund af fx product ID og customer ID.

Den bedste måde er først at oprette en pladsholder-pris-container i dit design og derefter udskifte den med prisen fra dit AJAX-kald.

Eksempel:

<div class="clerk-price-container">
   <span class="clerk-price">
      Loading price...
   </span>
</div>

Du kan så bruge Clerk-eventet til at vente på, at produkterne er rendet, lave en forespørgsel til din price-server med produktets ID og kundens ID, før du erstatter det i HTML’en.

Her er et eksempel på dette:

<script>
  var customer_id = INSERT_CUSTOMER_ID;
  Clerk("on", "rendered", function(content, 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);
          let price_container = document.querySelector(`[data-clerk-product-id='${product.id}'] .clerk-price`);
          price_container.innerText = custom_price;
      }
  })
  </script>

Koden ovenfor forudsætter, at du kan identificere en logget ind kunde med INSERT_CUSTOMER_ID, og at du har en funktion som FETCH_PRICE_FROM_SERVER, der returnerer prisen for produktet baseret på kunden.

price_container bruges til at finde det rigtige produkt baseret på det ID, der findes i data-clerk-product-id, som Clerk.js tilføjer til alle produkter.

Til sidst erstatter det inner text, fx “Loading price…”, med prisen fra AJAX-kaldet.

Kundekategori-priser #

Opsætningen af kundekategori-priser består af 4 trin:

  1. Inkludér de forskellige priser i data feedet.

  2. Inkludér en global variabel, der henter den aktuelle kundekategori-ID.

  3. Opret en funktion til at hente den relevante pris.

  4. Vis prisen i Designet.

Indsæt priskategorier #

Start med at tilføje et attribut til alle produkter, der indeholder alle forskellige prisvalg, og sørg for at tildele hver pris til en bestemt kundekategori.

Dette skal sendes som et JSON-objekt. For eksempel:

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

Kunde-ID-variabel #

Tilføj en dynamisk global variabel til Clerk.js, som henter kundekategori-ID for den aktuelle kunde og indsætter det som værdien.

Kundekategori-ID-værdien skal svare til nøglen for den tilhørende pris i Data Feedet.

Hvis en bruger skal se prisen for gruppe 2, skal ID’et altså være “GROUP2”.

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

Hent pris #

Du kan nu oprette en Formatter, der tager customer_group som argument og returnerer den relevante pris.

Gør dette ved at skrive en funktion, der henter prisen fra den specifikke kundekategori som nøgle i pris-dict’en ud fra customer_group-ID’et.

Tilføj dette i Clerk.js-konfigurationen. Her er et eksempel kaldet getPrice:

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  },
  formatters: {
    getPrice: function (prices, customer_group) {
      return prices[customer_group];
    }
  }
});

Vis pris #

Når getPrice-formattereren er oprettet, kan du bruge den direkte i dit Design, sammen med customer_group_prices-listen, du lavede i trin 1:

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

HTTP-autentificering #

HTTP-autentificering bruges ofte på staging-sites for at undgå uønskede besøgende.

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

Du kan løse dette ved at indsætte autentificeringsoplysningerne i import-URL’en.

I my.clerk.io > Data > Configuration, opdater din import-URL sådan:

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

Ingen sporede ordrer #

I my.clerk.io er Tracked Orders og Order Details samlet på én Orders-side.

Clerk skal løbende spore salg fra webshoppen for at holde resultaterne opdateret med dine kunders adfærd.

Dog kan nogle indstillinger på en webshop få sales-tracking til at fejle.

Nedenfor kan du se, hvordan du fejlfinder sales-tracking ved brug af Clerk.js samt de mest almindelige fejl og løsninger.

Før du starter #

Sørg for at have installeret:

Disse er nødvendige for at kunne spore salg generelt, når du bruger Clerk.js setup.

Tjek logs #

I de fleste tilfælde fejler sales tracking pga. fejl i visitor ID’er eller produkt-ID’er i sales-call’et, der sendes til Clerk efter køb.

For at fejlfinde dette skal du lave en testordre.

Dog kan det nogle gange skyldes selve sales tracking-scriptet og kan debugges ved at kigge i loggene i my.clerk.io > Developers > Logs.

Hvis sales-tracking fejler pga. fejl i dit script, kan du ofte se fejlen på denne side.

Klik på Details for at se mere.

Error Details

Hvis du ikke kan se fejl i logs, er den nemmeste måde at identificere andre sales tracking-problemer at afgive en testordre.

Fejlfinding med testordre #

I dette eksempel bruges Chrome til at vise, hvordan du fejlfinder sales tracking med en testordre, men andre browsere har lignende funktioner.

  1. Læg et par produkter i kurven på din webshop.

  2. Gå til Checkout.

  3. Før du afgiver ordren, åbn browserens Console.

  4. Find Network og søg efter “clerk”.

  5. Gennemfør ordren, så du ser order confirmation page.

  6. Klik på kaldet, der starter med sale (normalt sale?key=…).

Her kan du se de data, der sendes til og modtages fra sales tracking API-endpointet.

Klik på Preview for at identificere fejl, der kan forhindre, at salg spores.

Nedenfor er almindelige fejl forbundet med sales tracking.

Ugyldig produkt-syntaks #

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

De mest udbredte fejl er:

  • Produkt-ID’erne er string-encodet i sales tracking, men du bruger heltal i Clerk eller omvendt.

  • Listen over produkt-ID’er indeholder tekstformateringstegn i stedet for ren JSON: "products":\[\\"id"\\:\\"123-m"\\\].

Manglende argument #

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

Sørg for at inkludere alle nødvendige data-attributter i sales-tracking.

Intet kald foretaget #

Hvis du ikke kan se kaldet til sale, selv om begge scripts er installeret, er noget gået galt med at indlæse Clerk.js-scriptet korrekt.

Test dette med disse trin:

  1. Åbn Console i din browser.

  2. Skriv “Clerk”.

  3. Hvis Clerk.js ikke er indlæst korrekt, ser du en ReferenceError:

Uncaught ReferenceError: Clerk is not defined

Hvis det er tilfældet, skal du tjekke dit Clerk.js-setup:

  • Sørg for at Clerk.js er installeret på alle sider.

  • Tjek at det ikke blokeres af anden JavaScript.

Ingen Clerk impact #

Hvis du registrerer salg i my.clerk.io, men ingen af dem vises som påvirket af Clerk, har du måske fejl i din visitor-tracking / click-tracking-opsætning.

Start med at tjekke, at visitor-tracking virker ved at gøre følgende:

  1. Klik på et produkt via Clerks Search eller Recommendations.

  2. Gennemfør en ordre med dette produkt.

  3. Log ind på my.clerk.io og gå til Orders.

  4. Vent på at Ordren vises.

Hvis visitor-tracking virker, vil du se værdien tilføjet af Clerk i order details på siden Orders:

Orders overview

Hvis du ikke ser value added i ordren du lavede, kan følgende afsnit vise almindelige fejlårsager.

API set-up #

Hvis du opsætter Clerk med en brugerdefineret integration direkte til API, skal du selv aktivt slå visitor-tracking til.

Læs hvordan i denne API-artikel.

Forkerte produkt-ID’er #

For at visitor-tracking skal virke, skal click- og sales-tracking altid tracke de samme produkt-ID’er som de, vi får i importøren.

Ofte skyldes fejlen, at du tracker variant ID’er i stedet for parent ID’er eller SKU i stedet for ID.

Wrong Product IDs

Tjek om dette er fejlen, således:

  1. Gå til Data > Orders i my.clerk.io, og klik på ID’et for en ordre du har afgivet.

  2. Hvis Clerk ikke kan identificere produktet, ser du en ID og image placeholder.

  3. Gå til Data > Products og søg på navnet for det tilføjede produkt. Her kan du se det forventede ID for produktet.

Brug dette til at konfigurere din sales-tracking til at bruge de korrekte produkt-ID’er.

Visitor ID ændrer sig #

Clerk bruger et visitor ID til at identificere hver enkelt session, inkl. hvilke produkter der klikkes på og købes.

Derfor skal dette ID forblive det samme mindst i hele sessionen – helst på tværs af flere sessioner.

Dette visitor ID oprettes automatisk, når Clerk.js bruges til opsætning, men ved brug af API-setup, eller hvis du tilpasser visitor ID’er, kan du ved et uheld ændre det.

Denne fejl er sjælden, men du kan tjekke visitor ID ved at gøre følgende:

  1. Åbn browserens Network og filtrer efter “clerk”.

  2. Start med at tjekke en af undefined-kaldene, der er relateret til search eller recommendations.

  3. I payload kan du tjekke nuværende Visitor ID. Det kan du gøre ved alle kald relateret til Clerk.

  4. Klik på produktet og gennemfør en ordre med dette produkt.

  5. På Order Success-siden, tjek Network igen, og find kaldet til sale?.

  6. Sørg for, at visitor i payload er samme Visitor ID, som du så i trin 3.

Hvis Visitor-ID’erne ikke matcher, skal du finde årsagen til, at de skifter.

En typisk årsag til ændring af visitor ID kan være, at du genererer ID’et på ny ved hver sideindlæsning.

Opdater din kode, så samme visitor ID bruges på hver side.

Opgrader til Clerk.js 2 #

Clerk.js 2 er en hurtigere og mere fleksibel version af vores JavaScript-bibliotek.

Det gør det nemmere at installere Clerk på enhver webshop.

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

De to hovedforskelle i Clerk.js 2 er:

  • Designene i my.clerk.io bruger Liquid, men kan også nemt laves med Design Editor.

  • Scriptet skal indsættes lige før </head>-tagget i din webshops template.

Opret designs #

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

Du kan lave dine Clerk.js 2 Designs enten ved at lave dem fra bunden i Design Editor, eller ved at konvertere dine gamle code Designs til Liquid, hvilket nedenstående guide forklarer hvordan du gør.

Nedenfor er en beskrivelse af, hvordan du konverterer dine gamle kode Designs til Liquid.

Design Editor-indstilling #

  1. Gå til my.clerk.io > Recommendations/Search > Designs > New Design.

  2. Vælg en designtype, der ikke er Blank, og giv den et navn. Vi anbefaler at tilføje “V2”, så det er tydeligt, at du bruger Clerk.js 2 designs.

  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.

  4. Klik på Publish Design, når du er færdig, og gå til Step 2 i guiden.

  5. Gå til Recommendations/Search > Elements og ændr dit Clerk Element til at bruge dit nye Design, klik derefter på Update Element.

  6. Dette vil midlertidigt få dem til ikke at blive vist i din webshop, indtil du har indsat Clerk.js 2 som beskrevet længere nede i denne guide.

Konvertering af designs #

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

  1. Gå til my.clerk.io > Recommendations/Search > Designs > New Design.

  2. Vælg Blank > Code og giv det et navn. Vi anbefaler at tilføje “V2”, så det er tydeligt, at du bruger Clerk.js 2 designs.

  3. Klik på Create Design.

  4. Dette giver dig et tomt design med Product HTML og CSS, som du kan bruge.

  5. Gå tilbage til designoversigten og klik på Edit Design for dit Clerk.js 1 Design. Vi anbefaler at gøre dette i en ny fane, så du nemt kan kopiere koden.

  6. Kopiér det gamle Clerk.js 1 Design over i dit nye Clerk.js 2 Design.

    • Du vil bemærke, at der ikke er Container Code i din nye.

    • Dette skyldes, at Liquid bruger for loops til at gengive alle produkterne.

    • Kopiér din gamle Product HTML indsat i for-loopet, din gamle Container Code omkring det, og kopier også CSS’en.

  7. Konvertér Designet til Liquid’s syntaks. Den vigtigste forskel er, at de gamle Designs brugte syntaksen {{ formatter attribute }}, mens v2’s syntaks er {{ product.attribute | formatter }}.

  8. Gå alle dine attributter igennem og ændr dem til det nye format.

  9. Hvis du bruger {{#if}} eller {{#is}} statements, skal disse også konverteres. Brug syntaksen {% if product.attribute %} {% else %} {% endif %}.

  10. Slet id="{{ $id }}" og klassen :target fra containerkoden i Clerk.js 2 versionen, da de ikke længere understøttes.

  11. Nedenfor er et eksempel på et Clerk.js 1 design og den fuldt konverterede version:

Clerk.js 1 Design #
// Product HTML
<li class="clerk-product">
    <a href="{{ url }}">
        <img src="{{ image }}" />
        <div class="clerk-product-name">{{ name }}</div>
        <div class="clerk-price-wrapper">
            {{#if list_price}}
                <div class="clerk-old-price">
                    <s>Price {{ money_eu list_price }}</s>
                </div>
                <span class="clerk-new-price">Price {{ money_eu price }}</span>
            {{else}}
                <div class="clerk-product-price">Price {{ money_eu price }}</div>
            {{/if}}
        </div>
    </a>
    <div class="clerk-cta-button btn button">Buy Now</div>
</li>

// Container Code
<h2>{{ headline }}</h2>
<ul id="{{ $id }}" class=":target clerk-slider"></ul>

<!-- This code creates the slider by its ID. -->
<script type="text/javascript">
    Clerk.ui.slider("{{ id }}").init();
</script>
Clerk.js 2 Design #
<h2>{{ headline }}</h2>

<ul class="clerk-slider">
    {% for product in products %}
    <li class="clerk-product">
        <a href="{{ product.url }}">
            <img src="{{ product.image }}" />
            <div class="clerk-product-name">{{ product.name }}</div>
            <div class="clerk-price-wrapper">
                {% if product.list_price %}
                    <span class="clerk-old-price"><s>Price {{ product.list_price | money_eu }}</s></span>
                    <span class="clerk-new-price">Price {{ product.price | money_eu }}</span>
                {% else %}
                    <div class="clerk-product-price">Price {{ product.price | money_eu }}</div>
                {% endif %}
            </div>
            <div class="clerk-cta-button btn button">Buy Now</div>
        </a>
    </li>
    {% endfor %}
</ul>

  1. Klik på Update Design for at gemme ændringerne.

  2. Gå til Recommendations/Search > Elements og ændr din Element-blok til at bruge dit nye Design.

  3. Klik på Update Element. Dette vil midlertidigt få dem til ikke at blive vist i din webshop, indtil du er færdig med Step 2. Vælg det nye Design for alle de Elementer, der skal opdateres.

Udskift script #

  1. Find skabelonfilen, der bruges til at vise alle sider i webshoppen, og hvor det oprindelige Clerk.js script findes nær bunden.

  2. Fjern det gamle Clerk.js script fra filen. Det kommer til at se sådan ud:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
    window.clerkAsyncInit = function() {
        Clerk.config({
            key: 'public_api_key'
        });
    };
    (function(){
        var e = document.createElement('script'); e.type='text/javascript'; e.async = true;
        e.src = document.location.protocol + '//api.clerk.io/static/clerk.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
    })();
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

  1. Gå til my.clerk.io > Developers > Tracking Code. Dette indeholder Clerk.js 2-koden.

  2. Kopiér denne kode, indsæt den lige før </head> tagget i skabelonen og gem derefter.

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

Du kan se den fulde dokumentation for Clerk.js 2 her.

Håndtering af require.js #

Dette afsnit gælder kun ved brug af Clerk.js 1.

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

Når dette sker, vises følgende fejl i din konsol:

Uncaught ReferenceError: Clerk is not defined

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

Inkludér i Require.js #

Den bedste tilgang er at prøve at få Require.js til at genkende Clerk.

Du kan gøre dette ved at indsætte require(['clerk'], function() {}); i bunden af tracking-scriptet:

Insert Require Clerk.js 1

Ignorér Require.js #

Hvis 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 tracking-scriptet:

Ignore Require.js

Efter du har brugt en af disse tilgange, vil Require.js nu være kompatibel med Clerk.

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