Enhver (webshop)

Get Started

Når Clerk ikke har en forudbygget udvidelse eller integration til en given webshop-platform, kalder vi det 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 du installerer Clerk på en custom platform ved hjælp af Clerk.js. Dette er den anbefalede tilgang, da den håndterer meget af det tunge arbejde omkring tracking og API-kald.

Hvis du foretrækker at opsætte Clerk.io via vores API, så se denne artikel i stedet.

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

Nedenfor er trinnene, du gennemgår, når du installerer Clerk.

1. Synkroniser 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 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, efter du har lavet den første opsætning.

Byg Feeds #

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

Her er vores bedste praksis for at oprette feeds:

De bør ideelt set opdateres én gang dagligt fra din side.
De skal hostes på en URL, hvor Clerk.io’s importer kan hente dem, f.eks. https://awesomestore.com/feed/clerk.json
Som minimum skal feedene altid indeholde alle tilgængelige produkter og kategorier, men kan også indeholde sider (blogindlæg/artikler) og kundedata.
Clerk bruger produktegenskaber 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 gemmer dem i databasen.
For produkter kan du udover de krævede felter sende andre egenskaber, der er vigtige for din virksomhed, som anmeldelser, farver, labels, splash-images osv.
Som standard importerer Clerk feedene mindst én gang dagligt.
Du kan konfigurere et tidsvindue på 1 time (f.eks. mellem 2:59-3:59), hvis du ønsker, at importeren kører på et bestemt tidspunkt.

Brug Realtime Sync #

Dette er valgfrit, men anbefales.

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

2. Track Adfærd #

Clerk.io’s AI lærer om kundeadfærd via ordrer og aktivitet på websitet. Tracking af denne adfærd er afgørende for, at AI’en kan lave præcise forudsigelser og vise statistikker, der beviser, hvor godt den virker.

Installer Clerk.js #

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

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

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

Dette loader biblioteket, der genererer cookieless, anonyme besøgs-ID’er og tracker 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 Salgs-Tracking #

Dette skal tilføjes på din ordrebekræftelsesside. Hver gang en ordre gennemføres, bruger Clerk.js snippetten til at lave et API-kald med ordreoplysninger inklusive, hvad kunden har klikket på i sessionen op til ordren.

Sørg for at opdatere pladsholdere til 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, med henblik på personalisering i visse bannere.

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

Hvis ikke, skal du inkludere denne snippet på produktsiden for også at logge produktvisninger:

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

Hosted i my.clerk.io ved brug af enten vores Design Editor eller Liquid code.
Hosted i din kildekode som embedede resultater

Host i Clerk.io #

Hosting af designs i my.clerk.io giver mest fleksibilitet, da du kan ændre designs, logik og filtre uden at skulle ændre koden på sitet efter opsætning. Ulempen er, at designs håndteres per 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 Content system til at ændre resultaterne.

4. Tilføj Snippets #

Dette gøres med snippets, der er tilknyttet dit Content.

Indsæt til Frontend #

For at indsætte Clerk-resultater vælg et Content i my.clerk.io, konfigurer det til at bruge et design, du har oprettet, og kopier snippetten ind på en side hvor resultaterne skal vises.

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

Den refererer til dine Content-indstillinger inklusiv API endpoint / content logik, design, antal varer der returneres mv., og returnerer et komplet HTML-blok, der indsættes i snippetten.

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 på dette er Best Alternatives Recommendations-snippet, der kræver et produkt-ID tilføjet til snippetten:

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

Andre kræver blot, at snippetten tilføjes til siden, med nogle mindre konfigurationsmuligheder afhængig af, hvordan den skal opføre sig.

Et eksempel er Instant Search-snippet, der kræver en CSS-selector for søgefeltet samt 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 er nye Stores i Clerk oprettet med vores Best Practice allerede oprettet som individuelle Content-blokke, så det er nemt at komme i gang.

Snippetten vil ændre sig afhængigt af den valgte Product Logic for Content, 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.