Enhver (webshop)

Get Started

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

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

Denne guide forklarer, hvordan man installerer Clerk på en custom platform ved brug af Clerk.js. Dette er den anbefalede metode, da den håndterer størstedelen af det tunge arbejde med tracking og API-kald.

Hvis du foretrækker at opsætte Clerk.io ved brug af vores API, kan du i stedet læse denne artikel.

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

Herunder finder du de trin, du skal igennem, når Clerk skal installeres.

1. Synkronisér data #

Først skal du få 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 giver dig mulighed for at interagere med dem gennem dens Public API key.

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

Du kan kopiere din konfiguration til nye Stores, når først du har lavet den første opsætning.

Byg feeds #

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

Data Feeds #

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

Her er vores best practices for oprettelse af feeds:

De bør ideelt opdateres én gang dagligt på din side.
De bør hostes på en URL, hvor Clerk.io’s importør kan hente det, fx https://awesomestore.com/feed/clerk.json
Som udgangspunkt skal feeds altid indeholde alle tilgængelige produkter og kategorier, men kan også indeholde pages (blogindlæg/artikler) og customer data.
Clerk bruger produktattributter til søgning, filtrering og styling.
Ved den første import bør du inkludere alle historiske ordrer. Efter første import kan disse fjernes, da Clerk opbevarer dem i databasen.
For produkter kan du udover de påkrævede sende andre attributter, som er vigtige for din forretning, som anmeldelser, farver, labels, splash-billeder osv.
Som standard importerer Clerk feeds mindst én gang dagligt.
Du kan konfigurere et vindue på 1 time (fx mellem 2:59-3:59), hvis du ønsker importen afviklet på et specifikt tidspunkt.

AI Integration #

Hvis din webshop-platform har et API, du kan tilgå, 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, så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 websiteaktivitet. Tracking af denne adfærd er afgørende for, at AI’en kan lave præcise forudsigelser og vise statistikker, der dokumenterer effekten.

Installer Clerk.js #

Clerk.io tracker klik, søgninger og ordrer fra frontend af tre hovedårsager:

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

Clerk.js-scriptet skal indsættes sammen med dine andre scripts i <head>-sektionen og konfigureres med Public API Key, som findes på my.clerk.io.

Dette indlæser biblioteket, der genererer cookieless, anonyme besøgs-ID’er, og det vil tracke klik på alle produkter vist af Clerk via snippets.

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

Brug Clerk Context til at fortælle Clerk.js, hvilket produkt, kategori eller side besøgende ser. Dette kan personalisere produktanbefalinger og hjælpe Chat med at forstå, hvilken produktside eller kategori der vises. Du kan også sende kurv-kontekst til Chat, så den ved, hvilke produkter der er i kurven.

Tilføj følgende snippet til sidetemplaten efter Clerk.js er indlæst. Udskift eksempelværdierne med de relevante produkt-, kategori- eller sideidentifikatorer, 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 til din order success page. Hver gang en ordre placeres, bruger Clerk.js dette snippet til at lave et API-kald med ordreoplysninger, inklusive hvad den besøgende har klikket på i sessionen op til ordren.

Sørg for at opdatere placeholders, så de henter 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, som besøgende har set, for at personalisere visse bannere.

Hvis du bruger Cross-Sell og/eller Alternative produkter på dine produktdetail-sider, bruger Clerk disse til at logge de produkter, besøgende har set.

Hvis ikke, skal du inkludere dette snippet på produktdetail-siden for også at logge produktvisninger:

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

3. Visualisér resultater #

Når Clerk.js bruges, kan design håndteres på to måder:

Hostes i my.clerk.io med enten vores Design Editor eller Liquid code.
Hostes i din kildekode som embedded results

Clerk.io Design Editor showing a recommendation design

Host i Clerk.io #

Hosting af design i my.clerk.io giver mest fleksibilitet, da du kan ændre design, logik og filtre uden at skulle ændre kode onsite efter opsætningen. Ulempen er, at design håndteres per Store.

Integrér resultater #

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

4. Tilføj Elements #

Dette gøres med snippets knyttet til dit Element.

Indsæt i frontend #

For at indsætte Clerk-resultater vælger du et Element i my.clerk.io, konfigurerer det til at bruge et design, du har lavet, og kopierer snippet ind på en side, hvor resultater skal vises.

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

Den refererer dine Element-indstillinger inklusive API-endpoint / element-logik, design, antal produkter der skal returneres m.m., og indsætter derefter et komplet HTML-blok i snippet’et.

Konfigurer #

Nogle snippets kræver yderligere data såsom product IDs eller category ID, som skal konfigureres ud fra logikken i din webshop for at hente data.

Et eksempel er Best Alternatives Recommendations-snippet, der kræver, at der tilføjes et produkt-ID til snippet’et:

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

Andre kræver bare, at snippet’et tilføjes til siden, med enkelte konfigurationsmuligheder ud fra, hvordan det skal opføre sig.

Et eksempel er Instant Search-snippet, 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 følger nye Stores i Clerk vores Best Practice, som allerede er oprettet som individuelle Element-blokke, så det er let at komme i gang.

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

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