Muligheder

Generelt #

Website Elements gør det nemt at arbejde med Elements til Recommendations og Elements til Search results.

Designs gemmes hos Clerk.io, og du skal kun indsætte en lille embed code på den side, hvor du ønsker at vise produkter. Dette kan gøres via sektionen Embedded Code eller sektionen Injection.

Ethvert antal Element-blokke kan baseres på et enkelt Design, eller du kan oprette separate Designs for hver Element.

For at se eller oprette Elements, åbnes Search > Elements eller Recommendations > Elements i sidemenuen.

Hver unik Element-blok styres af sine egne indstillinger. Du kan vælge et unikt navn til alle Element-blokke, som også fungerer som dens tracking label.

Åbn et Element for at redigere navn, logik, design og indsætningsindstillinger.

Navngiv dit element #

Styrer Name og tracking Labels for Element-blokken.

Vælg produktlogik #

Definerer hvilken type produkter, der skal vises i Elementet.

Du kan også styre, om der skal anvendes nogle Filters, hvis du f.eks. kun vil vise produkter over eller under en bestemt pris, eller fra et specifikt brand.

Vælg design #

Her kan du vælge, hvor mange produkter der skal vises, og hvilket Design Elementet skal baseres på. Hvis du har en title/headline variabel i dit design, kan du også tilføje de overskrifter, der skal vises til Elementet her.

Tilføj facets #

I Elementets facet-indstillinger, klik på Add Facet for at vælge en attribut. Attributten skal være tilgængelig til filtrering i webshoppen. Efter at have tilføjet facets, brug deres prikkede håndtag for at ændre rækkefølgen.

Facet-rækkefølge #

Når et Element har en facet-liste i dets design eller indsætningsindstillinger, kan du omarrangere attributterne ved hjælp af deres prikkede håndtag. Træk en række til den ønskede position, og slip den derefter i den stiplede boks.

For at bruge tastaturet, fokusér på en facet-række og tryk Alt + ↑ eller Alt + ↓. Skærmlæsere annoncerer flytningen. Se Search facets eller category page facets for mere kontekst.

Indsæt på website #

Vælg Using injection eller Using embedded code indenfor Insert into website. Visningstilstand og de tilhørende kontroller forbliver i denne sektion; ændring af indsætningsmetoden opdaterer kontrollerne her.

Element-blokke er knyttet til en embedcode, som gør dem synlige på alle sider, hvor du har indsat Clerk.js. Du kan enten blot indsætte embedcode hvor du ønsker Elementet skal vises, eller bruge vores injection-funktion.

Bemærk at embed codes muligvis kræver variabler som product IDs, category IDs eller email, afhængigt af logikken.

Brug af embedded code #

Embed code er et lille kodeudsnit, som du kan indsætte på din hjemmeside. Vælg Using embedded code i Elementets Insert into website indstillinger for at kopiere den.

Brug af injection #

Injection er en funktion, der gør det muligt at indsætte elementblokke på dit website uden manuelt at tilføje embed code. Vælg Using injection i Elementets Insert into website indstillinger for at konfigurere det.

URL-targeting #

Brug URL-targeting til præcist at styre, hvor et Element vises. Tilføj så mange URL’er, du har brug for, og vælg derefter, hvordan sidevejen skal matche dem:

Herunder følger en beskrivelse af de forskellige injection-muligheder:

Flere ID’er #

For Product ID CSS selector kan du målrette flere elementer med samme selector.

Hvis selector’en matcher flere produkt-ID’er, samler Clerk alle de matchende værdier og kombinerer dem til en liste.

Dette er nyttigt på sider som kurve, hvor hver linje indeholder et produkt-ID-element.

<input class="product-id" value="123">
<input class="product-id" value="456">
<input class="product-id" value="789">

Med selector’en .product-id læser Clerk alle ovenstående værdier som én produkt-ID-liste.

Læsning af ID’er fra Clerk.js context #

Når en logik kræver et produkt-, kategori- eller side-ID, kan injection-funktionen læse det direkte fra Clerk('context', {...}) kaldet, som Clerk.js bruger til tracking.

I stedet for at pege på en CSS selector eller attribut på siden, vælges Clerk.js context i Read ID from dropdown. Clerk.io vil derefter bruge den værdi, der er sat for denne ID-type i context på den aktuelle side.

Dette er den nemmeste mulighed, når platformen allerede sætter context automatisk — ingen ekstra konfiguration nødvendig på siden selv.

På single-page apps og headless storefronts, hold Clerk.js context opdateret, mens brugeren navigerer. Allerede renderede blokke, hvis ID’er kommer fra context, opdateres automatisk, når den relevante værdi ændres, uden en fuld omlæsning af siden.

Eksempelvis kan en kategori-recommendation blok opdatere, når kategori-context ændres. Denne adfærd er aktiveret som standard og fungerer uafhængigt af DOM-observation. Blokke, hvis ID’er stammer fra sideelementer samt popups, genindlæses ikke på denne måde.

Se Context Reloads for kodeeksempler, understøttede context keys og hvordan automatisk genindlæsning deaktiveres.

Platforme med context indbygget i udvidelsen #

Følgende platforme sætter Clerk.js context automatisk som en del af deres officielle Clerk.io udvidelse eller plugin:

• Magento 1
• Magento 2
• WooCommerce
• PrestaShop
• Shopware 6

Platforme med context i det manuelle Clerk.js script #

Følgende platforme inkluderer Clerk('context', {...}) kaldet i deres standard Clerk.js tracking script, som tilføjes manuelt under opsætning:

• Shopify
• Dandomain
• Lightspeed
• SmartWeb
• ScanNet
• BigCommerce

Hvis din platform ikke er nævnt ovenfor, kan du stadig bruge denne funktion ved manuelt at tilføje Clerk('context', {...}) kaldet til dit Clerk.js tracking script. Se Clerk.js guide for detaljer.

Gå live #

Brug preview mode til at teste et Element på din webshop, før du gør det synligt for dine besøgende. Når det er klar, skift til live fra Elements-listen i my.clerk.io.

Se preview #

Et Element i preview mode er skjult for almindelige besøgende. For at se det, tilføj ?clerk_content_mode=preview til URL’en på siden, hvor det er installeret, og åbn så den URL. For eksempel:

https://example.com/?clerk_content_mode=preview

Hvis URL’en allerede indeholder et ?, tilføj &clerk_content_mode=preview i stedet. Når du åbner en preview-URL, ser du preview-Elements; det gør dem ikke live for andre besøgende.

Skift synlighed #

1. I my.clerk.io, åbn Search > Elements eller Recommendations > Elements.
2. Find det Element, du ønsker at gøre live. I dens Visible To kolonne, klik på Preview for at skifte til All visitors. Elementet er nu live og kan ses uden preview URL-parameteren.
3. For at sætte det tilbage i preview mode, klik på All visitors i den samme kolonne. Det skifter tilbage til Preview og er kun synligt, når du bruger preview URL-parameteren.

Synlighed er indstillet separat for hvert Element, så gentag dette for hvert Element, du vil gøre live.

Efter at være gået live, åbne din webshop uden clerk_content_mode=preview i URL’en og tjek, at hvert Element vises på sine tilsigtede sider.

Overskrifter #

At administrere overskrifter er nemt med standardopsætningen i Element.

På Edit Element siden, klik på Select Design for at finde Headline-feltet.

Ændr teksten i Headline-boksen og klik Save.

Ændringen bliver vist straks, når du genindlæser din webshop.

Dynamiske tekstfelt-tags #

Vores standard designs bruger tags til at opsætte forskellige overskrifter for hvert Element.

Disse tags kan bruges i ethvert tekstfelt i Design Editor-designs og hvor som helst i code designs.

Tags har syntaxen {{ variable }} og kan have et hvilket som helst navn, du vælger.

Åbn Designs og klik Edit Design for det design, du ønsker at ændre.

På Edit Design siden, indsæt {{ headline }} i HTML sektionen.

Klik Save. Gå derefter tilbage til Elementet og konfigurer Headline feltet.

Du kan tilføje så mange tekstfelter, du vil, Headline er blot et eksempel.

Alt hvad du skriver i HTML Section med {{ variable }} syntaxen vil kunne bruges som inputfelt fra Element.

Disse tags kan også bruges i et hvilket som helst tekstfelt i et Design Editor design

Fjernelse af dublerede produkter #

Ved brug af denne funktion indlæses flere Clerk.io anbefalinger én efter én i stedet for samtidig, hvilket øger sideindlæsningstiden.

Sørg for, at tradeoff’et i indlæsningstid er det værd for at undgå dubletter.

Clerk.js tilbyder to enkle måder at undgå dubletter på tværs af flere recommendations-elementer på samme side.

Den ene er at bruge Exclude Duplicates indstillingen i sektionen Inject Element, hvor du vælger det Clerk-element, du vil ekskludere dubletter fra – enten fra listen eller ved at angive en CSS selector.

Den anden mulighed er at tilføje attributten data-exclude-from på det Clerk-blok, hvor du ønsker at fjerne dubletter fra. Value for attributten skal være en CSS selector for det andet blok, dubletter skal undgås fra.

I nedenstående eksempel ekskluderer elementet .clerk2 ethvert produkt, der er i .clerk1 elementet, og .clerk3 ekskluderer produkter, der er i enten .clerk1 eller .clerk2 elementerne.

<span class="clerk clerk1"
  data-template="@clerk-banner-1">
</span>

<span class="clerk clerk2"
  data-exclude-from=".clerk1"
  data-template="@clerk-banner-2">
</span>

<span class="clerk clerk3"
  data-exclude-from=".clerk1,.clerk2"
  data-template="@clerk-banner-3">
</span>

Du kan også begrænse udelukkelsen til kun at vise de første n produkter (en smart metode hvis du har et element med 20 produkter, men kun fire er synlige ad gangen).

Dette gøres via :limit(n)-optionen (hvor n er antallet af produkter, du ønsker at undgå dubletter fra).

Her er samme eksempel som ovenfor, men hvor eksklusions-ID’et kun omfatter de første fem produkter.

<span class="clerk clerk1"
  id="clerk1"
  data-template="@clerk-banner-1">
</span>

<span class="clerk clerk2"
  id="clerk2"
  data-exclude-from=".clerk1:limit(5)"
  data-template="@clerk-banner-2">
</span>

<span class="clerk clerk3"
  id="clerk3"
  data-exclude-from=".clerk1:limit(5),.clerk2:limit(5)"
  data-template="@clerk-banner-3">
</span>

Ekskluder specifikke produkter #

For at undgå at vise bestemte produkter skal du blot tilføje attributten data-exclude til en eksisterende embedcode.

Dette skal være en liste med de produkt-ID’er, du ikke ønsker vist i blokken.

For eksempel:

<span class="clerk"
  data-template="@clerk-complementary"
  data-exclude="[45654]">
</span>

Sidevisninger indsigt #

På listerne under Search > Elements og Recommendations > Elements, hold musen over det grønne Yes/No badge i kolonnen Seen in last 24h for at åbne et hurtigt indblik.

Popup’en viser for de seneste 7 dage:

• De 10 mest viste sider hvor elementet forekom
• Individuelle visningsantal pr. side
• Samlet antal visninger på tværs af alle sider
• Direkte links til siderne

Brug dette til at verificere placering og identificere hvilke sider der driver mest eksponering for hvert element. Hvis et element ikke har nogen nylige visninger, vises badge som No og popup’en er tom.