Enhver (webshop)

Get Started

Når Clerk ikke har en forudbygget udvidelse eller integration til en given webshopplatform, betegner vi det som 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 med 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 sætte Clerk.io op via vores API, kan du i stedet tjekke denne artikel.

Clerk.js er et letvægtsbibliotek, der muliggør opsætning af Clerk med simple HTML-snippets i kildekoden. Clerk.js scanner siden for snippets med klassen “clerk” og bruger dem til at lave API-kald.

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

1. Synkroniser data #

Først skal du sørge for at 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. Her vil alle uploadede data blive indeholdt, og du kan interagere med dem gennem dens Public API-nøgle.

Hvis du skal opsætte flere webshops eller domæner, skal hver have sin 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 webshopdata til Clerk.io.

Data Feeds #

Dette er hovedkilden til data fra webshoppen til Clerk. Tjek specifikationen for feeds her.

Vores bedste praksis til at oprette feeds er:

De bør ideelt set opdateres en gang om dagen fra 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 udgangspunkt bør feeds altid indeholde alle tilgængelige produkter og kategorier, men kan også indeholde sider (blogindlæg / artikler) og kundedata.
Clerk bruger produktattributter til søgning, filtrering og styling.
Ved første import skal du inkludere alle historiske ordrer. Efter første import kan disse fjernes, da Clerk gemmer dem i databasen.
For produkter, udover de påkrævede, kan du sende alle andre attributter, der er vigtige for din forretning, som anmeldelser, farver, labels, splash-images etc.
Som standard importerer Clerk feeds mindst en gang om dagen.
Du kan konfigurere et vindue på 1 time (fx mellem 2:59-3:59), hvis importeren skal køre på et bestemt tidspunkt.

AI Integration #

Hvis din webshopplatform 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 komme med præcise forudsigelser og vise statistikker, der viser, hvor godt det virker.

Installer Clerk.js #

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

AI’en lærer om kundeadfærd i realtid gennem ordrer.
Analytics, der viser, hvordan ordrer bliver forbedret af Clerk.
Personalisering af forskellige Recommendations på tværs af siden.

Clerk.js-scriptet skal tilføjes sammen med dine andre scripts i <head>-sektionen og konfigureres med Public API Key fundet i my.clerk.io.

Dette loader biblioteket, der genererer cookieless, anonyme besøgs-ID’er og tracker klik på alle produkter, som Clerk viser 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 på. Dette kan personalisere produktanbefalinger og hjælpe Chat med at forstå, hvilken produktside eller kategori der bliver besøgt. Du kan også sende basket context til Chat, så det ved, hvilke produkter der er i kurven.

Tilføj følgende snippet til sidens template efter Clerk.js er loadet. Udskift eksemplerne med de relevante produkt-, kategori- eller side-id’er, og brug null, hvis en konteksttype ikke er relevant.

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

Tilføj Salgs-tracking #

Dette skal tilføjes din ordrebekræftelsesside. Hver gang der placeres en ordre, vil Clerk.js bruge snippet’et til at lave et API-kald med ordre-informationen, inklusive hvad besøgende har klikket på i sessionen op til ordren.

Sørg for at opdatere pladsholderne, så de bruger 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å produkter set af besøgende for at personalisere i bestemte bannere.

Hvis du bruger Cross-Sell og/eller Alternative produkter på dine produktdetaljesider, vil Clerk bruge disse til at logge hvilke produkter, besøgende har set.

Hvis ikke, skal du inkludere dette snippet på produktsiden for også at logge visningerne:

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

3. Visualiser resultater #

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

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

Host i Clerk.io #

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

Embed resultater #

Hosting af design 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 ændre på resultaterne.

4. Tilføj Elements #

Det gøres med snippets tilknyttet dit Element.

Indsæt i frontend #

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

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

Den refererer til dine Element-indstillinger, inklusive API endpoint/element-logikken, design, antal produkter der skal returneres osv., og returnerer et komplet HTML-blok, som indsættes i snippet’et.

Konfigurer #

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

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

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

Andre kræver blot, at snippet’et tilføjes siden, med enkelte konfigurationsmuligheder alt efter, hvordan det skal opføre sig.

Et eksempel er Instant Search-snippet, som kræver en CSS-selector til søgefeltet og antal forslag og kategorier til visning:

<!--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 udgangspunkt oprettes nye Stores i Clerk med vores Best Practice som individuelle Element-blokke, hvilket gør det let at komme i gang.

Snippet’et ændrer sig afhængigt af den Product Logic, der vælges til 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.