Indstillinger

Generelt #

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

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

Et vilkårligt antal Element-blokke kan være baseret på et enkelt Design, eller du kan oprette separate Designs til hver Element.

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

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

Hver Element-bloks Settings-side er inddelt i fire sektioner, som du kan få adgang til ved at klikke på Edit Element.

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 Filters, hvis du for eksempel kun vil vise produkter over eller under en bestemt pris, eller fra et specifikt brand.

Vælg design #

Dette giver mulighed for at 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 her tilføje de overskrifter, der skal vises for Elementet.

Facet-rækkefølge #

Når et Element har en facetrække i sit design eller indsætningsindstillinger, kan du omarrangere attributterne ved at bruge deres prikkede håndtag. Træk en række til den ønskede position, og slip den derefter i den stiplede boks.

Hvis du vil bruge tastaturet, skal du fokusere på en facet-række og trykke på Alt + ↑ eller Alt + ↓. Skærmlæsere annoncerer flytningen. Se Search facets eller category page facets for mere kontekst.

Indsæt på website #

Element-blokke er knyttet til en embedcode, som gør det muligt at vise dem på alle sider, hvor du har indsat Clerk.js. Du kan enten blot indsætte embedcode der, hvor du vil vise Elementet, eller bruge vores injection-funktion.

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

Brug af embedded code #

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

Brug af injection #

Injection er en funktion, der gør det muligt at indsætte element-blokke 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-målretning #

Brug URL-målretning til at styre, præcis hvor et Element vises. Tilføj så mange URLs, som du har brug for, og vælg derefter, hvordan side-stien skal matche dem:

Nedenfor er en beskrivelse af de forskellige injektionsmuligheder:

Flere IDs #

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 matchede værdier og kombinerer dem til én liste.

Dette er nyttigt på sider som kurve, hvor hver linje har 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 IDs 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 attribute på siden, skal du vælge Clerk.js context fra Read ID from-dropdown. Clerk.io vil derefter bruge den værdi, der er sat for den ID-type i context på den aktuelle side.

Dette er den enkleste mulighed, når platformen allerede automatisk sætter konteksten — ingen ekstra konfiguration påkrævet på selve siden.

Platforme med context indbygget i extension #

Følgende platforme sætter Clerk.js-kontext automatisk som en del af deres officielle Clerk.io extension 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 på listen 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ør live #

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

Se preview #

Et Element i preview-tilstand er skjult for almindelige besøgende. For at se det, tilføj ?clerk_content_mode=preview til URL’en til den side, 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 da &clerk_content_mode=preview i stedet. Når du åbner en preview-URL, kan du se 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 Elementet du vil gøre live. I dets Visible To-kolonne, klik på Preview for at skifte det til All visitors. Elementet er nu live og kan ses uden preview URL-parameteren.
3. For at sætte det tilbage i preview, klik på All visitors i samme kolonne. Det skifter tilbage til Preview og er kun synligt, når du bruger preview-URL-parameteren.

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

Efter at have gjort et Element live, åbn din webshop uden clerk_content_mode=preview i URL’en og tjek, at hvert Element vises på de ønskede sider.

Overskrifter #

Det er nemt at styre overskrifter med standardopsætningen i Element.

På Edit Element-siden klikker du på Select Design for at finde Headline-feltet.

Rediger teksten i Headline-boksen og klik på Save.

Ændringen vises straks, næste gang du opdaterer din webshop.

Dynamiske tekstfelt-tags #

Vores standarddesigns bruger tags til at sætte forskellige overskrifter for hvert Element.

Disse tags kan bruges i ethvert tekstfelt i Design Editor-designs og alle steder i code designs.

Tags har syntaksen {{ variable }} og kan have et hvilket som helst navn.

Åbn Designs og klik på Edit Design for det design, du vil ændre.

På Edit Design-siden indsætter du {{ headline }} i HTML-sektionen.

Klik på Save & Close og du vil nu kunne skrive en Headline fra din Element-fane.

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

Alt, hvad du skriver i HTML Section med {{ variable }}-syntaks, vil være tilgængeligt som input-felt fra Element.

Disse tags kan også bruges i ethvert tekstfelt i et Design Editor-design.

Fjernelse af dublerede produkter #

Brug af denne funktion tvinger indlæsningen af flere Clerk.io recommendations en efter en i stedet for samtidig, hvilket øger den samlede sideindlæsningstid.

Sørg for, at kompromiset i loadtid er det værd for at undgå dubletter.

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

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

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

I eksemplet nedenfor udelukker .clerk2-elementet ethvert produkt, der findes i .clerk1-elementet, og .clerk3-elementet udelukker produkter, der findes 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 (et smart træk hvis du har et element med 20 produkter, men kun fire er synlige ad gangen).

Dette gøres ved hjælp af :limit(n)-muligheden (hvor n er det første antal produkter du ønsker at udelukke).

Her er det samme eksempel som før, men hvor udelukkelses-ID kun omhandler 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>

Udelukkelse af specifikke produkter #

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

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

For eksempel:

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

Sidevisningsindsigt #

På listerne under Search > Elements og Recommendations > Elements kan du holde musen over det grønne Yes/No-mærke i kolonnen Seen in last 24h for at åbne et hurtigt overblik.

Popuppen viser de seneste 7 dage:

• Top 10 sider, hvor elementet optrådte
• Individuelle visningstal pr. side
• Samlede visninger på tværs af alle sider
• Direkte links til siderne

Brug dette til at verificere placering og identificere, hvilke sider der giver mest eksponering for hvert element. Hvis et element ikke har nogen nylige visninger, vises mærket No og popuppen vil være tom.