Clerk.js

Oversigt #

Clerk.js er et JavaScript-bibliotek, der forenkler integrationen af vores API med frontend’en. 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 loades asynkront. Det betyder, at resten af siden ikke er afhængig af et API-svar før indlæsning.
• Det er ofte hurtigere, da din server kan begynde at gengive siden parallelt med at Clerk.js foretager opkald og viser resultater.
• Besøgs- og kliktracking håndteres automatisk for enhver resultatudvisning fra Clerk. Dette kræver ingen cookies, da vi genererer en hashed værdi af besøgendes IP og useragent, kombineret med en unik shop salt, der roterer hver 30. dag.

Clerk.js loades 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 loader biblioteket fra vores CDN og lader dig tilgå dets funktionalitet gennem Clerk-objektet samt konfigurerer Clerk.js med API-nøglen, så det allerede ved, hvilken Butik det foretager API-kald for.

Snippets #

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

Den bruger herefter attributterne fra snippen til at bygge et API-kald, mens den får API-nøglen fra konfigurationen 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 i snippen.

Clerk.js bruger Liquid designs til at gengive HTML med de data, API’et returnerer. Disse er formateret som scripts, refereret 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å forsimples til blot at inkludere en reference til en Element-blok, ved at bruge syntaksen data-template="@element-block-id":

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

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

Dine snippets behøver kun at indeholde klassen clerk, eventuelle sidespecifikke informationer som produkt-ID’er, samt en reference til Element-blokkens ID i data-template.

Injection #

Injection er en feature, der gør det muligt at indsætte indholdsnippets på dit website uden at tilføje dem manuelt. I stedet vælger du blot en CSS Selector, hvori snippen skal indsættes, og Clerk.js tilføjer den automatisk ved sideindlæsning.

Læs mere om Injection her.

Konfiguration #

Clerk.js tillader forskellige konfigurationer, der påvirker hvordan det fungerer.

Visitor IDs #

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

Hvis kunderne accepterer cookies, kan Clerk.js konfigureres til at placere en vedvarende cookie med besøgs-ID’et, hvilket tillader tracking over længere tid.

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

// Persistent visitor ID
Clerk('config', {
  visitor: 'persistent'
});

// Custom visitor ID
Clerk('config', {
  visitor: 'ABC123'
});

// Disabling visitor tracking
Clerk('config', {
  visitor: null
});

Sidekontekst #

Konfigurerer Clerk.js med den specifikke kontekst for den side, en besøgende ser lige nu. Dette bruges til at berige trackingdata for personaliseringsfunktioner som Email Triggers, Audience segmentering og Chat kontekst.

Clerk('context', {
  product: null,  // Angiv produkt-ID på produktsider, fx 12345 eller null
  category: null, // Angiv kategori-ID på kategorisider, fx 67 eller null
  page: null      // Angiv side-ID eller type på andre sider, fx 'homepage' eller null
});

Sprog #

Konfigurerer Clerk.js med websitets skriftsprog. Dette bruges, så Clerk.io korrekt håndterer grammatiske regler i Search, samt for at hente korrekte oversættelser, når du bruger multisprog-feeds.

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

Accepterede værdier findes under Supported languages.

Udskift pladsholder-værdierne med din platforms logik for dynamisk at hente ID’erne. Hver værdi bør sættes ud fra typen af side, den besøgende er på:

• product: ID på det produkt, der vises på produktsider. Sættes til null på ikke-produkt-sider.
• category: ID på den kategori, der vises på kategorisider. Sættes til null på ikke-kategori-sider.
• page: En side-identifikator eller type-string på andre sider som forsiden, kurv eller checkout. Sættes til null hvis ikke anvendeligt.

Hvis din platform ikke har et specifikt ID tilgængeligt for en sidetype, sæt værdien som null. Sæt kun værdier for de sidetyper, der er relevante.

Designfunktioner #

Clerk.js understøtter tilføjelse af Formatters og Globals, som kan bruges til at lave brugerdefineret JavaScript-funktionalitet til dine designs.

Formatters #

Disse bruges til at påvirke eller ændre attributter. Du ønsker f.eks. kun at vise de første 40 tegn af en beskrivelse, eller du har brug for at udregne en specifik rabatprocent baseret på kundetypen.

Globals #

Disse skal bruges med frontend-data, der ønskes tilgængelige i designs. Eksempler kan være det resterende beløb for at opnå fri fragt, navnet på en indlogget kunde, et valutasymbol eller en valutakurs.

Nedenfor er 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-sporing #

Clerk.js kan automatisk indsamle emails i kundens session for at personalisere email-rekommendationer, selvom de endnu ikke har gennemført et køb.

Aktiver collect_email i din Clerk.js config:

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

Når dette er aktiveret, overvåger Clerk.js email-indtastningsfelter og sender automatisk log/email, når en besøgende indtaster en emailadresse.

Hvis du ønsker at logge en email manuelt, kan du også tilføje en snippet som denne:

<span class="clerk" data-api="log/email" data-email="EMAIL@EXAMPLE.COM"></span>

Sådan foregår associationen #

Når en email logges, sender Clerk både besøgs-ID’et og emailadressen til API’et, så de kan forbindes.

Dette gør det muligt for Clerk at identificere, hvad den besøgende har foretaget sig i denne sessionshistorik (f.eks. sete produkter, klik og søgninger) og forbinde denne adfærd med emailadressen.

Når denne association eksisterer, kan de samme adfærdsdata bruges til emailbrug (som triggers og personaliserede emails) og til onsite personalisering af recommendations for indloggede kunder.

Brugerdefineret Rendering #

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

Clerk.js renderer alle elementer med klassen clerk, men andre klasser kan bruges til at tilpasse rendering som custom selectors.

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

Hvis du tilføjer auto_init_custom_selectors: true til konfigurationen, vil Clerk.js automatisk initialisere alle custom selector elementer, efterhånden som DOM ændrer sig, så længe de allerede er blevet vist med Clerk("content", "SELECTOR") mindst én gang.

Denne adfærd fortsætter, indtil en fuld sideopdatering sker.

Fejlfinding #

Clerk.js har en indbygget debug-mode, som logger diagnostisk information til browserens console. Den gemmer konfigurationen i sessionStorage under nøglen __clerk_debug, så debug-mode forbliver aktiv på tværs af sidenavigationer i samme browsersession.

Som standard er debug enabled med level sat til warn og collect sat til true.

Aktiveringsmetoder #

Der er tre måder at aktivere debug-mode på.

Console genvej

Den nemmeste måde er at kalde Clerk('debug') fra browserens konsol. Den accepterer flere argument-formater:

Clerk('debug');              // Enable med standard
Clerk('debug', true);        // Enable
Clerk('debug', false);       // Disable
Clerk('debug', 'on');        // Enable
Clerk('debug', 'off');       // Disable
Clerk('debug', 'warn');      // Sæt logniveau direkte
Clerk('debug', {             // Giv en fuld config-objekt
  enable: true,
  level: 'log',
  group: true
});

Config-sti

Debug-mode kan også konfigureres via det almindelige config-kald:

Clerk('config', 'debug', {
  enable: true,
  level: 'log',
  collect: true,
  group: true,
  collapsed: false
});

URL hash

Debug-mode kan aktiveres ved at tilføje en hash-fragment til URL’en. Dette er nyttigt for at dele debug-links med kollegaer:

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

Når det aktiveres via URL hash, gemmes konfigurationen også i sessionStorage under nøglen __clerk_tmp_config.

Config Options #

Session Storage #

Når debug-mode er aktiveret, gemmes konfigurationen til sessionStorage under nøglen __clerk_debug. Dette sikrer, at debug-indstillingerne forbliver, mens brugeren navigerer rundt, uden at det påvirker andre browser-faner eller varer længere end sessionen.

Consent Management Platforms (CMPs) som Cookiebot kan markere __clerk_debug som en storage-værdi, der kræver dokumentation. Det er en funktionel nøgle, der kun bruges til udviklings-debugging. Den indeholder ikke persondata eller trackinginformation.

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

UI Kit #

Clerk.js inkluderer et sæt UI-værktøjer til vigtige elementer, der kan bruges til at forbedre brugeroplevelsen. Disse sparer ofte udviklingstid til custom setups.

Instant Search #

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

Alt Clerk.io-indhold kan i teorien laves til en Instant Search-komponent, men det fungerer bedst som en 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 vigtig del af en god e-commerce-søgeoplevelse er at få gode søgeresultater. Vores Search Page gør denne brugeroplevelse hurtig og let at bygge.

Search Page lader dig oprette en hel side, der viser de bedst mulige matches til enhver given forespørgsel.

<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 veldesignet kategoriside er nøglen til en succesfuld eCommerce forretning. Vores Category Page gør denne brugeroplevelse hurtig og let at lave. Dette lader dig oprette en hel side, der viser de bedst mulige 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.

Facetter #

Clerk.js kommer med indbygget understøttelse for dynamisk facetteret navigation til både søgning og kategorier. Alle produktattributter, du sender til os, kan bruges som facetter.

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="Vis flere"
  data-facets-searchbox-text="Søg efter "
  data-facets-design="133995">
</span>

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

Exit Intent #

Exit intent-popuppen reagerer, når en besøgende forsøger at forlade dit site, ved at føre musen op til toppen af browser-vinduet. Popuppen vises og præsenterer interessante produkter, hvilket kan konvertere en fragående besøgende til en kunde.

Ethvert Element-blok kan trigges ved exit intent ved at tilføje attributten data-exit-intent="true" til snippetten.

<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 Kittet indeholder et simpelt popup-bibliotek til let at lave simple, brugervenlige popups med ethvert indhold. Ethvert HTML-element på dit site 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.

Chat #

Clerk.js eksponerer et JavaScript-interface til styring af Chat widgetten og til at reagere på samtale-events. Dette er nyttigt, når du ønsker at trigge chat fra din egen UI, give AI kontekstuelle data om, hvad den besøgende laver, eller koble dig på begivenheder fra resten af frontend’en.

Den fulde metode- og eventreference findes i Chat JS docs.

Åbn Chat fra en custom knap #

Hvis du ønsker at trigge Chat fra din egen knap eller UI-element fremfor den standard launcher, brug toggle:

<button onclick="Clerk('chat', 'toggle')">
  Brug for hjælp?
</button>

Du kan også bruge open og close uafhængigt for at styre tilstanden direkte.

Vis Chat kun på specifikke sider #

Som standard er Chat synlig på hele sitet. For kun at vise den på bestemte sider, deaktivér den i din globale config og aktivér den selektivt:

// I din globale Clerk.js config — skjul Chat overalt
Clerk('config', { key: 'your-public-api-key' });
Clerk('chat', 'disable');

// Så på de sider, hvor du vil have den synlig
Clerk('chat', 'enable');

Giv cart og sidekontekst til AI’et #

Metoden metadata sender struktureret kontekst til Chat, så AI’et kan give mere relevante svar. Kald den, når den besøgendes kontekst ændrer sig — sidenavigation, tilføjelse til kurv, opdatering af præferencer.

// På en produktside
Clerk('chat', 'metadata', {
  current_page: {
    page_type: 'product',
    page_id: '12345'
  }
});

// Når en besøgende lægger et produkt i kurven
Clerk('chat', 'metadata', {
  cart: {
    items: [
      { id: 101, name: 'Lightsaber', price: 99.95 },
      { id: 204, name: 'Force Gloves', price: 29.95 }
    ],
    total: 129.90
  }
});

Payload-strukturen er fleksibel — inkluder det kontekstuelle, der er mest relevant for samtalerne på siden.

Justér AI-adfærd baseret på, hvad den besøgende gør #

Metoden prompt_message sender en systeminstruktion til AI’et. Kunden ser den aldrig, men det ændrer hvordan AI’et svarer i den aktuelle samtale.

// Efter tilføjelse til kurv — nudg AI mod cross-sell
Clerk('chat', 'prompt_message', 'Brugeren har lige tilføjet en Lightsaber til kurven. Foreslå komplementære produkter som tilbehør eller beskyttelsesudstyr.');

// På checkout-siden — fokuser på at gennemføre købet
Clerk('chat', 'prompt_message', 'Brugeren er på checkout siden. Hjælp dem med at gennemføre ordren og besvar eventuelle sidste spørgsmål.');

Overgiv til en menneskelig agent #

Når en besøgende har brug for menneskelig support, udløser onSupport-eventet et resumé af samtalen. Brug dette til at åbne din helpdesk-chat og send konteksten, så agenten straks er opdateret — ingen grund til, at brugeren gentager sig selv.

Clerk('config', {
  key: 'your-public-api-key',
  chat: {
    onSupport: (e) => {
      // e.summary indeholder en klartekst-resumé af samtalen hidtil
      const summary = e.summary || 'Ingen samtaleresumé tilgængelig.';

      // Eksempel: åbn Intercom og forudfyld kontekst
      if (window.Intercom) {
        Intercom('showNewMessage', 'Fortsætter fra AI Chat:\n\n' + summary);
      }

      // Eksempel: åbn Zendesk med forudfyldt kontekst
      if (window.zE) {
        zE('messenger', 'open');
        zE('messenger:set', 'conversationFields', [
          { id: 'clerk_chat_summary', value: summary }
        ]);
      }

      // Vælg evt. at skjule Clerk Chat når overdragelsen er fuldført
      Clerk('chat', 'disable');
    }
  }
});

onSupport-eventet udløses kun, når Contact Support er konfigureret i Chat indstillinger, og den besøgende eksplicit beder om en medarbejder.

Reagér på Chat events #

Brug event hooks til at integrere Chat-adfærd med resten af dit frontend — for eksempel til at logge beskeder, synkronisere tilstande eller overdrage til en menneskelig agent.

Clerk('config', {
  key: 'your-public-api-key',
  chat: {
    onMessage: (e) => {
      // Fyres for hver besked — role er 'user', 'ai' eller 'results'
      console.log(e.message.role, e.message.text);
    },
    onOpen: (e) => {
      // Fyres når Chat-vinduet åbner/lukker
      analytics.track('Chat toggled', { open: e.open });
    },
    onSupport: (e) => {
      // Fyres når den besøgende beder om en menneskelig agent
      // e indeholder et samtaleresumé
      openLiveChatWithSummary(e);
    }
  }
});

Du kan også tilføje event hooks dynamisk efter den indledende konfiguration:

Clerk('chat', 'on', 'message', function(e) {
  console.log('Ny besked:', e.message.text);
});

Læs mere i Chat JS docs.

Ekskluder produkter #

Clerk.js har to forskellige måder at ekskludere produkter på, alt efter om du vil udelukke specifikke ID’er eller undgå dubletter på tværs af forskelige sliders.

Ekskluder specifikke ID’er #

Tilføj blot attributten data-exclude til snippet’en. Indholdet i data-exclude skal være en liste med produkt-ID’er, du ikke ønsker vist – f.eks. produkterne i kundens kurv eller 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å Clerk-blokken, hvor du vil fjerne dubletten fra. Værdien skal være en CSS selector til den eller de andre snippets, dubletter skal undgås fra.

I eksemplet herunder ekskluderer .clerk-2 alle produkter, der er i .clerk-1, og .clerk-3 ekskluderer produkter, der er i 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 tilpassede opsætninger, har du ofte brug for at reagere på eller ændre resultaterne fra Clerk, før de vises. Her er Events nyttige.

Events gør det muligt at opsætte event listeners, der kører kode på specifikke tidspunkter før, under eller efter, at Clerk.js genererer sine resultater.

Et almindeligt eksempel er at loade brugerdefinerede priser for en indlogget kunde i en B2B-opsætning. En event kan straks efter Clerk API’et er færdig med renderingen, hente specialpriser og tilføje dem til produkter:

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 Performance #

Clerk.js driver personaliserede shoppingoplevelser uden at gøre dit website langsomt eller skade SEO. Ved at bruge client-side rendering og optimeret indlæsning balanceres hastighed, performance og søgeresultater.

SEO og hastighed #

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

Clerk.js integration — fordele #

• Clerk.js-scriptet (≈ 37 - 38 KB) loades asynkront, så dit site kan gengive, mens Clerk initialiseres.
• Clerk-elementer er client-rendered, så dit basis-HTML forbliver cachebart, og dynamiske komponenter injiceres kun efter load.
• Dette muliggør effektiv server-caching og blokkerer ikke loading af Clerk.js-assets.

Performance indflydelse #

• Clerk.js’ lette og asynkrone karakter resulterer typisk i minimal indflydelse på indlæsningstiden.
• Faktisk performancepåvirkning kommer ofte fra ekstra produktbilleder i recommendations, ikke fra selve scriptet. For at minimere påvirkning:
  • Brug korrekt størrelse og høj-effektive formater som WebP.
  • Tilpas billedstørrelse til displaydimensioner (fx 400×400 px → 420×420 px max).
• For at undgå layoutskift (CLS), reserver plads til indsprøjtet Clerk-indhold.

Fx:

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

SEO overvejelser #

Forståelsen af, hvordan Clerk.js fungerer sammen med søgemaskiner, hjælper med at sikre, at implementeringen understøtter både brugeroplevelse og søgesynlighed.

Intern linking og crawlbarhed #

• Clerk.js indsprøjter anbefalingslinks dynamisk client-side.
• Disse links kan forbedre intern linking ved at forbinde relaterede sider, hvis søgemaskinerne gengiver og følger dem korrekt.
• Da de injiceres via JavaScript, bør du verificere, hvordan søgemaskiners crawlere fortolker og gengiver dem.
• Rigtigt crawlede links kan forbedre crawlbarhed og give søgemaskinerne mulighed for at opdage og indeksere flere sider.

PageRank-fordeling #

• Når søgemaskiner kan crawle dem, kan Clerk.js-links være med til at fordele linkværdien (PageRank) på vigtige sider.
• Det understøtter bedre synlighed og placering af kategori- og produktsider.

Observerede fordele #

• Korrekt Clerk.js-integration kan korrelere med et stærkere intern link-setup, som kan bidrage til forbedret synlighed i søgeresultater.
• Clerk.io dashboards giver analytik om ordrepåvirkning, konverteringsløft og indtjening 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 forhindre layout-skift.
3. Overvåg virkelige bruger-metrics fremfor at stole udelukkende på automatiserede scores. Brug Clerks dashboards til at evaluere effekt på tværs af kanaler.