Any (webshop)

Get Started

Clerk.js

Når Clerk ikke har en forudbygget udvidelse eller integration til en given webshop-platform, refererer vi til det som en tilpasset platform.

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

Denne guide forklarer, hvordan man installerer Clerk på en tilpasset platform ved hjælp af Clerk.js. Dette er den anbefalede tilgang, da den tager sig af meget af det tunge løft i forhold til sporing og API-opkald.

Hvis du foretrækker at opsætte Clerk.io ved hjælp af vores API, skal 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 enkle HTML-snippets i kildekoden. Clerk.js vil scanne siden for eventuelle snippets med klassen “clerk” og bruge dem til at foretage API-opkald.

Nedenfor er trinene, du vil gennemgå, når du installerer Clerk.

1. Synkroniser data #

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

Opret butik #

Hver Clerk-opsætning er konfigureret på en Butik i my.clerk.io. Dette vil indeholde alle de data, du uploader, og give dig mulighed for at interagere med det gennem dens offentlige API-nøgle.

Hvis du har brug for at opsætte flere webshops eller domæner, skal hver have deres egen butik.

Du kan kopiere din konfiguration til nye butikker efter at have udført den første opsætning.

Byg feeds #

Dette er den primære kilde til data fra webshoppen til Clerk. Tjek specifikationen for feeds her.

Disse er vores bedste praksis for at oprette feeds:

  • De bør ideelt set opdateres én gang om dagen på din side.
  • De bør være hostet på en URL, hvor Clerk.io’s importer kan hente det. f.eks. https://awesomestore.com/feed/clerk.json
  • Som en baseline bør feeds altid indeholde alle tilgængelige produkter og kategorier, men kan også indeholde sider (blogindlæg / artikler) og kundedata.
  • Clerk bruger produktegenskaber til at søge, filtrere og style.
  • Ved den første import bør du inkludere alle historiske ordrer. Efter den første import kan disse fjernes, da Clerk opbevarer dem i databasen.
  • For produkter, udover de obligatoriske, kan du sende eventuelle andre egenskaber, der er vigtige for din virksomhed, som anmeldelser, farver, etiketter, splash-billeder osv.
  • Som standard vil Clerk importere feeds mindst én gang om dagen.
  • Du kan konfigurere et vindue inden for 1 time (f.eks. mellem 2:59-3:59), hvis du ønsker, at importøren skal køre på et bestemt tidspunkt.

Brug Realtime Sync #

Dette er valgfrit, men anbefales.

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

2. Spor adfærd #

Clerk.io’s AI lærer om kundeadfærd gennem ordrer og webstedets aktivitet. At spore denne adfærd er afgørende for, at AI’en kan lave præcise forudsigelser og for at vise statistikker, der beviser, hvor godt det fungerer.

Installer Clerk.js #

Clerk.io sporer klik, søgninger og ordrer fra frontend af tre nøgleårsager:

  • At lade AI’en lære om kundeadfærd i realtid gennem ordrerne.
  • Analyse, der viser, hvordan ordrer forbedres af Clerk.
  • Personalisering af forskellige anbefalinger på tværs af siden.

Clerk.js-scriptet skal tilføjes sammen med dine andre scripts i <head>-sektionen og konfigureres med den offentlige API-nøgle, der findes i my.clerk.io.

Dette vil indlæse biblioteket, der genererer cookieless, anonyme besøgs-ID’er og det vil spore klik på eventuelle produkter vist af Clerk gennem snippets.

<!-- Start af 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>
<!-- Slut af Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Tilføj salgs-sporing #

Dette skal tilføjes til din ordresucces-side. Når en ordre placeres, vil Clerk.js bruge snippet’en til at foretage et API-opkald, der indeholder ordreoplysningerne, herunder hvad besøgende har klikket på i sessionen op til ordren.

Sørg for at opdatere pladsholderne for at hente de korrekte data fra ordrerne.

 <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, der er blevet set af besøgende, for at personalisere i visse bannere.

Hvis du vil bruge Cross-Sell og/eller alternative produkter på dine produktdetaljesider, vil Clerk bruge disse til at logge de produkt(er), der er blevet set af besøgende.

Hvis ikke, skal du inkludere denne snippet på produktdetaljesiden for også at logge produktvisningerne:

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

3. Visualiser resultater #

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

Host i Clerk.io #

Hosting af designs i my.clerk.io tilbyder mest fleksibilitet, da du kan ændre designs, logikker og filtre uden at ændre din onsite-kode efter opsætningen. Ulempen er, at designs håndteres på en per-butik basis.

Indlejre resultater #

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

4. Tilføj Snippets #

Dette gøres med snippets, der er knyttet til dit Indhold.

Indsæt i frontend #

For at indsætte Clerk-resultater skal du vælge et Indhold i my.clerk.io, konfigurere det til at bruge et design, du har oprettet, og kopiere snippet’en til en side, hvor resultaterne skal vises.

Clerk.js scanner kildekoden for eventuelle snippets med klassen clerk og bruger data-attributterne til at foretage API-opkald.

Det refererer til dine Indhold-indstillinger, herunder API-endepunkt / indholdlogik, design, antal produkter der skal returneres osv., og returnerer et fuldt HTML-blok, der indsættes i snippet’en.

Konfigurer #

Nogle snippets kræver yderligere data som produkt-ID’er eller kategori-ID, som skal konfigureres baseret på din webshops logik for at hente data.

Et eksempel på dette er Best Alternatives Recommendations snippet, som kræver et produkt-ID tilføjet til snippet’en:

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

Andre kræver blot, at snippet’en tilføjes til siden, med nogle mindre konfigurationsmuligheder baseret på, hvordan den skal opføre sig.

Et eksempel er Instant Search snippet, som kræver en CSS-vælger til søgeinput og antallet af 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 butikker i Clerk med vores bedste praksis allerede oprettet som individuelle Indhold-blokke, hvilket gør det nemt at komme i gang.

Snippet’en vil ændre sig afhængigt af produktlogikken valgt for Indholdet, så du altid kan se, hvilke data-attributter der er nødvendige for dig at konfigurere.

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