Enhver (webshop)

FAQ

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

Oplever du problemer med din tilpassede 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 indlæser generelt siden som én enkelt side i stedet for at indlæse individuelle sider som normalt.

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

Dog for single-page apps, der bruger frameworks som vue.js eller next.js, renderes siderne med JavaScript frem for en standard sideindlæsning.

På grund af dette, skal du styre rendringen med Clerk.js så det matcher, hvordan du indlæser siderne i appen.

Inkluder Clerk.js #

Clerk.js skal kun indlæses én gang, når siden indlæses første gang.

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

Inkluder 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 med klassen clerk, uanset om det indsættes under den indledende sideindlæsning eller når DOM’et ændres.

Du kan styre timingen ved at indsætte elementet når det er klar til at blive synliggjort.

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

Hver gang en side bliver indlæst, skal du udføre følgende 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 render det.

Når besøgende forlader siden, destruer snippet’et, og render det igen hvis den besøgende vender tilbage til samme side.

Dette er for at sikre, at Clerk.js ikke ser snippet’et som allerede renderet, hvilket ellers vil betyde at det ikke bliver vist.

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 at initialisere Elementer automatisk med dine brugerdefinerede selectorer efter første rendering.

Pagespeed påvirkning #

Tilføjelse af et eksternt værktøj som Clerk.js vil øge indlæsningstiden for dit site, men det er negligerbart sammenlignet med de flere konverteringer det giver.

Herunder kan du se, hvordan det påvirker dit sites ydeevne.

Ydeevne #

Clerk.js biblioteket er kun 37,5kb i størrelse, så det indlæses meget hurtigt.

Desuden indlæses elementer asynkront, hvilket betyder, at resten af siden indlæser, mens Clerk.js renderer indhold.

En stigning i sidens indlæsningstid skyldes oftest indlæsning af flere billeder end tidligere, da Clerk’s søgeresultater og anbefalinger fungerer bedst, når de er visuelt tiltalende.

For at minimere ekstra indlæsningstid anbefaler vi at bruge billeder i webp-format, med en opløsning der matcher størrelsen på billederne i Clerk-elementerne.

Eksempelvis, hvis billederne i anbefalingerne har en opløsning på 400x400px på desktop, så brug 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 ydeevne, kan du se Clerk.js listet under Leverage browser caching.

Formålet med Clerk.js er at gøre det super nemt at indsætte resultater fra Clerk ind på enhver hjemmeside.

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

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

At have en cache-udløbstid på 60 minutter betyder, at når vi udgiver nye funktioner, vil de være tilgængelige for alle indenfor maksimalt 60 minutter.

Jo længere cache-tid, desto længere tid vil det tage før alle har adgang til de nyeste funktioner.

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

60 minutters cacheudløb betyder blot, at slutbrugerens browser tjekker med Clerk hver 60. minut.

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

Cacheudløbstiden på 60 minutter er således et kompromis mellem at minimere webrequests og se nye funktioner og forbedringer.

De fleste sessioner er kortere end 60 minutter, så anmodningen bliver kun udført én gang pr. session.

Som du kan se på skærmbilledet, er dette almindelig praksis (ligesom Clerk) og bruges af Google Analytics, Facebook, Trustpilot og mange andre.

CLS-påvirkning #

Cumulative Layout Shift (CLS) kan have en negativ indvirkning på SEO og brugeroplevelse, når dynamisk indsprøjtet indhold forskyder elementer på siden.

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

Du kan læse mere om CLS her.

Følg denne vejledning kun hvis din CLS-score er højere end 0.2 og Clerk-elementer er over folden.

For at forhindre indhold i at flytte sig, skal du reservere en pladsholder for Clerk-anbefalinger, inden Clerk.js injicerer dem.

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

Eksempel på kode:

.clerk-slider-wrapper {
    min-height: 300px; /* Justér ud fra forventet indholdshøjde */
    width: 100%;
}

API-kald #

Du kan bruge Clerk.js til at lave 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

Forespørgsler #

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

Svaret indeholder et JavaScript-objekt med status for API-kaldet og 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 laver API-kald kan du bruge callback-funktioner til at håndtere svaret, som du ønsker.

Funktionerne tager response som argument, der indeholder alle data, der returneres af API’en.

Herunder er et eksempel, som 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 = '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);
      }
  }
)

Tilføj-til-kurv-knapper #

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

Da Clerks designs består af HTML & CSS, kan du som regel tilføje denne funktionalitet, hvis du forstår hvordan det virker på dit site.

Generel tilgang #

Nogle tilføj-til-kurv-knapper kræver, at JavaScript køres, for at fungere.

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

Tjek hvordan du gør dette i vores dev-dokumentation her.

Inspicér tilføj-til-kurv-knappen for at identificere den kode, der er tilknyttet den, f.eks. på en kategoriside.

Koden vil oftest være et <div> eller et button-element.

Kopiér hele knappen HTML’en.

Kopiér 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 Liquid-variabler for disse datapunkter.

ID vil altid være {{ product.id }} og mængden varierer afhængig af, hvordan du sender dataene.

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

Indsæt koden i HTML’en for dit Design og test for at sikre, at det virker.

Eksempel #

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

Mængden findes inde i kurv-linket efter /cart?add= og Produkt ID findes lige efter &id_product=.

Produkt-ID er også refereret i data-id-product, og produktantallet er refereret i .data-minimal_quantity.

Disse værdier skal erstattes med Liquid-tags i Designet, så de rette produkt-ID’er og mængder bliver brugt i HTML-outputtet.

Med disse ændringer vil den endelige tilføj-til-kurv-knap se således 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>

Konsolfejl #

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

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

Herunder finder du en liste over de mest almindelige fejl.

Ukendt indhold #

Denne fejl vises, hvis det snippet, du har indsat, refererer til et Element, der ikke eksisterer, i data-template attributten.

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

Du kan klikke på Rediger element på ethvert Element, for at se hvilken reference det skal have.

Ugyldigt API-endpoint #

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

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

For at rette det, omdøb klassen til noget andet, fx clerk-product.

Ugyldig produkt-argument #

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

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

Husk også klammerne rundt om ID’et, så det er en liste.

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

Ugyldigt kategori-argument #

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

I de fleste tilfælde sker det, hvis pladsholderen i kategori-embed-koden ikke er blevet erstattet af et faktisk ID:

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

Outputtet af koden skal indeholde kategoriets ID:

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

Hvis du har kopieret snippet’et manuelt, skal du sikre dig at vælge dit shopsystem i Choose your platform dropdown før du kopierer snippet’et.

Så vil det inkludere din platforms logik, så det korrekte kategori-ID vælges.

Hvis din platform ikke er listet, skal du manuelt tilføje logikken for at vælge det rette kategori-ID baseret på din webshops funktionalitet.

Forkert API-nøgle #

Denne fejl 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 så kan tilføje til dit Clerk.js tracking script – enten direkte i koden eller i integrationens indstillinger, afhængig af din platform.

POS/ERP salgsdata #

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

For eksempel hvis du vil optimere algoritmen baseret på salg fra en fysisk butik eller en 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 tilgang er at bruge CRUD API, da det gør det muligt at automatisere opgaven fuldstændigt.

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

Lav blot et POST-kald til /orders endpointet i dit ERP-system eller din webshop, kør jobbet med jævne mellemrum fx én gang om måneden, så du kan bruge offline ordrer til at booste dine online anbefalinger og søgeresultater.

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

Læs mere om CSV-filer her.

Valutakonvertering #

Der er flere måder at håndtere valutakonvertering i Clerk.

En simpel måde at gøre det på er beskrevet herunder.

Oversæt valutaer #

Hvis besøgende bruger Google Translate på din webshop, kan prisværdier blive oversat på måder, der ødelægger formateringen eller ændrer valuta-visningen.

For at forhindre dette, skal du indkapsle prisudskrivningen i elementer, der ikke bør oversættes.

Anbefalet markup #

Brug både translate="no" og klassen notranslate på priselementet:

<span class="clerk-price notranslate" translate="no">
  {{ product.price | money }}
</span>

Hvis du viser både listepris og tilbudspris, anvend samme mønster for hver prisværdi:

<span class="clerk-old-price notranslate" translate="no">
  {{ product.list_price | money }}
</span>
<span class="clerk-new-price notranslate" translate="no">
  {{ product.price | money }}
</span>

Placér placeringer #

I dit Clerk Design hvor priserne vises.
I enhver brugerdefineret HTML-wrapper, der udskriver prisværdier.

Dette bevarer resten af sidens oversættelighed, mens korrekt pris- og valutaformatering fastholdes.

Send pris-objekter #

Clerk skal kende priserne for hvert produkt i forskellige valutaer.

Den nemmeste måde at gøre dette på, er at sende dem som et streng-encodet JSON-objekt af formaterede priser, hvor valuta-ISO er nøgle, i din 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\"}"
  }
]

Lav formatter #

I Clerk.js kan du definere JavaScript funktioner, som kan bruges med dine Designs.

Her kan du definere en funktion, der tager dit price-dict som argument, og returnerer prisen for en bestemt valuta, baseret på frontend-logik du vælger.

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

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 #

Clerk understøtter visning af forskellige priser baseret på den indloggede kunde, enten ved at hente individuelle priser ved render-tid eller ved at pre-gemme gruppepriser i produktdata.

Dette er dækket i detaljer i den dedikerede Customer Pricing artikel.

HTTP-autentificering #

HTTP-autentificering bruges ofte på staging-sider 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 autentifikationsinfo i import-URL’en.

I my.clerk.io > Data > Configuration skal du opdatere din import-URL således:

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

Ingen trackede ordrer #

I my.clerk.io er Tracked Orders og Order Details fusioneret til én Ordrer-side.

Clerk skal kontinuerligt spore salg fra webshoppen for at holde resultater opdateret med dine kunders adfærd.

Nogle opsætninger kan dog gøre, at salgssporing fejler.

Nedenfor kan du se, hvordan du fejlsøger sporing af salg når du bruger et Clerk.js-setup, samt se de mest almindelige problemer og løsninger.

Før du starter #

Sørg for at du har installeret:

Clerk.js tracking scriptet på alle sider.
Salgssporings-scriptet på din Ordre-success-side.

Disse er nødvendige for overhovedet at kunne tracke salg, når du bruger et Clerk.js-setup.

Tjek logs #

I de fleste tilfælde fejler salgssporing på grund af fejl i besøgs-id’er eller produkt-id’er i sales-callet, som sendes til Clerk efter et køb er gennemført.

For at fejlsøge dette skal du lave en testordre.

I nogle tilfælde kan det dog være relateret til selve scriptet til salgssporing og kan fejlsøges i logs i my.clerk.io > Developers > Logs.

Hvis salgssporingen fejler grundet en fejl i dit script, vil du ofte kunne se fejlen på denne side.

Klik på Details for at se mere.

Hvis du ikke kan se fejl i logs, er den letteste måde at identificere andre problemer med salgssporing at lave en testordre.

Testordre-fejlfinding #

I dette eksempel bruger vi Chrome til at vise, hvordan salgssporing fejlsøges med en testordre, men andre browsere har lignende funktioner.

Kom nogle produkter i kurven på din webshop.
Fortsæt til Checkout.
Før bestillingen placeres, åbn din browsers Console.
Find Network, og søg efter “clerk”.
Placér ordren, så du ser ordrebekræftelsessiden.
Klik på kaldet, der starter med sale (normalt sale?key=…).

Her ser du de data, som sendes til og modtages fra salgssporings-API’en.

Klik på Preview for at identificere eventuelle fejl, der kan forårsage at salget ikke spores.

Nedenfor er almindelige fejl i forbindelse med salgssporing.

Ugyldig products-syntaks #

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

De mest almindelige fejl er:

Produkt-ID’er er string-encodet i salgssporingen, men du bruger heltal i Clerk eller omvendt
Listen af produkt-ID’er indeholder tekstformaterings karakterer i stedet for ren JSON: "products":\[\\"id"\\:\\"123-m"\\\].

Manglende argument #

Dette betyder, at du ikke sender alle de data, Clerk skal bruge for at kunne tracke salget.

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

Intet kald er foretaget #

Hvis du ikke kan se et kald til sale selvom begge scripts er installeret, så er Clerk.js-scriptet indlæst forkert.

Test dette ved at følge disse trin:

Åbn Console i din browser.
Tast “Clerk”.
Hvis Clerk.js ikke er indlæst korrekt, ser du en ReferenceError:

Uncaught ReferenceError: Clerk is not defined

Er det tilfældet, skal du tjekke Clerk.js-opsætningen:

Sørg for Clerk.js er installeret på alle sider.
Tjek at den ikke er blokeret af anden JavaScript-funktionalitet.

Iubenda blokering #

Hvis du bruger iubenda til cookie-samtykke (især med Automatisk blokering) og en besøgende afviser cookies, kan iubenda blokere Clerks scripts eller requests.

Dette betyder typisk at:

sale anmodningen aldrig sendes, så ordren ikke trackes eller ikke tilskrives i Clerk.
Clerk-elementer måske ikke renderes overhovedet, eller Clerk.js måske logger en konsolfejl om at være indlæst flere gange (fordi iubenda omskriver/udskyder scripts).

Løsning: tillad Clerk.io i iubenda #

I iubenda, tillad Clerk, så det ikke blokeres når besøgende afviser cookies.

Som minimum skal disse domæner tillades:

cdn.clerk.io (Clerk.js)
api.clerk.io (tracking og salgs-anmodninger)

De præcise UI-betegnelser varierer i iubenda, men det findes normalt under dit iubenda-projekts Cookie Solution indstillinger for Automatisk blokering (allowlist/whitelist/ignore list).

For iubendas egen vejledning, se deres artikel om over-blokering i automatisk blokeringstilstand: https://www.iubenda.com/en/help/153445-what-to-do-when-the-automatic-blocking-mode-is-blocking-too-much/.

Verificér løsningen #

Efter at have opdateret iubenda-indstillingerne:

Indlæs webshoppen, afvis cookies, og åbn browserkonsollen.
Bekræft at Clerk.js er tilgængelig (for eksempel, typeof Clerk bør ikke være "undefined").
Kør Clerk("debug"), lav en testordre, og bekræft at en sale-anmodning sendes til Clerk og returnerer status: "ok".

Ingen Clerk-effekt #

Hvis du tracker salg i my.clerk.io, men ingen af dem vises som påvirket af Clerk, kan du have en fejl i din besøgs-tracking / klik-tracking opsætning.

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

Klik på et produkt gennem Clerk’s Search eller Recommendations.
Fortsæt med at lave en ordre med dette produkt.
Log ind på my.clerk.io og gå til Orders.
Vent på at ordren vises.

Hvis besøgs-tracking virker, vil du se værdien, Clerk har tilføjet, på ordredetaljerne på Orders siden:

Hvis du ikke ser value added på ordren, viser de næste afsnit almindelige fejl, der kan forårsage dette.

API-opsætning #

Hvis Clerk er sat op med en tilpasset integration direkte mod API, skal du aktivere besøgs-tracking aktivt.

Læs hvordan i denne API-artikel.

Forkerte produkt-ID’er #

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

Hvis det ikke virker, skyldes det oftest at du tracker variant-ID’er i stedet for parent ID’er eller SKU i stedet for ID.

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

I my.clerk.io, gå til Data > Orders og klik på ID’et for en ordre du har placeret.
Hvis Clerk ikke kan identificere produktet, ser du en ID og image-pladsholder.
Gå til Data > Products og søg efter navnet på produktet du har tilføjet. Her vil du kunne se det forventede ID for produktet.

Brug dette til at indstille din salgssporing til at bruge de rette produkt-ID’er.

Visitor ID ændringer #

Clerk anvender et visitor ID til at identificere hver enkelt session, herunder hvilke produkter de klikker på og køber.

Derfor bør ID’erne forblive de samme gennem hele sessionen og gerne på tværs af flere sessioner.

Visitor ID’et oprettes automatisk ved brug af Clerk.js, men hvis du bruger en API-opsætning eller tilpasser dine visitor ID’er, kan det utilsigtet ændres.

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

Åbn Network i browseren, og filtrer på “clerk”.
Start med at tjekke de undefined kald, der er relateret til search eller recommendations.
Under payload findes det aktuelle Visitor ID. Dette er muligt for alle kald relateret til Clerk.
Klik på produktet og lav en ordre med dette produkt.
På Order Success siden tjekker du Network igen og finder kaldet til sale?.
Sørg for at visitor i payload matcher Visitor ID’et du så i trin 3.

Hvis visitor ID’erne ikke matcher, skal du finde ud af, hvorfor de ændrer sig.

En almindelig årsag kan være, at du genererer ID’erne på ny for hver sideindlæsning.

Opdater koden til at bruge samme visitor ID for alle sider.

Skjul sliders med få produkter #

Hvis en kategori har meget få produkter, kan en slider se tom eller gentagende ud.

Der er to måder at håndtere dette på:

Clerk Design-betinget #

Brug en betingelse omkring slider-markupet, så det kun renderes når der returneres nok produkter.

{% if products.length >= 6 %}
  <div class="clerk-slider">
    {% for product in products %}
      <!-- product card -->
    {% endfor %}
  </div>
{% endif %}

Dette er hurtigt at implementere, men det er stadig Clerk-responsen der afgør om slideren vises. Det betyder, at det stadig koster et API-kald, selvom slideren ikke er synlig.

Server-side betingelse #

Hvis din platform allerede kender antal produkter i en kategori, så afgør i din template om Clerk-embed koden overhovedet skal outputtes.

{% if category.product_count >= 6 %}
  <span class="clerk" data-template="@category-page-slider"></span>
{% endif %}

Dette er den foretrukne metode, da slideren kun initialiseres når der er nok produkter, og adfærden følger din webshops egen logik for produktantal.

Opgradering til Clerk.js 2 #

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

Det gør installation af Clerk nemmere på enhver webshop.

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

De to væsentligste forskelle i Clerk.js 2 er:

Designene i my.clerk.io bruger Liquid, men kan også let laves i Design Editor.
Scriptet skal indsættes lige før </head>-tagget i dit webshops template.

Opret designs #

Da Clerk.js 2 bruger en anden tilgang til designs, skal du oprette nye designs.

Du kan oprette dine Clerk.js 2 designs enten ved at lave dem forfra i Design Editor, eller konvertere dine gamle code Designs til Liquid, som nedenstående guide forklarer.

Herunder er der en beskrivelse af, hvordan du konverterer dine gamle code Designs til Liquid.

Design Editor valgmulighed #

Gå til my.clerk.io > Recommendations/Search > Designs > New Design.
Vælg et designtype, der ikke er Blank, og giv det et navn. Vi anbefaler at tilføje “V2”, så det er tydeligt, at du bruger Clerk.js 2 designs.
I Design Editor kan du klikke på eksisterende elementer som navn, billede, knap mv. for at redigere dem, eller tilføje nye elementer til designet.
Klik på Publish Design når du er færdig, og gå til Trin 2 i guiden.
Gå til Recommendations/Search > Elements og ændr dit Clerk Element til at bruge dit nye design, klik derefter på Update Element.
De vil midlertidigt ikke vises på din webshop, før du har indsat Clerk.js 2 som beskrevet længere nede i denne guide.

Konvertering af designs #

Da Clerk.js 2 anvender det mere fleksible template language Liquid, skal designs konverteres til dette sprog.

Gå til my.clerk.io > Recommendations/Search > Designs > New Design.
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.
Klik på Create Design.
Dette giver dig et tomt design med Product HTML og CSS, som du kan bruge.
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 let kan kopiere koden.
Kopier det gamle Clerk.js 1 Design over til dit nye Clerk.js 2 Design.
- Du vil lægge mærke til, at der ikke er nogen Container Code i din nye.
- Dette skyldes, at Liquid bruger for loops til at gengive alle produkterne.
- Kopiér din gamle Product HTML inde i for-loopet, din gamle Container Code omkring det, og kopier også CSS’en.
Konverter designet til Liquids syntaks. Den primære forskel er, at de gamle designs brugte syntaksen {{ formatter attribute }} mens v2’s syntaks er {{ product.attribute | formatter }}.
Gennemgå alle dine attributter og ændr dem til det nye format.
Hvis du bruger {{#if}} eller {{#is}} statements, skal disse også konverteres. Brug syntaksen {% if product.attribute %} {% else %} {% endif %}.
Slet id="{{ $id }}" og klassen :target fra containerkoden i Clerk.js 2 versionen, da de ikke længere understøttes.
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>

Klik på Update Design for at gemme ændringerne.
Gå til Recommendations/Search > Elements og ændr din Element-blok til at bruge dit nye Design.
Klik på Update Element. Dette vil midlertidigt gøre, at de ikke vises på din webshop, indtil du er færdig med Step 2. Vælg det nye Design for alle Elementer, der skal opdateres.

Udskift script #

Find den skabelonfil, der bruges til at vise alle sider på webshoppen, og hvor det originale Clerk.js-script er placeret nær bunden.
Fjern det gamle Clerk.js-script fra filen. Det vil se nogenlunde sådan her 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 -->

Gå til my.clerk.io > Developers > Tracking Code. Her finder du Clerk.js 2-koden.
Kopiér denne kode, indsæt den lige før </head>-tagget i skabelonen, og gem så.

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, når du bruger Clerk.js 1.

I nogle opsætninger forhindrer Require.js Clerk.js i at loade, hvilket betyder, at ingen sliders eller søgeresultater bliver vist.

Når dette sker, vil følgende fejl vises 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, som du har indsat i bunden af alle sider.

Inkluder i Require.js #

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

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

Ignorér Require.js #

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

Dette kan du gøre ved at indsætte window.__clerk_ignore_requirejs = true; øverst i tracking-scriptet:

Efter at have 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.