Any (webshop)

Get Started

Når Clerk ikke har en præfabrikeret udvidelse eller integration til en given webshop-platform, kalder vi det en brugerdefineret platform.

Den største forskel er, at brugerdefinerede platforme skal synkronisere med et datafeed og indsætte Clerk -resultater i frontenden.

Denne vejledning forklarer, hvordan man installerer Clerk på en brugerdefineret platform ved hjælp af Clerk.js. Dette er den anbefalede tilgang, da den tager sig af meget af det tunge arbejde med hensyn til sporing og API-opkald.

Clerk.js er et letvægtsbibliotek, der gør det muligt at opsætte Clerk ved hjælp af enkle HTML-uddrag i kildekoden. Clerk.js scanner siden for eventuelle uddrag med klassen “clerk” og bruger dem til at foretage API-kald.

Dette er de 4 trin, du skal igennem, når du installerer Clerk:

  1. Synkroniser data
  2. Spor adfærd
  3. Visualiser resultater
  4. Føj resultater til frontend

1. Synkroniser data #

1.1 Opsætning af en butik #

  • Hver Clerk -opsætning konfigureres på en Opbevar i my.clerk.io. Den vil indeholde alle de data, du uploader, og give dig mulighed for at interagere med dem via den offentlige API-nøgle.
  • Hvis du har brug for at opsætte flere webshops eller domæner, skal de have hver deres Store.
  • Du kan kopiere din konfiguration til nye Stores, når du har lavet den første opsætning

1.2 Byg JSON-datafeeds #

  • Dette er hovedkilden til data fra webshoppen til Clerk. Se specifikationerne for feeds her.
    • Feeds skal ideelt set opdateres en gang om dagen på din side
    • Feeds skal hostes på en URL, hvor Clerks-importøren kan hente dem, f.eks. https://awesomestore.com/feed/clerk.json
    • Som udgangspunkt skal feeds altid indeholde alle tilgængelige produkter og kategorier, men kan også indeholde sider (blogindlæg/artikler) og kunder data.
    • 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.
    • Til produkter kan du ud over de nødvendige sende alle andre attributter, der er vigtige for din virksomhed, f.eks. anmeldelser, farver, etiketter, splash-images osv.
    • Clerk bruger produktattributter til søgning, filtrering og styling.
  • Som standard vil Clerk importere feeds mindst en gang om dagen.
  • Du kan konfigurere et vindue inden for 1 time (f.eks. mellem 2:59-3:59), hvis du vil have importøren til at køre på et bestemt tidspunkt.

1.3 Opdateringer i realtid #

  • Dette er valgfrit, men anbefales.
  • Hvis webshoppen kræver opdateringer i realtid, f.eks. fjernelse af udsolgte produkter eller opdatering af priser, kan vores CRUD API bruges til at tilføje, opdatere eller fjerne produkter mellem feed-importerne.

2. Spor adfærd #

2.1 Installer Clerk.js #

  • Clerk sporer klik, søgninger og ordrer fra frontend til tre vigtige grunde:
    • Lader AI’en lære om kundeadfærd i realtid gennem ordrerne
    • Analyser, der viser, hvilke ordrer der blev påvirket af Clerk, og hvor meget mere de er værd
    • Personalisering af forskellige anbefalinger på tværs af sitet
  • Scriptet Clerk.js skal tilføjes sammen med dine andre scripts i afsnittet <head> og konfigureres med Offentlig API-nøgle, der findes i my.clerk.io.
  • Det indlæser det bibliotek, der genererer anonyme besøgs-ID’er uden cookies, og det sporer klik på produkter, der vises af Clerk gennem uddragene.
<!-- 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 -->

2.2 Tilføj salgssporing #

  • Dette skal tilføjes til din side med succesfuld ordre.
  • Opdater pladsholderne, så de henter de korrekte data fra ordrerne.
  • Når der afgives en ordre, bruger Clerk.js uddraget til at foretage et API-kald til Clerk, der indeholder ordreoplysningerne.
 <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 logger også de produkter, som de besøgende har set, så de kan personaliseres i visse bannere.
  • Hvis du bruger krydssalg og/eller alternative produkter på din sider med produktdetaljer, vil Clerk bruge disse til at logge det/de produkt(er), som de besøgende har set.
  • Hvis ikke, skal du inkludere dette uddrag på produktdetaljesiden for også at logge produktvisningerne:
<span 
    class="clerk"
    data-api="log/product"
    data-product="INSERT_PRODUCT_ID">
</span>

3. Visualiser resultater #



  • Hosting af design i my.clerk.io giver størst fleksibilitet, da du kan ændre design, logik og filtre uden at ændre din onsite-kode efter opsætningen. Ulempen er, at design håndteres pr. butik.

  • Hosting af designs i din kildekode giver dig frihed til at dele designs på tværs af flere butikker, men ulempen er, at du ikke kan bruge vores indholdssystem til at foretage ændringer i resultaterne.

4. Tilføj uddrag til frontend #

  • Dette gøres med Content sn ippets i Clerk.js.
  • For at indsætte Clerk -resultater skal du vælge et indhold i my.clerk.io, indstille et design, du har oprettet, og kopiere uddraget til den side, hvor det skal vises. Eksempler på dette:
<!--Best Alternatives Recommendations-->
<span 
    class="clerk"
    data-template="@product-page-alternatives"
    data-products="[INSERT_PRODUCT_ID]">
</span>

<!--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>
  • Uddraget refererer til indholdskonfigurationen for produktlogikken, antallet af produkter, der skal returneres, designet osv. og returnerer en komplet HTML-blok, der indsættes i uddraget.
  • Nogle uddrag kræver yderligere data som produkt-ID’er eller kategori ID, som skal tilføjes.
  • Som standard kommer nye butikker i Clerk med vores bedste praksis, der allerede er oprettet som individuelle indholdsblokke, hvilket gør det nemt at komme i gang.

Andre muligheder #

For en omfattende gennemgang af vores tekniske platform, herunder direkte integration med API’en, se denne artikel

Der er nogle tilfælde, hvor en API-integration på serversiden er bedre for dig, f.eks. når:

  • Erstatning af en eksisterende API med Clerk
  • Håndtering af komplekse prisregler og kundekataloger
  • Opbygning af en app

Hvis dette ikke gælder for dig, anbefaler vi at bruge Clerk.js.

Flere domæner #

På denne måde kan du adskille produkter, salg, valutaer osv. for at holde styr på hvert sprog.

  1. Start med at oprette din Hovedbutik og følg opsætningsvejledningen for at forbinde din butik til Clerk.io, og vælg de anbefalinger og/eller søgeresultater, du vil have vist på din webshop.

  2. Når du er færdig med den indledende opsætning, skal du gå tilbage til startsiden på my.clerk.io (ved at klikke på Clerk.io -logoet på øverste venstre hjørne af sidemenuen.) og derefter klikke på "+ Tilføj ny butik" som den sidste mulighed på rullelisten (generelt under din(e) eksisterende butik(ker) og dit firmanavn):

  1. Klik på Avanceret på siden Tilføj ny butik for at se alle indstillinger.
  1. Udfyld oplysningerne om din webshop, og vælg din hovedbutik i rullemenuen Kopier indhold fra eksisterende butik, og klik derefter på Tilføj butik. Dette vil overføre Indhold og Design fra din hovedbutik.
  1. Nu kan du følge opsætningsvejledningen igen, til Aktiver Clerk.io ved at klikke på Kom godt i gang, til Synkroniser data for dette sprog.
  1. Når Synkronisering af data er færdig, er din webshop klar og bruger den samme opsætning som din hovedbutik.

Husk også at oversætte Overskrifter, i Indhold-> Rediger -> Vælg design til det rigtige sprog.

Du kan følge denne proces for alle sprog i den webshop, du vil bruge Clerk.io med.

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