Get Started

Når Clerk ikke har en færdiglavet extension eller integration til en given webshop-platform, kalder vi det en custom platform.

Den største forskel er, at custom platforms skal synkronisere med et Data Feed og indsætte Clerk.io-resultater i frontend.

Denne guide forklarer, hvordan du installerer Clerk på en custom platform ved hjælp af Clerk.js. Dette er den anbefalede fremgangsmåde, da den tager sig af meget af det tunge arbejde i forhold til tracking og API-kald.

Hvis du foretrækker at opsætte Clerk.io ved hjælp af vores API, kan du i stedet tjekke denne artikel.

Clerk.js er et letvægtsbibliotek, der gør det muligt at opsætte Clerk ved hjælp af simple HTML-fragmenter i kildekoden. Clerk.js scanner siden for fragmenter med klassen “clerk” og bruger dem til at lave API-kald.

Nedenfor finder du de trin, du skal igennem, når du installerer Clerk.

1. Synkronisér data #

Først skal du have data ind, så Clerk.io’s AI forstår din webshop og kan begynde at forudsige resultater.

Opret Store #

Hver Clerk-opsætning konfigureres på en Store i my.clerk.io. Denne vil indeholde alle de data, du uploader, og give dig mulighed for at interagere med dem via dens Public API-nøgle.

Hvis du skal opsætte flere webshops eller domæner, skal hver have deres egen Store.

Du kan kopiere din konfiguration til nye Stores efter den første opsætning.

Byg feeds #

Der er to måder at forbinde dine webshop-data til Clerk.io.

Data Feeds #

Dette er den primære datakilde fra webshoppen til Clerk. Se specifikationen for feeds her.

Her er vores best practice for oprettelse af feeds:

• De bør ideelt set opdateres én gang dagligt på din side.
• De bør hostes på en URL, hvor Clerk.io’s importer kan hente dem. F.eks. https://awesomestore.com/feed/clerk.json
• Som minimum bør feeds altid indeholde alle tilgængelige produkter og kategorier, men de kan også indeholde pages (blogindlæg / artikler) og kundedata.
• Clerk bruger produktattributter til søgning, filtrering og styling.
• Ved første import bør du inkludere alle historiske ordrer. Efter første import kan disse fjernes, da Clerk beholder dem i databasen.
• For produkter kan du udover de påkrævede også sende andre attributter, der er vigtige for din forretning, såsom anmeldelser, farver, mærkater, splash-billeder osv.
• Som udgangspunkt importerer Clerk feeds mindst én gang om dagen.
• Du kan konfigurere et tidsvindue inden for 1 time (f.eks. mellem 2:59-3:59), hvis du ønsker importeren skal køre på et bestemt tidspunkt.

AI Integration #

Hvis din webshop-platform eksponerer et API, som du har adgang til, kan du bruge en AI Integration til at forbinde Clerk.io direkte til API’et. Læs AI Integration-guiden under Ask Clerk.io for at lære mere.

Brug Realtime Sync #

Dette er valgfrit, men anbefales.

Hvis webshoppen kræver opdateringer i realtid, som f.eks. at fjerne udsolgte produkter eller opdatere priser, kan vores CRUD API bruges til at tilføje, opdatere eller fjerne produkter mellem feed-importer.

2. Track Adfærd #

Clerk.io’s AI lærer om kundeadfærd gennem ordrer og aktivitet på hjemmesiden. Sporing af denne adfærd er afgørende for, at AI’en kan lave præcise forudsigelser og for at vise de statistikker, der dokumenterer effekten.

Installer Clerk.js #

Clerk.io tracker klik, søgninger og ordrer fra frontend af tre vigtige grunde:

• For at lade AI’en lære om kundeadfærd i realtid via ordrerne.
• Analytics, der viser hvordan ordrer forbedres af Clerk.
• Personalisering af forskellige Recommendations på siden.

Clerk.js-scripten skal tilføjes sammen med dine andre scripts i <head>-sektionen og konfigureres med din Public API Key, som findes i my.clerk.io.

Dette loader biblioteket, som genererer cookieless, anonyme besøgs-ID’er og tracker klik på alle produkter vist af Clerk gennem fragmenterne.

<!-- 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 -->

Tilføj Context #

Brug Clerk Context til at fortælle Clerk.js hvilket produkt, kategori eller side, som den besøgende ser. Dette kan personliggøre produktanbefalinger og hjælpe Chat med at forstå, hvilken produktside eller kategori der vises. Du kan også overføre basket-kontext til Chat, så det forstår, hvilke produkter der er i kurven.

Tilføj følgende kode til side-skabelonen efter Clerk.js er loaded. Udskift eksempelværdierne med de aktuelle produkt-, kategori- eller side-ID’er, og brug null når en konteksttype ikke er relevant.

<script>
  Clerk('context', {
    product: 123,
    category: 456,
    page: 789
  });
</script>

Tilføj Sales-Tracking #

Dette skal tilføjes på din ordre-success-side. Hver gang en ordre afgives, vil Clerk.js bruge fragmentet til at lave et API-kald med information om ordren, inklusive hvad den besøgende har klikket på i sessionen op til ordren.

Sørg for at opdatere pladsholderne, så de henter de korrekte data fra ordrene.

 <span
    class="clerk"
    data-api="log/sale"
    data-sale="123456"
    data-email="luke@skywalker.me"
    data-customer="7890"
    data-products='[{"id": 12, "quantity": 1, "price": 99.95}, {"id": 54, "quantity": 2, "price": 9.50}...]'>
</span>

Clerk.io logger også de produkter, besøgende har set, for at personalisere i visse bannere.

Hvis du vil bruge Cross-Sell og/eller Alternative produkter på dine produktsider, vil Clerk bruge disse til at logge de sete produkter.

Hvis ikke, skal du inkludere dette fragment på produktsiden for også at logge produktvisninger:

<span 
    class="clerk"
    data-api="log/product"
    data-product="INSERT_PRODUCT_ID">
</span>

3. Visualisér resultater #

Når du bruger Clerk.js, kan designs håndteres på to måder:

• Hosted i my.clerk.io ved hjælp af enten vores Design Editor eller Liquid code.

• Hosted i din kildekode som embedded results

Host på Clerk.io #

Hosting af designs i my.clerk.io giver størst fleksibilitet, da du kan ændre designs, logikker og filtre uden at ændre din onsite-kode efter opsætning. Ulempen er, at design håndteres pr. Store.

Embed resultater #

Hosting af designs i din kildekode giver dig friheden til at dele designs på tværs af flere Stores. Ulempen er, at du ikke kan bruge vores Element-system til at lave ændringer i resultaterne.

4. Tilføj Elements #

Dette gøres med fragmenter tilknyttet din Element.

Indsæt i frontend #

For at indsætte Clerk-resultater, vælg et Element i my.clerk.io, konfigurer det til at bruge et design, du har lavet, og kopier fragmentet til en side, hvor resultaterne skal vises.

Clerk.js scanner kildekoden for alle fragmenter med klassen clerk og bruger data-attributterne til at lave API-kald.

Den refererer til din Element-konfiguration inklusive API-endpoint/element-logik, design, antal produkter der skal returneres m.m. og returnerer et helt HTML-blok, der indsættes i fragmentet.

Konfigurér #

Nogle fragmenter kræver ekstra data såsom produkt-ID’er eller kategori-ID, som skal konfigureres baseret på din webshops logik til at hente data.

Et eksempel er Best Alternatives Recommendations-fragmentet, der kræver et produkt-ID tilføjet til fragmentet:

<!--Best Alternatives Recommendations-->
<span 
    class="clerk"
    data-template="@product-page-alternatives"
    data-products="[INSERT_PRODUCT_ID]">
</span>

Andre kræver bare, at fragmentet tilføjes til siden, med mindre konfigurationsmuligheder efter behov.

Et eksempel er Instant Search-fragmentet, der kræver en CSS-selector til søgefeltet og antal forslag og kategorier, der skal vises:

<!--Instant Search-->
<span 
    class="clerk"
    data-template="@live-search"
    data-instant-search="INSERT_SEARCH_INPUT_CSS_SELECTOR_HERE"
    data-instant-search-suggestions="6"
    data-instant-search-categories="6"
    data-instant-search-pages="6"
    data-instant-search-positioning="right">
</span>

Som standard kommer nye Stores i Clerk med vores Best Practice allerede oprettet som individuelle Element-blokke, så det er nemt at komme i gang.

Fragmentet vil ændre sig afhængigt af den valgte Product Logic for Element, så du altid kan se, hvilke data-attributter du skal konfigurere.