Clerk.js

Oversigt #

Clerk.js er et JavaScript-bibliotek, der forenkler integrationen af vores API med frontend. Med kun 37,7kb er det en super letvægtsløsning.

Der er tre fordele ved at bruge Clerk.js:

• Det er robust, da det indlæses asynkront. Det betyder, at resten af siden ikke er afhængig af et API-svar, før den indlæses.
• Det er ofte hurtigere, da din server kan begynde at renderere siden parallelt med, at Clerk.js foretager kald og viser resultater.
• Besøgs- og kliksporing håndteres automatisk for alle resultater vist af Clerk. Dette kræver ingen cookies, da vi genererer en hashed værdi baseret på besøgendes IP og useragent sammen med et unikt butikssalt, der roterer hver 30. dag.

Clerk.js indlæses med et initialiseringsscript tilføjet i headeren på websitet:

<!-- 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_api_key'
  });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Det indlæser biblioteket fra vores CDN og gør det muligt at tilgå dets funktionaliteter via Clerk-objektet samt konfigurerer Clerk.js med din API-nøgle, så det allerede ved, hvilken Store det laver API-kald for.

Snippets #

Når siden indlæses, scanner Clerk.js efter snippets med klassen “clerk”.

Herefter bruges attributterne fra snippeten til at opbygge et API-kald, idet API-nøglen hentes fra configen i initialiseringsscriptet.

<span
  class="clerk"
  data-api="recommendations/popular"
  data-limit="10"
  data-template="@clerk-product-template">
</span>

Det visuelle håndteres af Designet, som også refereres fra snippeten.

Clerk.js anvender Liquid designs til at rendere HTML med data returneret fra API’et. Disse formateres som scripts og refereres ved deres ID i data-template i din snippet.

<span class="clerk"
     data-api="search/search"
     data-query="jedi"
     data-limit="20"
     data-template="#clerk-template">
</span>

<script type="text/x-template" id="clerk-template">
  <h1>Søgeresultat for {{ query }}.</h1>
  {% for product in products %}
    <div class="product">
      <h2>{{ product.name }}</h2>
      <img src="{{ product.image }}" />
      <a href="{{ product.url }}">Køb Nu</a>
    </div>
  {% endfor %}

  <a href="javascript:Clerk('content', '#{{ content.id }}', 'more', 20);">Indlæs flere resultater</a>
</script>

Snippets kan også forenkles til blot at indeholde en reference til en Content blok ved at bruge syntaksen data-template="@content-block-id":

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

Designs håndteres herefter med Design Editor eller med Liquid HTML-kode på en brugervenlig måde fra my.clerk.io.

Dine snippets skal kun indeholde klassen clerk, eventuel sidespecifik information som produkt-ID’er og en reference til ID’et på en Content-blok i data-template.

Injection #

Injection er en funktion, der gør det muligt at indsætte indholdssnippets på dit website uden at skulle tilføje dem manuelt. I stedet vælger du blot en CSS Selector, hvor snippeten skal indsættes, og Clerk.js tilføjer det automatisk ved sidelæsning.

Læs mere om Injection her.

Konfiguration #

Clerk.js giver mulighed for en række konfigurationer, som ændrer dets funktion.

Besøgs-ID’er #

Som standard genererer Clerk.js anonyme besøgs-ID’er, som bruges til at spore sessioner.

Hvis kunder accepterer cookies, kan Clerk.js konfigureres til at placere en vedvarende cookie med besøgs-ID’et, så sporing kan ske over en længere periode.

Hvis du ønsker at styre session-ID’er manuelt, kan du konfigurere parameteren visitor, som Clerk bruger i API-kald. Alternativt kan du slå sessionssporing fra helt ved at sætte visitor til null.

// Vedvarende besøgs-ID
Clerk('config', {
  visitor: 'persistent'
});

// Eget besøgs-ID
Clerk('config', {
  visitor: 'ABC123'
});

// Deaktivere besøgs-sporing
Clerk('config', {
  visitor: null
});

Sprog #

Konfigurerer Clerk.js med websitetets skriftsprog. Det bruges til, at Clerk.io kan håndtere grammatik korrekt i Search, samt hente de rigtige oversættelser når du bruger multi-language feeds.

Clerk('config', {
  language: 'italian'
});

Accepterede værdier findes under Supported languages.

Design-funktioner #

Clerk.js understøtter tilføjelse af Formatters og Globals, som kan bruges til at skabe specialtilpassede javascriptfunktioner til dine designs.

Formatters #

Disse bruges til at påvirke eller ændre attributter. For eksempel kan du vælge kun at vise de første 40 tegn af en beskrivelse, eller beregne en specifik rabatsats baseret på den type kunde, der er logget ind.

Globals #

Disse bruges til frontend-data, du ønsker adgang til i designs. Eksempler kan være det resterende beløb for fri fragt, navnet på en logget ind kunde, et valutategn eller en valutakurs.

Herunder et eksempel på konfiguration af formatters og globals.

Config #

Clerk('config', {
  formatters: {
    uppercase: function(string) {
        return string.toUpperCase();
    }
  },
  globals: {
    currency_symbol: '$'
  }
});

Design #

<div class="name">{{ product.name | uppercase }}</div>
<div class="price">{{ currency_symbol }}{{ product.price }}</div>

Output #

<div class="name">GREEN LIGHT SABER</div>
<div class="price">$1999.99</div>

Email Tracking #

Clerk.js kan automatisk indsamle emails i kundens session til at personalisere email-anbefalinger, selvom de endnu ikke har placeret en ordre.

Dette gøres ved at konfigurere Clerk.js med collect_email: true som vist her:

<script type="text/javascript">
  Clerk('config', {
    key: 'insert_api_key',
    collect_email: true
  });
</script>

Hermed overvåger Clerk.js alle inputfelter på websitet og logger det ved log/email når en besøgende indtaster en emailadresse i et af dem:

https://api.clerk.io/v2/log/email?payload={"email":"test@test.com","key":"insert_api_key","visitor":"auto"}

Custom Rendering #

Dette bruges primært med Single Page Apps (SPA), Progressive Web Apps (PWA) og andre applikationer, som ikke bruger traditionelle sidelæsninger.

Clerk.js renderer ethvert element med klassen clerk, men andre klasser kan bruges til at tilpasse rendering gennem custom selectors.

Som standard kræver Clerk, at du kører Clerk("content", "SELECTOR") for at rendere indhold hver gang det skal vises.

Ved at tilføje auto_init_custom_selectors: true til config, får Clerk.js automatisk til at initialisere alle custom selector-elementer, efterhånden som DOM’en muterer, så længe de allerede er blevet renderet én gang med Clerk("content", "SELECTOR").

Denne opførsel fortsætter, indtil der sker en fuld sideopdatering.

Debugging #

Clerk.js har en indbygget debug-tilstand, der logger diagnostisk information til konsollen.

Aktiver det fra konsollen:

Clerk("debug");

Eller aktiver det via URL-parametre:

https://yourwebsite.com/#clerkjs:debug.level=all&debug.enable=true

For detaljer om strukturen af API-debugsvar, se Response debugging.

Debuggen har 4 parametre:

UI Kit #

Clerk.js inkluderer et sæt UI-værktøjer til vigtige elementer, som kan bruges til at forbedre brugeroplevelsen. Disse sparer ofte udviklingstid ved tilpassede opsætninger.

Instant Search #

En central del af en god e-commerce søgeoplevelse er at få resultater med det samme, man begynder at skrive. Vores Instant Search UI-komponent gør denne oplevelse hurtig og nem at bygge.

Alt Clerk.io-indhold kan teoretisk bruges som en Instant Search-komponent, men det fungerer bedst som et dropdown, der viser søgeresultater.

<span 
  class="clerk"
  
  data-api="search/predictive"
  data-limit="6"
  data-labels='["Instant Search"]'
      
  data-instant-search="INSERT_CSS_SELECTORS_HERE">
  
  <dl class="product-search-result-list">
    <dt>Produkter matcher <i>{{ query }}</i></dt>
    
    {% for product in products %}
      <dd class="product clerk-instant-search-key-selectable">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Køb Nu</a>
      </dd>
    {% endfor %}
  </dl>
</span>

Læs mere om Instant Search UI-værktøjet her.

Search Page #

En nøgledel af en god e-commerce søgeoplevelse er at få gode søgeresultater. Vores Search Page gør denne oplevelse hurtig og nem at bygge.

Med Search Page kan du bygge en hel side, der viser de bedste resultater for en given søgning.

<span 
  class="clerk"
  
  data-api="search/search"
  data-limit="40"
  data-labels='["Search Page"]'
  data-query="INSERT_QUERY_HERE"
  data-orderby="INSERT_SORTING_ATTRIBUTE"
  data-order="asc_OR_desc">>
  
  <div class="product-search-result-list">
    <div>Produkter matcher <i>{{ query }}</i></div>
    
    {% for product in products %}
      <div class="product">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Køb Nu</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">
          		Vis flere resultater
    		</div>
    {% endif %}
  </div>
</span>

Læs mere om Search Page UI-værktøjet her.

Category Page #

En velstruktureret kategoriside er nøglen til succes for enhver e-handelsvirksomhed. Vores Category Page gør denne oplevelse hurtig og nem at bygge. Dette gør det muligt at oprette en komplet side med de bedste resultater for enhver kategori.

<span 
  class="clerk"
  
  data-api="recommendations/category/popular"
  data-limit="40"
  data-labels='["Category Page Grid"]'
  data-category="INSERT_CATEGORY_ID"
  data-orderby="INSERT_SORTING_ATTRIBUTE"
  data-order="asc_OR_desc">
  
  <div class="product-category-result-list">
    {% for product in products %}
      <div class="product">
        <h2 class="product-name">{{ product.name }}</h2> 
        <img src="{{ product.image }}" title="{{ product.name }}" />
        <div class="price">${{ product.price | money }}</div>
        <a href="{{ product.url }}">Køb Nu</a>
      </div>
    {% endfor %}
    {% if count > products.length %}
        <div class="clerk-load-more-button" 
             onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">
          		Vis flere resultater
    		</div>
    {% endif %}
  </div>
</span>

Læs mere om Category Page UI-værktøjet her.

Facets #

Clerk.js har indbygget understøttelse af dynamisk, facetteret navigation til både søgning og kategorier. Alle produktattributter, du sender til os, kan anvendes som facets.

Her er et eksempel på grundlæggende brug:

<div id="clerk-search-filters"></div>

<span 
  class="clerk" 
      
  data-template="@search-page" 
  data-query="shoes"
  
  data-facets-target="#clerk-search-filters" 
  data-facets-attributes='["price","categories","brand"]'
  data-facets-titles='{"price": "PRICE-TRANSLATION", "categories": "CATEGORIES-TRANSLATION", "brand": "BRAND-TRANSLATION"}'
  data-facets-price-prepend="€"
  data-facets-in-url="true"
  data-facets-view-more-text="View More"
  data-facets-searchbox-text="Search for "
  data-facets-design="133995">
</span>

Læs mere om Facets UI-værktøjet her.

Exit Intent #

Exit intent-popup’en reagerer, når en besøgende forsøger at forlade dit site ved at føre musen op mod toppen af browservinduet. Den popper op og viser interessante produkter, og kan måske konvertere en forladende besøgende til en køber.

Enhver Content-blok kan trigges på en besøgendes exit-intent ved at tilføje attributten data-exit-intent="true" til snippeten.

<span
  class="clerk"
  
  data-api="recommendations/visitor/complementary"
  data-limit="20"
  data-labels='["Exit Intent / Popup"]'
  
  data-exit-intent="true">
</span>

Læs mere om Exit Intent UI-værktøjet her.

Popup #

UI Kit’et indeholder et simpelt popup-bibliotek, så du nemt kan lave brugervenlige popups med ethvert indhold. Alle HTML-elementer på dit website med klassen clerk-popup vises som en popup.

<div id="my-popup" class="clerk-popup">Hej, verden!</div>

<script type="text/javascript">
  var my_popup = Clerk('ui', 'popup', '#my-popup');
  
  // vis popup
  my_popup.show(); 
  /* eller */ 
  Clerk('ui', 'popup', '#my-popup', 'show');
  
  // skjul popup
  my_popup.hide(); 
  /* eller */ 
  Clerk('ui', 'popup', '#my-popup', 'hide');
</script>

Læs mere om Popup UI-værktøjet her.

Ekskludering af produkter #

Clerk.js har to forskellige måder at ekskludere produkter på, alt efter om du ønsker at ekskludere specifikke ID’er eller undgå at vise duplikerede produkter mellem forskellige sliders.

Ekskludere specifikke ID’er #

Tilføj blot attributten data-exclude til snippeten. Indholdet af data-exclude skal være en liste over de produkt-ID’er, du ikke ønsker at vise, f.eks. produkterne i kundens kurv eller en liste over produkter, de ikke må se.

<span class="clerk"
  data-template="@clerk-complementary"
  data-exclude="[45654, 3244, 12352]">
</span>

Undgå dubletter #

Dette gøres ved at tilføje attributten data-exclude-from på det Clerk-blok, hvor du ønsker at fjerne dubletter fra. Værdien af attributten skal være en CSS-selector for den eller de andre snippets, du vil undgå dubletter fra.

I eksemplet herunder, ekskluderer .clerk-2 ethvert produkt fra .clerk-1, og .clerk-3 ekskluderer produkter fra både .clerk-1 og .clerk-2.

<span class="clerk clerk-1"
  data-template="@clerk-banner-1">
</span>
 
<span class="clerk clerk-2"
  data-exclude-from=".clerk-1"
  data-template="@clerk-banner-2">
</span>
 
<span class="clerk clerk-3"
  data-exclude-from=".clerk-1,.clerk-2"
  data-template="@clerk-banner-3">
</span>

Events #

Når du bygger mere specialtilpassede opsætninger, har du ofte brug for at reagere på eller ændre resultater fra Clerk, før de bliver vist. Det er her, Events er nyttige.

Events gør det muligt at opsætte event listeners, som kører kode på bestemte tidspunkter før, under eller efter, at Clerk.js viser resultaterne.

Et almindeligt eksempel er at indlæse tilpassede priser for en logget ind kunde i en B2B-opsætning. Et event kan køre umiddelbart efter, at Clerk’s API har færdiggjort renderingen, hvilket gør det muligt at hente specialpriser fra din server og tilføje dem til produktelementerne:

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

Læs mere om Events her.

SEO og ydeevne #

Clerk.js driver personaliserede shoppingoplevelser uden at gøre dit site langsomt eller skade SEO. Ved at bruge client-side rendering og optimeret indlæsning opnås en balance mellem hastighed, performance og synlighed i søgning.

SEO og hastighed #

Det er en misforståelse, at JavaScript-funktioner som Clerk.js skader performance eller SEO. Automatiserede værktøjer overser ofte optimeringer som caching, parallel loading og server-side håndtering.

Fordele ved Clerk.js-integration #

• Clerk.js-scriptet (≈ 37 - 38 KB) indlæses asynkront, så dit website kan rendere, mens Clerk initialiseres.
• Clerk-elementer renderes klient-side, så din basale HTML forbliver cachebar, og dynamiske komponenter tilføjes først efter load.
• Dette muliggør effektiv server-side caching og ikke-blokerende indlæsning af Clerk.js-assets.

Effekt på ydeevne #

• Clerk.js er let og asynkront, hvilket typisk betyder minimal indvirkning på sidens indlæsningstid.
• Den reelle performancepåvirkning kommer ofte fra ekstra billeder, som vises i anbefalinger, ikke selve scriptet. For at minimere påvirkningen:
  • Brug billeder i passende størrelse og høj effektivitet, fx WebP.
  • Tilpas billedstørrelser til visningsdimensioner (fx 400×400 px → 420×420 px maks).
• For at undgå layout-shifts (CLS), reserver plads til indsat Clerk-indhold.

F.eks.:

.clerk-slider-wrapper {
  min-height: 300px; /* tilpas efter behov */
  width: 100%;
}

SEO-overvejelser #

Forstå, hvordan Clerk.js interagerer med søgemaskiner, hjælper dig til at sikre, at din implementation understøtter både brugeroplevelse og synlighed i søgning.

Intern linking og crawlbarhed #

• Clerk.js indsætter anbefalingslinks dynamisk på klientsiden.
• Disse links kan forbedre intern linking ved at forbinde relaterede sider, hvis søgemaskinerne renderer og følger dem korrekt.
• Da de indsættes via JavaScript, bør du verificere, hvordan søgemaskiner crawler og fortolker dem.
• Korrekt crawlede links kan forbedre crawlbarhed og gøre det muligt for søgemaskiner at opdage og indeksere flere sider.

PageRank-distribution #

• Hvis søgemaskiner kan crawle dem, kan Clerk.js-links hjælpe med at fordele link equity (PageRank) over vigtige sider.
• Dette understøtter bedre synlighed og rangering af produkt- og kategorisider.

Observerede fordele #

• Korrekt Clerk.js-integration kan føre til stærkere interne linkstrukturer, som understøtter bedre synlighed i søgeresultater.
• Clerk.io dashboards tilbyder analyser af ordreindflydelse, konverteringsløft og omsætningsbidrag fra Search, Recommendations, Email og Audience-funktioner.

Anbefalede best practices #

1. Optimer billeder (WebP-format, korrekt opløsning).
2. Reserver plads i layoutet til dynamiske elementer for at undgå layout-shifts.
3. Overvåg reelle målinger i stedet for kun at stole på automatiske scores. Brug Clerk’s dashboards til at evaluere effekt across kanaler.