Enhver (webshop)

Clerk.js

Integrér Clerk.io i enhver frontend med et letvægts JS-bibliotek.

Oversigt #

Clerk.js er et JavaScript-bibliotek, der forenkler integrationen af vores API med frontend. Med kun 37,7 kb 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 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 kliksporing håndteres automatisk for alle resultater vist af 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 roteres hver 30. dag.

Clerk.js indlæses med et initialiseringsscript, der tilføjes 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 giver dig adgang til funktionerne via Clerk-objektet og konfigurerer Clerk.js med API-nøglen, så det allerede ved, hvilken Store det skal lave API-kald for.

Snippets #

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

Derefter bruger den attributterne fra snippeten til at opbygge et API-kald, mens den henter API-nøglen fra konfigurationen i initialiseringsscriptet.

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

Udseendet styres af Designet, som også er refereret i snippeten.

Clerk.js bruger Liquid-designs til at gengive HTML med de data, som API’en returnerer. Disse er formateret som scripts og refereres med 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å gøres enklere ved 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 derefter med 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 side-specifikke oplysninger som produkt-ID’er samt en reference til ID’et på et Element-blok i data-template.

Injection #

Injection er en funktion, der giver dig mulighed for at indsætte indholdssnippets på dit website uden manuelt at tilføje dem. Du vælger blot en CSS-selector, hvor snippeten skal indsættes, og Clerk.js tilføjer den automatisk ved indlæsning af siden.

Læs mere om Injection her.

Konfiguration #

Clerk.js understøtter forskellige konfigurationer, der ændrer, hvordan det fungerer.

Visitor ID’er #

Som udgangspunkt 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 persistent cookie med besøgs-ID, hvilket muliggør sporing over en længere periode.

Hvis du foretrækker at administrere session-ID’er manuelt, kan du konfigurere visitor-parameteren, som Clerk bruger i API-kald. Alternativt kan du slukke for sessionssporing helt ved at sætte visitor til null.

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

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

// Afslår sporingsfunktion
Clerk('config', {
  visitor: null
});

Page Context #

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

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

Sprog #

Konfigurerer Clerk.js med websitets skriftsprog. Dette anvendes for at Clerk.io korrekt kan håndtere grammatikkens regler i Search og trække de rette oversættelser, når du bruger multi-sprogs feeds.

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

Accepterede værdier er listet under Supported languages.

Erstat pladsholderværdierne med din platforms logik for automatisk at hente ID’er. Hver værdi skal sættes ud fra den sidetype, den besøgende befinder sig på:

product: ID’et på det produkt, der vises på produktsider. Sættes til null på ikke-produktsider.
category: ID’et på kategorien på kategorisider. Sættes til null på andre sidetyper.
page: En sideidentifikator eller type-streng på andre sider som forside, kurv eller checkout. Sættes til null hvis ikke relevant.

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

Design-funktioner #

Clerk.js understøtter tilføjelse af Formatters og Globals, som kan bruges til at lave tilpasset javascript-funktionalitet i dine design-scopes.

Formatters #

Disse bruges til at påvirke eller ændre attributter. For eksempel, hvis du kun vil vise de første 40 tegn af en beskrivelse, eller hvis du skal beregne en specifik rabatprocent ud fra typen af indlogget kunde.

Globals #

Disse kan bruges med frontend-data, du vil tilgå i designs. Det kunne fx være det resterende beløb til fri fragt, navnet på en indlogget kunde, et valutasymbol eller en konverteringsrate.

Nedenfor er et eksempel på konfiguration af formatters og globals.

Konfiguration #

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 for at kunne personalisere email-anbefalinger, selvom de endnu ikke har afgivet en ordre.

Aktivér collect_email i din Clerk.js-konfiguration:

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

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

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

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

Indloggede kunder #

Hvis din webshop har kundekonti, kald log/email, hver gang en kendt kundes emailadresse er tilgængelig i sessionen – både når de aktivt logger ind, og når de vender tilbage til websitet allerede logget ind.

Den simpleste tilgang er at tjekke ved hver indlæsning af en side, om en email er tilgængelig, og hvis ja, foretage kaldet. For at undgå unødvendige API-kald gemmes et flag i browserens session, så kaldet kun sendes én gang pr. session:

<script type="text/javascript">
  if (!sessionStorage.getItem('clerk_email_logged')) {
    Clerk('call', 'log/email', {
      email: 'CUSTOMER_EMAIL'
    });
    sessionStorage.setItem('clerk_email_logged', '1');
  }
</script>

Erstat CUSTOMER_EMAIL med den faktiske emailadresse fra din platform. Render kun dette script, når en emailadresse faktisk er tilgængelig – udelad det helt for gæster.

Uden dette kan Clerk.io kun forbinde en besøgs session til en emailadresse, når købet er gennemført. Ved at logge den, så snart en email er tilgængelig, sker forbindelsen straks – hvilket kræves for at kunne trigge automatiske emails baseret på adfærd, vise personaliserede anbefalinger i emails og anvende Merchandising-kampagner målrettet mod specifikke Audience-segmenter.

Sådan sker tilknytningen #

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

Dette gør det muligt for Clerk at identificere, hvad den besøgende har gjort i deres session (f.eks. set produkter, klikket og søgt) og knytte denne adfærd til emailadressen.

Når tilknytningen er skabt, kan samme adfærdsdata bruges til emails (såsom trigger- og personaliserede emails) og til onsite-personalisering i anbefalinger til indloggede kunder.

Tilpasset rendering #

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

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

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

Ved at tilføje auto_init_custom_selectors: true til konfigurationen, initialiserer Clerk.js automatisk alle brugerdefinerede selector-elementer, mens DOM’en ændrer sig, så længe de allerede er blevet rendret med Clerk("content", "SELECTOR") én gang.

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

Fejlfinding #

Clerk.js har en indbygget debug-mode, som logger diagnostiske oplysninger til browserens konsol. Konfigurationen gemmes i sessionStorage under nøglen __clerk_debug og holder debug-mode aktiv på tværs af sideskift i samme browsersession.

Som standard er debug-mode aktiveret med level sat til warn og collect sat til true.

Aktiveringsmetoder #

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

Konsol-genvej

Den nemmeste måde er at kalde Clerk('debug') fra browserkonsollen. Den accepterer flere argumentformater:

Clerk('debug');              // Aktiver med standardindstillinger
Clerk('debug', true);        // Aktiver
Clerk('debug', false);       // Deaktiver
Clerk('debug', 'on');        // Aktiver
Clerk('debug', 'off');       // Deaktiver
Clerk('debug', 'warn');      // Sæt logniveau direkte
Clerk('debug', {             // Send et helt konfig-objekt
  enable: true,
  level: 'log',
  group: true
});

Config-vej

Debug-mode kan også konfigureres via det normale 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 et hashfragment til URL’en. Dette er nyttigt, hvis du skal dele debug-links med kolleger:

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

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

Konfigurationsmuligheder #

Option	Beskrivelse	Type	Standard
`enable`	Aktiverer eller deaktiverer debug-beskeder i browserkonsollen.	`bool`	`true`
`level`	Sætter logniveauet. Accepterede værdier er `log`, `warn` eller `error`.	`string`	`warn`
`collect`	Hvis `true` gemmes log-beskeder i browserens storage. Hvis `false` bruges midlertidig storage.	`bool`	`true`
`group`	Samler relevante log-beskeder i konsollen for nemmere læsning.	`bool`	—
`collapsed`	Hvis `true` er grupperede beskeder skjult (collapsible) som standard. Gælder kun hvis `group` er slået til.	`bool`	—
`clear`	Sletter alle gemte log-beskeder.	`bool`	—

Session Storage #

Når debug-mode er aktiveret, gemmes konfigurationen i sessionStorage under nøglen __clerk_debug. Det sikrer, at debug-indstillingerne bevares, mens besøgende navigerer mellem sider, uden at påvirke andre browsertabeller eller varer ved efter sessionen.

Consent Management Platforms (CMPs) som Cookiebot kan markere __clerk_debug som en storage-post, der kræver dokumentation. Det er en funktionel nøgle, udelukkende til udvikler-fejlfinding. Den indeholder ikke persondata eller sporingsoplysninger.

For detaljer om API debug-svar, se Response debugging.

UI Kit #

Clerk.js indeholder 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 vigtig del af en god e-commerce søgeoplevelse er at få resultater straks mens man skriver. Vores Instant Search UI-komponent gør denne brugeroplevelse hurtig og nem 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, der 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 nem at bygge.

Search Page lader dig oprette en hel side, der viser de bedst mulige resultater for en given søgeforespø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, der 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 en succesfuld webshop. Vores Category Page gør denne brugeroplevelse hurtig og nem at bygge. Dette lader dig oprette en hel side, der viser de bedst mulige resultater for en given 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.

Clerk.js leveres med indbygget understøttelse af dynamisk facetteret navigation både for søgning og kategorier. Alle produktegenskaber 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="Se 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-popup’en reagerer, når en besøgende forsøger at forlade dit site ved at føre musen nær toppen af browser-vinduet. Den popper op og viser interessante produkter og kan måske konvertere en besøgende til en kunde.

Enhver Element-blok kan aktiveres ved 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.

UI Kit indeholder et simpelt popup-bibliotek, der gør det let at lave brugervenlige popups med hvilket som helst indhold. Alle HTML-elementer på dit website med klassen clerk-popup vises som en popup.

<div id="my-popup" class="clerk-popup">Hello, world!</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 at styre Chat-widget og reagere på konversationshændelser. Det er nyttigt, når du vil åbne chat fra dit eget UI, sende AI’en kontekst om, hvad besøgende laver, eller integrere hændelser i resten af din frontend.

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

Åbning af Chat fra brugerdefineret knap #

Hvis du vil åbne Chat fra din egen knap eller UI-element i stedet for standard-launcheren, så brug toggle:

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

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

Vis Chat kun på bestemte sider #

Som standard er Chat synlig på hele sitet. For kun at vise den på bestemte sider, så deaktiver den i din globale konfiguration og aktiver den selektivt:

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

// Derefter på de sider, hvor du ønsker den synlig
Clerk('chat', 'enable');

Send kurv- og sidekontekst til AI #

metadata-metoden sender struktureret kontekst til Chat, så AI’en kan give mere relevante svar. Kald den hver gang konteksten for besøgende ændrer sig – sideskift, tilføjelse til kurv, opdatering af præferencer.

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

// Efter 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 — inkludér den kontekst, der giver mest mening for samtalerne på siden.

Tilpas AI-adfærd ud fra, hvad brugeren laver #

prompt_message-metoden sender instruktion på systemniveau til AI’en. Kunden ser den ikke, men den styrer hvordan AI’en svarer i den nuværende samtale.

// Efter en tilføjelse til kurv – bed AI’en om mersalg
Clerk('chat', 'prompt_message', 'Brugeren har netop tilføjet en Lightsaber i sin kurv. Foreslå supplerende produkter såsom tilbehør eller beskyttelsesudstyr.');

// På checkout-siden – fokusér på færdiggørelse af købet
Clerk('chat', 'prompt_message', 'Brugeren er på checkout-siden. Hjælp med at gennemføre bestillingen og besvar eventuelle sidste spørgsmål.');

Overdragelse til en menneskelig agent #

Når en besøgende har brug for support, affires onSupport eventen med et resumé af samtalen. Brug dette til at åbne dit helpdesk-chat og send konteksten, så en agent straks er opdateret – ingen grund til at få kunden til at gentage sig selv.

Clerk('config', {
  key: 'your-public-api-key',
  chat: {
    onSupport: (e) => {
      // e.summary indeholder et tekst-resumé af samtalen indtil nu
      const summary = e.summary || 'No conversation summary available.';

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

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

      // Skjul eventuelt Clerk Chat, når overdragelsen er fuldført
      Clerk('chat', 'disable');
    }
  }
});

onSupport eventen fires kun, når Contact Support er konfigureret i Chat-indstillingerne, og den besøgende udtrykkeligt beder om et menneske.

Reagér på Chat-hændelser #

Brug events til at integrere Chat-adfærd med resten af din frontend – fx logning af beskeder, synkronisering af tilstand eller overdragelse til menneskelig agent.

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

Du kan også tilføje event-hooks dynamisk efter første konfiguration:

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

Læs mere i Chat JS docs.

Udelukkelse af produkter #

Clerk.js har to forskellige måder at udelukke produkter, afhængigt af om du vil udelukke bestemte ID’er eller undgå dubletter mellem forskellige sliders.

Udeluk bestemte ID’er #

Tilføj blot attributten data-exclude til snippeten. Indholdet af data-exclude skal være en liste af produkt-ID’er, du ikke ønsker vist, fx produkter i kundens kurv eller produkter, de ikke har adgang til.

<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 dér, hvor du vil fjerne dubletter fra. Værdien skal være en CSS-selector for den/de andre snippets, du vil undgå dubletter fra.

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

Events giver dig mulighed for at sætte event listeners op, der kører kode på bestemte tidspunkter før, under eller efter, at Clerk.js render resultaterne.

Et simpelt eksempel er at indlæse brugerdefinerede priser for en indlogget kunde i et B2B-setup. En event kan køre umiddelbart efter, at Clerk’s API er færdig med rendering, så du kan hente brugerdefinerede priser til en kunde og fø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 performance #

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 balanceres hastighed, performance og synlighed i søgemaskiner.

SEO og hastighed #

Det er en myte, at JavaScript-features som Clerk.js forringer performance eller SEO. Automatiserede værktøjer overser ofte optimeringer såsom caching, parallel load og serverside-håndtering.

Fordele ved Clerk.js-integration #

Clerk.js-scriptet (≈ 37 - 38 KB) indlæses asynkront, så dit site kan vises, mens Clerk initialiserer.
Clerk-elementer renders client-side, hvilket betyder, at din basis-HTML forbliver cachebar, og dynamiske komponenter indsættes først efter indlæsning.
Dette muliggør effektiv serverside-caching og ikke-blokerende load af Clerk.js-assets.

Performancepåvirkning #

Clerk.js’ lette og asynkrone natur betyder typisk kun lille påvirkning på loadtider.
Reelt ses performance-hits ofte pga. ekstra billeder fra anbefalinger, ikke selve scriptet. For at minimere dette:
- Brug korrekt størrelse og effektive formater som WebP.
- Tilpas billeder til visningsdimensioner (fx 400×400 px → 420×420 px maks).
For at undgå layoutskift (CLS), reserver plads til det indsprøjtede Clerk-indhold.

Fx:

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

SEO-overvejelser #

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

Linkning og crawlbarhed #

Clerk.js indsætter anbefalingslinks dynamisk client-side.
Links kan styrke intern linkning 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 crawlere renderer og tolker dem.
Rigtigt crawlede links kan forbedre crawlbarhed, give søgemaskiner mulighed for at opdage og indeksere flere sider.

PageRank-fordeling #

Når søgemaskiner kan crawle dem, kan Clerk.js-links hjælpe med fordeling af linkværdi (PageRank) til nøglesider.
Det understøtter øget synlighed og ranking af produkt- og kategorisider.

Observerede fordele #

Rigtig integreret Clerk.js kan føre til bedre intern linkstruktur og dermed øget synlighed i søgeresultater.
Clerk.io dashboards giver analytics over ordrepåvirkning, konverteringsløft og omsætningsbidrag fra Search, Recommendations, Email og Audience.

Anbefalede best practices #

Optimer billeder (WebP-format, korrekt opløsning).
Reserver layoutplads til dynamiske elementer for at undgå layoutskift.
Overvåg reelle brugerdata i stedet for kun automatiske scores. Brug Clerk’s dashboards til at evaluere indflydelse på tværs af kanaler.

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

Clerk.js

Oversigt #

Snippets #

Injection #

Konfiguration #

Visitor ID’er #

Page Context #

Sprog #

Design-funktioner #

Formatters #

Globals #

Konfiguration #

Design #

Output #

Email Tracking #

Indloggede kunder #

Sådan sker tilknytningen #

Tilpasset rendering #

Fejlfinding #

Aktiveringsmetoder #

Konfigurationsmuligheder #

Session Storage #

UI Kit #

Instant Search #

Search Page #

Category Page #

Facets #

Exit Intent #

Popup #

Chat #

Åbning af Chat fra brugerdefineret knap #

Vis Chat kun på bestemte sider #

Send kurv- og sidekontekst til AI #

Tilpas AI-adfærd ud fra, hvad brugeren laver #

Overdragelse til en menneskelig agent #

Reagér på Chat-hændelser #

Udelukkelse af produkter #

Udeluk bestemte ID’er #

Undgå dubletter #

Events #

SEO og performance #

SEO og hastighed #

Fordele ved Clerk.js-integration #

Performancepåvirkning #

SEO-overvejelser #

Linkning og crawlbarhed #

PageRank-fordeling #

Observerede fordele #

Anbefalede best practices #