Enhver (webshop)

FAQ

Svar på ofte stillede spørgsmål om tilpassede integrationer

Støder du på problemer med din brugerdefinerede integration? Denne FAQ dækker de mest almindelige problemer og deres løsninger, fra single-page apps til sporing af salg.

Single-page apps #

Disse kaldes også Progressive Web Apps (PWA) og indlæser generelt siden som en enkelt side i stedet for at indlæse individuelle sider som normalt.

Når en side indlæses for første gang, affyrer biblioteket Clerk.js automatisk en funktion for at gengive alle Element-blokke på den pågældende side.

Dog, for single-page apps der bruger frameworks som vue.js eller next.js, bliver sider gengivet med JavaScript i stedet for en standard sideindlæsning.

På grund af dette skal du kontrollere gengivelsen med Clerk.js, så det passer til hvordan du indlæser sider i appen.

Inkluder Clerk.js #

Clerk.js skal kun indlæses én gang, når siden indlæses første gang.

Herefter vil biblioteket være tilgængeligt gennem hele sessionen.

Inkluder det lige før </head> i din HTML:

<!-- 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_PUBLIC_API_KEY'
    });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Kontroller gengivelse #

Som standard gengiver Clerk.js alle elementer, der har klassen clerk, uanset om det indsættes under den indledende sideindlæsning eller når DOM’en ændres.

Du kan kontrollere timingen ved at indsætte elementet, når det er klar til at blive gengivet.

Alternativt kan du kontrollere gengivelsen med funktionen Clerk("content", "SELECTOR").

Hver gang en side indlæses, skal du udføre disse trin i rækkefølge:

  • Tilføj Clerk-snippet til HTML’en med en unik selector, du kan målrette mod.

  • Kør Clerk("content", "SELECTOR") for at gengive det.

Når den besøgende forlader siden, skal du destruere snippet’en og gendanne det, hvis den besøgende vender tilbage til samme side.

Dette er for at sikre, at Clerk.js ikke ser snippet’en som tidligere gengivet og derfor undlader at vise det.

Eksempel:

<span 
  id="clerk-custom-snippet"
  data-template="@home-page-visitor-recommendations">
</span>

<script>
  Clerk("content", "#clerk-custom-snippet")
</script>

Clerk.js kan også konfigureres til automatisk at initialisere Elements med dine brugerdefinerede selectors efter første gang du gengiver det.

Pagespeed indflydelse #

Hvis du tilføjer et eksternt værktøj som Clerk.js, vil det øge tiden det tager at indlæse dit site, men det er ubetydeligt sammenlignet med de ekstra konverteringer, det vil give.

Nedenfor kan du se, hvordan det påvirker dit sites ydeevne.

Ydeevne #

Clerk.js-biblioteket er kun 37,5 kb i størrelse, så det indlæses meget hurtigt.

Desuden indlæser det elementer asynkront, hvilket betyder at resten af siden indlæses, mens Clerk.js gengiver indholdet.

En stigning i sideindlæsningstiden skyldes oftest, at flere billeder end tidligere indlæses, da Clarks søgeresultater og anbefalinger fungerer bedst når de er visuelt attraktive.

For at minimere ekstra indlæsningstid anbefaler vi at bruge billeder i webp-format med en opløsning, der matcher deres størrelse i Clerk-elementerne.

For eksempel, hvis billeder i Recommendations har en opløsning på 400x400px på desktop, send da billeder i maks. 420x420px eller lignende.

Google Page Speed #

Hvis du bruger Google Page Speed Insights eller et lignende værktøj til at analysere dit sites ydeevne, kan du se Clerk.js nævnt under Leverage browser caching.

Leverage browser caching

Formålet med Clerk.js er at gøre det super nemt at indsætte resultater fra Clerk på ethvert website.

Clerk.js indeholder mange funktioner til at håndtere tracking og UI-komponenter som Instant Search, sliders, popups og mere.

Når vi tilføjer nye UI-funktioner eller foretager forbedringer af eksisterende, inkluderes de i Clerk.js og skal downloades af slutbrugeren for at kunne benytte dem.

En cache-udløbstid på 60 minutter betyder, at når vi frigiver nye funktioner, vil de være tilgængelige for alle inden for maks. 60 minutter.

Jo længere cachetid, desto længere går der, før alle har adgang til de nyeste funktioner.

Det vigtigste er, at slutbrugerne kun behøver at downloade Clerk.js én gang når der findes nye funktioner.

Cache-udløbstiden på 60 minutter betyder blot, at slutbrugerens browser tjekker med Clerk hver 60. minut.

Hvis der ikke er foretaget ændringer til Clerk.js, downloades der ikke noget.

Cache-udløbstiden på 60 minutter er således et kompromis mellem at minimere web-requests og se nye funktioner og forbedringer.

De fleste sessioner er kortere end 60 minutter, så requesten vil kun blive sendt én gang per session.

Som du kan se i screenshot’et, er dette normal praksis, der (sammen med Clerk) benyttes af Google Analytics, Facebook, Trustpilot og mange andre.

CLS indflydelse #

Cumulative Layout Shift (CLS) kan påvirke SEO og brugeroplevelsen negativt, når dynamisk indsprøjtet indhold forskyder elementer på en side.

I nogle tilfælde, blandt andet, kan Clerk bidrage til CLS-scoren.

Du kan læse mere om CLS her.

Følg denne vejledning kun hvis din CLS-score er højere end 0,2 og Clerk-elementer ligger above the fold.

For at forhindre indholdet i at flytte sig, skal der reserveres en pladsholder for Clerk recommendations, før Clerk.js indsprøjter dem.

For at gøre dette, skal du tilføje en minimumhøjde baseret på forventet indholdshøjde.

Eksempel på kode:

.clerk-slider-wrapper {
    min-height: 300px; /* Justér efter forventet indholdshøjde */
    width: 100%;
}

API-kald #

Du kan bruge Clerk.js til at foretage API-kald, ved at bruge den indbyggede funktion Clerk("call").

Denne funktion tager 3 argumenter:

  • Et API-endpoint

  • En JSON dictionary med parametre

  • En callback-funktion til at håndtere svaret

Forespørgsler #

Nedenfor er et eksempel på et script, der forespørger de 10 mest populære produkter og logger svaret til konsollen.

Svaret indeholder et JavaScript-objekt med status for API-kaldet og resultatet.

Script #

function popularProducts(){
  Clerk("call",
    "recommendations/popular",
    {
      limit: 10,
      labels:["Home Page / Bestsellers"]
    },
    function(response){
      console.log(response);
    },
    function(response){
      console.error(response);
    }
  );
}

Svar #

__clerk_cb_1(
  {
    "status":"ok",
    "count":72,
    "facets":null,
    "result":[399,410,551,338,403,439,425,402,406,456]
  }
);

Callbacks #

Når du laver API-kald, kan du bruge callback funktioner til at håndtere svaret som du ønsker.

Funktionerne tager response som argument, som indeholder alle data returneret af API’et.

Nedenfor er et eksempel, der opretter en liste af HTML-elementer med links til kategorier, der matcher forespørgslen “men”.

Clerk("call",
  "search/categories",
  {
      'query': "men",
      'limit': "10"
  },
  function(response) {
      var cat = response.categories;
      if (cat.length > 0) {
          let heading = document.createElement('h3');
          heading.textContent = 'Related Categories';
          document.querySelector('#your-target').append(heading);
      }
      for (var index in cat) {
          var clerkName = cat[index].name;
          var clerkUrl = cat[index].url;
          let link = document.createElement('a');
          link.href = clerkUrl;
          link.textContent = clerkName;
          document.querySelector('#your-target').append(link);
      }
  }
)

Tilføj-til-kurv-knapper #

Disse knapper fungerer forskelligt for hver platform, og funktionaliteten kan ændre sig afhængigt af hvilke plugins du bruger.

Fordi Clerks designs består af HTML & CSS, kan du som regel tilføje denne funktionalitet, hvis du forstår hvordan det virker på dit site.

Generel tilgang #

Nogle tilføj-til-kurv-knapper kræver JavaScript for at fungere.

I disse tilfælde kan du tilføje funktionaliteten til Clerks eksisterende cart-metode.

Se hvordan du gør dette i vores developer docs her.

Undersøg tilføj-til-kurv-knappen for at identificere koden, der er forbundet med den, f.eks. på en kategoriside.

Koden er som regel et <div> eller et button-element.

Kopier hele knap-HTML’en.

Kopier og indsæt denne kode i dit Design.

Nu skal du identificere variable i koden.

Ofte skal du finde, hvor koden bruger:

  • Produkt-ID

  • Produktmængde

Erstat værdierne for produkt-ID’et med Liquid-variable for disse datapunkter.

ID’et vil altid være {{ product.id }} og mængden vil afhænge af hvordan du sender data.

I dette eksempel kunne det være {{ product.qty }}.

Indsæt din kode i HTML’en på dit Design og test, at det virker.

Eksempel #

Tilføj-til-kurv-knappen nedenfor er et <div>, der har klassen button-container:

Add-To-Cart example

Antallet findes inde i kurv-linket efter /cart?add= og Produkt-ID findes lige efter &id_product=.

Produkt-ID refereres også i data-id-product, og produktmængden refereres i .data-minimal_quantity.

Disse værdier skal erstattes med Liquid-tags i Designet, så de passende produkt-ID’er og mængder bruges i HTML-outputtet.

Med disse ændringer vil den endelige tilføj-til-kurv-knap se således ud:

<div class="button-container">
  <a 
    class="button ajax_add_to_cart_button btn btn-default" 
    style="position: relative;" 
    href="https://www.examplelinktocart.com/cart?add={{ product.qty }}&amp;id_product={{ product.id }}&amp;" 
    rel="nofollow" 
    title="Add to Cart" 
    data-id-product-attribute="0" 
    data-id-product="{{ product.id }}" 
    data-minimal_quantity="{{ product.qty }}">
    <span style="color: orange !important">
      <i class="icon-shopping-cart" aria-hidden="true"></i>
    </span>
  </a>
</div>

Console-fejl #

Clerk.js logger mange fejl i konsollen, som du kan bruge til at debugge problemer.

Console Errors

Ved at klikke på fejl-linket får du mere information om, hvad der gik galt, som du kan bruge til at debugge fejlen selv, eller sende til vores supportteam, der kan hjælpe dig.

Nedenfor finder du en liste over de mest almindelige fejl.

Ukendt indhold #

Denne fejl vises, hvis det snippet du har indsat, refererer til et Element, der ikke findes i attributten data-template.

For at rette det, skal du sikre dig, at navnet i embed-koden matcher et Element-blok, du har oprettet i my.clerk.io.

Du kan klikke på Edit Element for ethvert Element for at se, hvad referencen skal være.

Element ID

Ugyldigt API-endpoint #

Denne fejl opstår, hvis du har brugt klassen clerk et eller andet sted i din HTML.

Denne klasse er reserveret til brug med vores snippets, da Clerk.js bruger denne klasse til at identificere de elementer, der skal gengives.

For at rette det, skal du kalde klassen noget andet, som eksempelvis clerk-product.

Ugyldigt produktargument #

Denne fejl betyder, at det oplyste ID for et produkt har en forkert type eller syntaks.

Hvis dine produkt-ID’er f.eks. er heltal, skal de også være det i embed-koden.

Husk også klammerne om ID’et, så det bliver en liste.

<span 
  class="clerk" 
  data-template="@product-page" 
  data-products="[123]">
</span>

Ugyldigt kategoriargument #

Denne fejl betyder, at det oplyste ID for en kategori har forkert type eller syntaks.

I de fleste tilfælde sker det, hvis pladsholderen i kategori-embed-koden ikke er blevet erstattet af et rigtigt ID:

<span 
  class="clerk" 
  data-template="@category-page" 
  data-category="INSERT_CATEGORY_ID">
</span>

Outputtet af koden skal indeholde ID’et på kategorien:

<span 
  class="clerk" 
  data-template="@category-page" 
  data-category="257">
</span>

Hvis du har kopieret snippet’et manuelt, skal du sørge for at vælge dit shopsystem i Choose your platform-dropdown før du kopierer snippet’et.

Derefter tilpasses snippet’et, så det inkluderer din platforms logik til at vælge korrekt kategori-ID.

Hvis din platform ikke står på listen, skal du manuelt tilføje logikken til at vælge korrekt kategori-ID ud fra dit webshops funktionalitet.

Forkert API-nøgle #

Denne fejl vises, hvis den offentlige API-nøgle, du har angivet, ikke matcher en konto i Clerk.

For at rette dette, skal du logge ind i my.clerk.io og gå til Developers > API Keys.

Her kan du finde din Public API Key, som du derefter kan tilføje i dit Clerk.js tracking-script enten direkte i koden, eller i indstillingerne for din integration, alt efter platform.

POS/ERP salgsdata #

For nogle webshops er det relevant at uploade salgsdata fra andre systemer end den faktiske webshop.

For eksempel hvis du vil optimere algoritmen baseret på salg fra en fysisk butik eller en B2B-butik.

Clerk skelner ikke mellem ordrer fra forskellige kilder — så længe du kan angive et ID, en timestamp og en liste af produkter, der blev købt, kan de uploades til Clerk.

Den anbefalede fremgangsmåde er at bruge CRUD API, da det gør det muligt at automatisere opgaven fuldstændigt.

Ved at implementere disse API-kald kan du sende order-data direkte til din Store i Clerk.

Opret blot et POST-kald til /orders-endpointet i dit ERP-system eller webshop, kør jobbet med jævne mellemrum, f.eks. en gang om måneden, og du vil kunne bruge offline ordrer til at booste dine online anbefalinger og søgeresultater.

Alternativt kan du uploade en CSV-fil manuelt, uden at skulle kode noget.

Du kan læse mere om CSV-filer her.

Valutaomregning #

Der er flere måder at arbejde med valutaomregning i Clerk.

En simpel måde at få det til at virke på er beskrevet nedenfor.

Oversæt valutaer #

Hvis besøgende bruger Google Translate på din webshop, kan prisværdier oversættes på måder, der ødelægger formatering eller ændrer valutavisning.

For at forhindre dette, skal du indpakke pris-output i elementer, der ikke skal oversættes.

Anbefalet markup #

Brug både translate="no" og klassen notranslate på price-elementet:

<span class="clerk-price notranslate" translate="no">
  {{ product.price | money }}
</span>

Hvis du viser listepris og udsalgspris, så brug samme mønster på hver prisværdi:

<span class="clerk-old-price notranslate" translate="no">
  {{ product.list_price | money }}
</span>
<span class="clerk-new-price notranslate" translate="no">
  {{ product.price | money }}
</span>

Anvend placeringer #

  • I dit Clerk Design, hvor priser gengives.
  • I alle brugerdefinerede HTML-wrappers, der output’er prisværdier.

Dette holder resten af siden oversættelig, mens korrekt pris- og valutaformatering bevares.

Send pris-objekter #

Clerk skal kende prisen på hvert produkt i de forskellige valutaer.

Den nemmeste metode er at sende dem som et string-encodet JSON-objekt af formaterede priser, med valuta-ISO som nøgle, i dit Data Feed.

"products": [
  {
    "id": 1,
    "name": "Cheese",
    "description": "A nice piece of cheese.",
    "price": 100,
    "list_price": 50,
    "categories": [25, 42],
    "image": "http://example.com/images/products/1.jpg",
    "url": "http://example.com/product/1",
    "on_sale": true,
    // String-encoded JSON examples
    "prices_formatted": "{\"USD\":\"$100\", \"EUR\":\"€87.70\", \"GBP\":\"£68.68\"}",
    "list_prices_formatted": "{\"USD\":\"$120\", \"EUR\":\"€97.70\", \"GBP\":\"£78.68\"}"  
  },
  {
    "id": 2,
    "name": "A pound of nuts",
    "description": "That's a lot of nuts!",
    "price": 150,
    "categories": [1],
    "image": "http://example.com/images/products/2.jpg",
    "url": "http://example.com/product/2",
    "on_sale": false,
    // String-encoded JSON example
    "prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}",
    "list_prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}"
  }
]

Opret formatter #

I Clerk.js kan du definere JavaScript-funktioner, som kan bruges med dine Designs.

Her kan du definere en funktion, der tager din price-dict som argument og returnerer prisen for en specifik valuta baseret på frontendlogik efter eget valg.

Sørg for at erstatte currency med den aktuelt valgte valuta fra frontend.

Clerk('config', {
  key: 'Your_API_Key',
  formatters: {
      currency_selector: function (price_list) {
      const currency = "EUR";
      price_groups_obj = JSON.parse(price_list)
        return price_groups_obj[currency];
      }
  }
});

Brug formatter #

Når formatteren er defineret, kan den bruges i dit design med følgende syntaks:

<div class="price">
   <span class="price">
      {{ product.prices_formatted | currency_selector }}
   </span>
</div>

Kunde-specifikke priser #

For at vise helt unikke priser baseret på hvilken kunde der er logget ind, skal du oprette et Event i Clerk, som indsætter den korrekte pris før produkterne gengives.

Events er JavaScript-funktioner, der køres før eller efter Clerk viser produkterne.

Denne metode kan bruges, hvis du kan slå priser op fra din server direkte fra en JavaScript-funktion i frontend baseret på et produkt-ID og et kunde-ID.

For at vise individuelle kundepriser skal koden køre umiddelbart efter svaret.

Nedenfor er et eksempel på et simpelt event.

<span class="clerk" data-template="@home-page-popular"></span>

<script>
  Clerk('on', 'response', function(content, data) {
     console.log(data.result);
  });
</script>

Funktionen tager argumentet data, der er det fulde svar, Clerk sender tilbage fra API’et.

Individuelle kundepriser #

Hvis du har brug for at vise helt unikke priser baseret på hvilken kunde, der er logget ind, skal du opsætte et Event, der indsætter den korrekte pris efter produkterne er gengivet.

Events er JavaScript-funktioner, der køres før eller efter Clerk viser produkterne.

Denne tilgang forudsætter, at du kan slå priser op fra din server med et AJAX-kald i frontend baseret på f.eks. et produkt-ID og et kunde-ID.

Den bedste metode er først at oprette en pladsholder-priscontainer i dit design og derefter erstatte den med prisen, der vendes tilbage fra AJAX-kaldet.

Et eksempel:

<div class="clerk-price-container">
   <span class="clerk-price">
      Loading price...
   </span>
</div>

Du kan derefter bruge Clerk-eventet til at vente på, at produkterne er gengivet, foretage et request til din price-server ved brug af produkt-ID og kunde-ID, før du erstatter det i HTML’en.

Her er et eksempel på, hvordan dette gøres:

<script>
  var customer_id = INSERT_CUSTOMER_ID;
  Clerk("on", "rendered", function(content, data){
    for (i = 0; i < data.product_data.length; i++) {
        var product = data.product_data[i];
          var custom_price = FETCH_PRICE_FROM_SERVER(product.id,customer_id);
          let price_container = document.querySelector(`[data-clerk-product-id='${product.id}'] .clerk-price`);
          price_container.innerText = custom_price;
      }
  })
  </script>

Ovenstående kode forudsætter, at du kan identificere en logget ind kunde med INSERT_CUSTOMER_ID, og at du har en funktion som FETCH_PRICE_FROM_SERVER, der returnerer prisen for produktet baseret på kunden.

price_container bruges til at målrette det rigtige produkt, baseret på ID’et som er tilgængeligt i data-clerk-product-id og tilføjes til alle produkter af Clerk.js.

Til sidst erstatter den inner text, “Loading price…” i dette eksempel, med prisen returneret fra AJAX-kaldet.

Kundegruppe-priser #

Opsætningen af kundegruppepriser består af 4 trin:

  1. Inkluder de forskellige priser i datafeeden.

  2. Inkluder en global variabel, der henter den aktuelle kundegruppes ID.

  3. Opret en funktion til at hente den relevante pris.

  4. Vis prisen i Designet.

Inkluder pris-objekter #

Start med at tilføje et attribut til alle produkter, der indeholder alle de forskellige prisvalg, hvor du sikrer at hver pris korreleres med den relevante kundegruppe.

Det skal sendes som et JSON-objekt. For eksempel:

"customer_group_prices": {
  "GROUP1": 100,
  "GROUP2": 202,
  "GROUP3": 309
}

Kundegruppe-ID variabel #

Tilføj en dynamisk global variabel til Clerk.js, som henter kundegruppens ID på den aktuelle kunde og tilføjer det som værdi.

Kundegruppe-ID værdien skal matche nøglen for den tilsvarende pris i Data Feed.

For eksempel, en bruger der skal se prisen for group 2, så skal ID’et være “GROUP2”.

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  }
});

Hent pris #

Du kan nu oprette en Formatter, der tager customer_group som argument og returnerer den relevante pris.

Gør dette ved at skrive en funktion, der henter prisen fra den specifikke kundegruppe som nøgle i price-dict, baseret på kundegruppe-ID.

Tilføj dette i Clerk.js-configen. Nedenfor er et eksempel kaldet getPrice:

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  },
  formatters: {
    getPrice: function (prices, customer_group) {
      return prices[customer_group];
    }
  }
});

Vis pris #

Når getPrice-formatter er oprettet, kan den bruges direkte i dit Design sammen med customer_group_prices-listen du lavede i trin 1:

<li style="text-align: center; width: 180px;">
	<a href="{{ product.url }}">
		<img src="{{ product.image }}" />
		{{ product.name }}
	</a>
	<div class="price">
		{{ product.customer_group_prices | getPrice customer_group }}
	</div>
</li>

HTTP-autentificering #

HTTP-autentificering bruges ofte på staging-sites for at undgå uønskede besøgende.

Det vil i mange tilfælde også blokere Clerk-importøren og typisk vise en 401 Unauthorized-fejl i sync-loggen.

Du kan løse dette ved at indsætte autentificeringsoplysninger i import-URL’en.

I my.clerk.io > Data > Configuration, opdater din import-URL således:

http://USER:PASS@www.ewoksRus.com/JSONFEED

Ingen sporede ordrer #

I my.clerk.io er Tracked Orders og Order Details samlet på én Orders-side.

Clerk skal kontinuerligt spore salg fra webshoppen for at holde resultaterne opdaterede efter dine kunders adfærd.

Nogle indstillinger i en webshop kan dog få salgs-tracking til at fejle.

Herunder kan du se, hvordan du kan debugge salgs-tracking ved brug af Clerk.js-setup, og hvilke de mest almindelige problemer og løsninger er.

Før du starter #

Sørg for, du har installeret:

Disse kræves for generelt at spore salg, når du bruger et Clerk.js-setup.

Tjek logs #

I de fleste tilfælde fejler salgs-tracking pga. fejl i visitor-ID’er eller produkt-ID’er på sales-kaldet, der sendes til Clerk efter købskompletion.

For at debugge dette, skal du lave en testordre.

Nogle gange kan det dog skyldes problemer i selve sales-tracking-skriptet og kan debugges ved at kigge på logs i my.clerk.io > Developers > Logs.

Hvis salgs-tracking fejler pga. en fejl i dit script, vil du ofte kunne se fejlen på denne side.

Klik Details for at se mere.

Error Details

Hvis du ikke kan se nogen fejl i logs, er den nemmeste måde at identificere andre sales-tracking-issues på at placere en testordre.

Testordre-debugging #

I dette eksempel bruges Chrome til at vise, hvordan du debugger salgs-tracking med en testordre, men andre browsere har lignende funktioner.

  1. Læg et par produkter i kurven på din webshop.

  2. Gå til Checkout.

  3. Før du placerer ordren, åbn din browsers Console.

  4. Find Network, og søg efter “clerk”.

  5. Placer ordren, så du ser order confirmation page.

  6. Klik på kaldet, der starter med sale (normalt sale?key=…).

Her vil du kunne se data, der sendes til og modtages af sales-tracking API-endpointet.

Klik på Preview for at identificere fejl, der kan forårsage, at salg ikke spores.

Nedenfor er almindelige fejl relateret til salgs-tracking.

Ugyldig produktsyntaks #

Denne fejl opstår, hvis de produkt-ID’er du sender, har forkert syntaks.

De mest almindelige fejl er:

  • Produkt-ID’erne er string-encodet i sales-tracking, men du bruger integers i Clerk eller omvendt.

  • Listen over produkt-ID’er indeholder tekstformaterings-tegn i stedet for ren JSON: "products":\[\\"id"\\:\\"123-m"\\\].

Manglende argument #

Dette betyder, at du ikke sender alle de nødvendige data, Clerk har brug for til at spore salget.

Sørg for du inkluderer alle de nødvendige data-attributter i sales-tracking

Intet kald sendt #

Hvis du slet ikke kan se kaldet til sale selvom begge scripts er installeret, er Clerk.js-skriptet sandsynligvis indlæst forkert.

Test det ved at gøre følgende:

  1. Åbn Console i din browser.

  2. Skriv “Clerk”.

  3. Hvis Clerk.js ikke er indlæst korrekt, vises en ReferenceError:

Uncaught ReferenceError: Clerk is not defined

Hvis dette er tilfældet, skal du tjekke dit Clerk.js-setup:

  • Sørg for at Clerk.js er installeret på alle sider.

  • Sørg for det ikke blokeres af anden JavaScript-funktionalitet.

Iubenda blokering #

Hvis du bruger iubenda til cookie consent (især med Automatic blocking) og en besøgende afviser cookies, kan iubenda blokere Clerk’s scripts eller requests.

Dette betyder typisk, at:

  • sale-requestet aldrig sendes, så ordren ikke spores eller ikke tilskrives i Clerk.
  • Clerk-elementer måske slet ikke vises, eller Clerk.js kan logge en console-fejl om at være loaded multiple times (fordi iubenda omskriver/udsætter scripts).

Løsning: Allowlist Clerk.io i iubenda #

I iubenda, allowlist Clerk, så det ikke blokeres, når besøgende afviser cookies.

Som minimum skal disse domæner allowlistes:

  • cdn.clerk.io (Clerk.js)
  • api.clerk.io (tracking og sales requests)

De præcise UI-labels varierer i iubenda, men det findes oftest under dit iubenda-projekts Cookie Solution-indstillinger for Automatic blocking (allowlist/whitelist/ignore list).

For iubendas egen vejledning se deres artikel om over-blocking i automatic blocking mode: https://www.iubenda.com/en/help/153445-what-to-do-when-the-automatic-blocking-mode-is-blocking-too-much/.

Verificér løsningen #

Efter at have opdateret iubendas indstillinger:

  1. Indlæs webshoppen, afvis cookies, og åbn browserens console.
  2. Bekræft at Clerk.js er tilgængelig (fx bør typeof Clerk ikke være "undefined").
  3. Kør Clerk("debug"), placer en testordre og bekræft at et sale-request sendes til Clerk og returnerer status: "ok".

Ingen Clerk-indflydelse #

Hvis du kan spore salg i my.clerk.io, men ingen af dem vises som påvirket af Clerk, har du formentlig en fejl i dit visitor-tracking / click-tracking-setup.

Start med at sikre at visitor-tracking virker ved at gøre følgende:

  1. Klik på et produkt via Clerks Search eller Recommendations.

  2. Gennemfør en ordre, der indeholder dette produkt.

  3. Log ind i my.clerk.io og gå til Orders.

  4. Vent til ordren vises.

Hvis visitor-tracking virker, vil du se værdien tilføjet af Clerk i ordredetaljerne på Orders-siden:

Orders overview

Hvis du ikke ser nogen value added i ordren du har lavet, viser de følgende afsnit almindelige fejl, der kan forårsage dette.

API-setup #

Hvis du har sat Clerk op med en brugerdefineret integration direkte mod API’et, skal du aktivt aktivere visitor-tracking.

Læs hvordan du gør dette i denne API-artikel.

Forkerte produkt-ID’er #

For at visitor-tracking kan fungere, skal click- og sales-tracking spore præcis de samme produkt-ID’er som vi modtager i importøren.

Hvis dette ikke virker, skyldes det typisk, at du sporer variant-ID’er i stedet for parent ID’er eller SKU i stedet for ID.

Wrong Product IDs

For at undersøge om dette er problemet gør du følgende:

  1. I my.clerk.io, gå til Data > Orders og klik på ID’et for en ordre du har lagt.

  2. Hvis Clerk ikke kan identificere produktet, vil du se en ID og image-pladsholder.

  3. Gå til Data > Products og søg efter navnet på det produkt, du tilføjede. Her vil du kunne se det forventede ID for produktet.

Brug dette til at konfigurere din salgs-sporing til at bruge de korrekte produkt-ID’er.

Besøgs-ID ændringer #

Clerk bruger et besøgs-ID til at identificere hver individuel session, inklusive de produkter, de klikker på og køber.

Derfor bør ID’erne forblive de samme under mindst hele sessionen, og gerne på tværs af flere sessioner.

Dette besøgs-ID oprettes automatisk, når du bruger Clerk.js til opsætningen, men hvis du bruger en API-opsætning, eller tilpasser dine besøgs-ID’er, kan du utilsigtet komme til at ændre det.

Denne fejl er sjælden, men du kan kontrollere besøgs-ID’et ved at følge disse trin:

  1. Åbn dine Network-indstillinger i browseren, og filtrer resultaterne til “clerk”.

  2. Start med at tjekke et af de undefined kald, der er relateret til search eller recommendations.

  3. I payload kan du se det nuværende Visitor ID. Du kan gøre dette for alle kald, der er knyttet til Clerk.

  4. Gå videre, klik på produktet, og læg en ordre med dette produkt.

  5. På Order Success-siden, tjek Network igen, og find kaldet til sale?.

  6. Sikr dig, at visitor i payload matcher Visitor ID’et, du så i trin 3.

Hvis visitor ID’erne ikke matcher, skal du finde ud af, hvorfor de ændrer sig.

En almindelig årsag til ændrede besøgs-ID’er kan være, hvis du regenererer ID’erne for hver ny side, der indlæses.

Opdater din kode, så det samme besøgs-ID bruges på hver side.

Skjul sliders med få produkter #

Hvis en kategori har meget få produkter, kan en slider se tom eller gentagende ud.

Der er to måder at håndtere dette på:

Clerk Design-betingelse #

Brug en betingelse omkring slider-markup, så den kun renderes, når der returneres nok produkter.

{% if products.length >= 6 %}
  <div class="clerk-slider">
    {% for product in products %}
      <!-- product card -->
    {% endfor %}
  </div>
{% endif %}

Dette er hurtigt at implementere, men det afhænger stadig af Clerk’s respons for at afgøre, om slideren skal vises. Det betyder, at det stadig koster et API-kald, også selvom slideren ikke vises.

Server-side betingelse #

Hvis din platform allerede kender antal produkter i kategorien, kan du afgøre i din template, om Clerk embed-koden overhovedet skal outputtes.

{% if category.product_count >= 6 %}
  <span class="clerk" data-template="@category-page-slider"></span>
{% endif %}

Dette er den foretrukne metode, da slideren kun initialiseres, når der er nok produkter, og opførslen er fuldstændig afstemt med din webshops egen logik for kategoritælling.

Opgrader til Clerk.js 2 #

Clerk.js 2 er en hurtigere og mere fleksibel version af vores JavaScript-bibliotek.

Det gør det lettere at installere Clerk på enhver webshop.

Men da de to versioner fungerer en smule forskelligt, skal du følge disse trin for at opgradere succesfuldt.

De to hovedforskelle i Clerk.js 2 er:

  • Designs i my.clerk.io bruger Liquid, men kan også nemt oprettes med Design Editor.

  • Scriptet skal indsættes lige før </head>-tagget i din webshops template.

Opret designs #

Da Clerk.js 2 benytter en anden tilgang til Designs, skal du oprette nye.

Du kan lave dine Clerk.js 2 Designs enten ved at genskabe dem i Design Editor, eller ved at konvertere dine gamle kode-Designs til Liquid, som guiden nedenfor forklarer.

Nedenfor er en beskrivelse af, hvordan du konverterer dine gamle kode-Designs til Liquid.

Design Editor mulighed #

  1. Gå til my.clerk.io > Recommendations/Search > Designs > New Design.

  2. Vælg en design-type anden end Blank og giv den et navn. Vi anbefaler at tilføje “V2”, så det er tydeligt, at du bruger Clerk.js 2 designs.

  3. I Design Editor klikker du på et af de eksisterende elementer som navn, billede, knap osv. for at redigere det, eller tilføjer nye elementer til designet.

  4. Klik på Publish Design, når du er færdig, og gå til Trin 2 i guiden.

  5. Gå til Recommendations/Search > Elements og skift dit Clerk Element til at bruge dit nye Design, og klik derefter på Update Element.

  6. Dette vil midlertidigt få dem til ikke at blive vist på din webshop, indtil du har indsat Clerk.js 2 som beskrevet længere nede i denne guide.

Konvertering af designs #

Da Clerk.js 2 bruger det mere fleksible skabelonsprog Liquid, skal du konvertere Designs til dette sprog.

  1. Gå til my.clerk.io > Recommendations/Search > Designs > New Design.

  2. Vælg Blank > Code og giv det et navn. Vi anbefaler at tilføje “V2”, så det er tydeligt, at du bruger Clerk.js 2 designs.

  3. Klik på Create Design.

  4. Dette giver dig et tomt design med Product HTML og CSS, som du kan bruge.

  5. Gå tilbage til design-oversigten og klik på Edit Design for dit Clerk.js 1 Design. Vi anbefaler at gøre dette i en ny fane, så du nemt kan kopiere koden.

  6. Kopiér det gamle Clerk.js 1 Design ind i dit nye Clerk.js 2 Design.

    • Du vil bemærke, at der ikke er nogen Container Code i dit nye design.

    • Det er fordi Liquid bruger for loops til at vise alle produkterne.

    • Kopiér din gamle Product HTML inde i for-loopet, din gamle Container Code udenom og kopiér også CSS’en.

  7. Konvertér designet til Liquids syntaks. Den primære forskel er, at de gamle designs brugte syntaksen {{ formatter attribute }}, hvor v2 bruger {{ product.attribute | formatter }}.

  8. Gennemgå alle dine attributter og ændr dem til det nye format.

  9. Hvis du bruger {{#if}} eller {{#is}} statements, skal disse også konverteres. Brug syntaksen {% if product.attribute %} {% else %} {% endif %}.

  10. Slet id="{{ $id }}" og klassen :target fra containerkoden i Clerk.js 2 versionen, da de ikke længere understøttes.

  11. Nedenfor er et eksempel på et Clerk.js 1 design og den fuldt konverterede version:

Clerk.js 1 Design #
// Product HTML
<li class="clerk-product">
    <a href="{{ url }}">
        <img src="{{ image }}" />
        <div class="clerk-product-name">{{ name }}</div>
        <div class="clerk-price-wrapper">
            {{#if list_price}}
                <div class="clerk-old-price">
                    <s>Price {{ money_eu list_price }}</s>
                </div>
                <span class="clerk-new-price">Price {{ money_eu price }}</span>
            {{else}}
                <div class="clerk-product-price">Price {{ money_eu price }}</div>
            {{/if}}
        </div>
    </a>
    <div class="clerk-cta-button btn button">Buy Now</div>
</li>

// Container Code
<h2>{{ headline }}</h2>
<ul id="{{ $id }}" class=":target clerk-slider"></ul>

<!-- This code creates the slider by its ID. -->
<script type="text/javascript">
    Clerk.ui.slider("{{ id }}").init();
</script>
Clerk.js 2 Design #
<h2>{{ headline }}</h2>

<ul class="clerk-slider">
    {% for product in products %}
    <li class="clerk-product">
        <a href="{{ product.url }}">
            <img src="{{ product.image }}" />
            <div class="clerk-product-name">{{ product.name }}</div>
            <div class="clerk-price-wrapper">
                {% if product.list_price %}
                    <span class="clerk-old-price"><s>Price {{ product.list_price | money_eu }}</s></span>
                    <span class="clerk-new-price">Price {{ product.price | money_eu }}</span>
                {% else %}
                    <div class="clerk-product-price">Price {{ product.price | money_eu }}</div>
                {% endif %}
            </div>
            <div class="clerk-cta-button btn button">Buy Now</div>
        </a>
    </li>
    {% endfor %}
</ul>

  1. Klik på Update Design for at gemme ændringerne.

  2. Gå til Recommendations/Search > Elements og skift din Element-blok til at bruge dit nye Design.

  3. Klik på Update Element. Dette vil midlertidigt få dem til ikke at blive vist på din webshop, indtil du er færdig med Trin 2. Vælg det nye Design for alle Elements, der skal opdateres.

Udskift script #

  1. Find den template-fil, der bruges til at vise alle sider på webshoppen, og hvor det oprindelige Clerk.js script er placeret tæt på bunden.

  2. Fjern det gamle Clerk.js script fra filen. Det vil se nogenlunde sådan ud:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
    window.clerkAsyncInit = function() {
        Clerk.config({
            key: 'public_api_key'
        });
    };
    (function(){
        var e = document.createElement('script'); e.type='text/javascript'; e.async = true;
        e.src = document.location.protocol + '//api.clerk.io/static/clerk.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
    })();
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

  1. Gå til my.clerk.io > Developers > Tracking Code. Her er Clerk.js 2 koden.

  2. Kopiér denne kode, indsæt den lige før </head>-tagget i templaten, og gem.

Tillykke! Du kører nu på det meget forbedrede Clerk.js 2 setup!

Du kan se den fulde dokumentation for Clerk.js 2 her.

Håndtering af require.js #

Dette afsnit gælder kun, når du bruger Clerk.js 1.

I nogle opsætninger forhindrer Require.js Clerk.js i at indlæse, hvilket betyder, at ingen sliders eller søgeresultater vises.

Når dette sker, vil følgende fejl blive vist i din konsol:

Uncaught ReferenceError: Clerk is not defined

Der er to måder at håndtere Require.js på. Begge tilgange kræver, at du foretager ændringer i tracking-scriptet, som du har indsat i bunden af alle sider.

Medtag i Require.js #

Den bedste metode er at forsøge at få Require.js til at genkende Clerk.

Du kan gøre dette ved at indsætte require(['clerk'], function() {}); i bunden af tracking-scriptet:

Insert Require Clerk.js 1

Ignorér Require.js #

Hvis ovenstående løsning ikke virker, er det muligt at ignorere Require.js.

Du kan gøre dette ved at indsætte window.__clerk_ignore_requirejs = true; øverst i tracking-scriptet:

Ignore Require.js

Efter at have brugt en af disse metoder, vil Require.js nu være kompatibel med Clerk.

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