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 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 tilgang, da det klarer det meste 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 se denne artikel.

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 foretage API-kald.

Nedenfor er de trin, du skal igennem, 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 #

Hvert Clerk-setup 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 via 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 #

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

Dette er vores bedste praksis for oprettelse af feeds:

De bør ideelt opdateres én gang om dagen hos dig.
De skal hostes på en URL, hvor Clerk.io’s importer kan hente det, f.eks. 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 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 gemmer dem i databasen.
For produkter, udover de påkrævede, kan du sende andre attributter, der er vigtige for din forretning, som anmeldelser, farver, labels, splash-billeder osv.
Som standard vil Clerk importere feeds mindst én gang dagligt.
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 anbefalet.

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-imports.

2. Track Adfærd #

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

Installer Clerk.js #

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

Giver AI’en mulighed for at lære om kundeadfærd i realtid gennem ordrerne.
Analytics der viser, hvordan ordrer forbedres af Clerk.
Personalisering af forskellige Recommendations på sitet.

Clerk.js scriptet skal tilføjes sammen med dine øvrige 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 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 Salgstracking #

Dette skal tilføjes til din ordre-succes-side. Hver gang en ordre gennemføres, vil Clerk.js bruge snippet’en til at foretage et API-kald, der indeholder ordreoplysningerne, herunder hvad besøgende har klikket på i sessionen frem til ordren.

Sørg for at opdatere pladsholderne, 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 kigger på, for personalisering i bestemte bannere.

Hvis du vil bruge Cross-Sell og/eller Alternative produkter på dine produktdetalje-sider, vil Clerk bruge disse til at logge de viste produkter for besøgende.

Hvis ikke, skal du inkludere følgende snippet på produktdetalje-siden for også at logge de viste produkter:

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

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

Host i Clerk.io #

Hosting af designs i my.clerk.io giver den største fleksibilitet, da du kan ændre designs, logikker og filtre uden at ændre din onsite kode efter opsætningen. Ulempen er, at designs 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 ændre på resultaterne.

4. Tilføj Snippets #

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

Indsæt til 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 oprettet, og kopierer snippet’en til en side, hvor resultater skal vises.

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

Den refererer til dit Element-setup inklusiv API-endpoint / element-logik, design, antal produkter der skal returneres osv., og returnerer et komplet 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 ud fra din webshops logik for datahentning.

Et eksempel på dette er Best Alternatives Recommendations-snippet, som kræver, at et produkt-ID tilføjes 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 enkelte konfigurationsmuligheder for, hvordan den skal opføre sig.

Et eksempel er Instant Search-snippetet, som kræver en CSS-selector til søgefeltet samt antal forslag og kategorier, der 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 leveres nye Stores i Clerk med vores Best Practice allerede oprettet som individuelle Element-blokke, så du hurtigt kan komme i gang.

Snippet’et vil ændre sig afhængigt af den Product Logic, der er valgt for Elementet, så du altid kan 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.