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 enkelt-side applikationer til sporing af salg.

Enkelt-side applikationer #

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

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

Men for enkelt-side applikationer, der bruger rammer som vue.js eller next.js, gengives siderne med JavaScript i stedet for en standard sideindlæsning.

På grund af dette skal du kontrollere gengivelsen med Clerk.js for at matche, hvordan du indlæser sider i appen.

Include Clerk.js #

Clerk.js behøver kun at blive indlæst é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 dit 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 -->

Kontrol af rendering #

Som udgangspunkt gengiver Clerk.js alle elementer, der har klassen clerk, uanset om det er indsat under den oprindelige sideindlæsning eller når DOM ændrer sig.

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

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

Hver gang en side indlæses, gør disse trin i rækkefølge:

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

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

Når besøgende forlader siden, ødelæg snippet’en, og gengiv den igen, hvis besøgende vender tilbage til den samme side.

Dette er for at sikre, at Clerk.js ikke opfatter snippet’en som tidligere gengivet, hvilket kunne få den til at ikke visualisere.

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 Indhold med dine tilpassede selectors efter første gang, du gengiver det.

Sidehastighedsindvirkning #

Tilføjelsen af et eksternt værktøj som Clerk.js vil øge den tid, det tager at indlæse dit site, men det er ubetydeligt i forhold til 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 stort, så det indlæses meget hurtigt.

Det indlæses også asynkront, hvilket betyder, at resten af siden indlæses, mens Clerk.js gengiver indhold.

En øget indlæsningstid for en side kommer oftest fra at indlæse flere billeder end før, da Clerk’s søgninger og Recommendations fungerer bedst, når de er visuelt tiltalende.

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

For eksempel, hvis billeder i Recommendations har en opløsning på 400x400px i desktop-visning, så send billeder i en opløsning på højst 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 listet 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 i enhver hjemmeside.

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

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

At have en cache-udløb på 60 minutter betyder, at når vi udgiver nye funktioner, vil de være tilgængelige for alle inden for maksimalt 60 minutter.

Jo længere cache-tiden er, desto længere tid tager det, før alle har adgang til de nyeste funktioner.

Det vigtige er, at slutbrugeren kun behøver at downloade Clerk.js én gang når nye funktioner er tilgængelige.

Cache-udløbstiden på 60 minutter betyder blot, at slutbrugerens browser vil tjekke ind hos Clerk hver 60 minutter.

Hvis der ikke er foretaget ændringer i Clerk.js, vil der ikke blive downloadet noget.

Cache-udløbstiden på 60 minutter er dermed et afvejet kompromis mellem at minimere webforespørgsler og at få adgang til de nyeste funktioner og forbedringer.

De fleste sessioner varer under 60 minutter, og derfor vil anmodningen kun blive lavet én gang pr. session.

Som du kan se på skærmbilledet, er dette en normal praksis, der (såvel som Clerk) bruges af Google Analytics, Facebook, Trustpilot og mange andre.

CLS-indvirkning #

Cumulative Layout Shift (CLS) kan have en negativ indvirkning på SEO og brugeroplevelsen, når dynamisk indlejret indhold flytter elementer på en side.

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

Du kan læse mere om CLS her.

Følg denne retningslinje kun i tilfælde af, at din CLS-score er højere end 0.2 og Clerk-elementerne er over folden.

For at forhindre indhold i at flytte sig, er der behov for at reservere en pladsholder til Clerk recommendations før Clerk.js indsprøjter dem.

For at gøre dette skal vi tilføje en minimumshøjde baseret på forventet indholdshøjde.

Eksempel på kode:

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

Foretag 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 anmoder om 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 foretager API-kald, kan du bruge callback-funktioner til at håndtere svaret, som du finder passende.

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

Nedenfor er et eksempel, der opretter en liste af HTML-elementer, der linker 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);
      }
  }
)

Add-to-cart-knapper #

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

Fordi Clerk’s designs består af HTML & CSS, kan du normalt tilføje denne funktionalitet, hvis du forstår, hvordan den fungerer på dit site.

Generel tilgang #

Nogle add-to-cart-knapper kræver JavaScript for at køre, for at de kan fungere.

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

Tjek hvordan du gør dette i vores udviklerdokumenter her.

Undersøg add-to-cart-knappen for at identificere den kode, der er forbundet med den, f.eks. på en kategori-side.

Koden vil normalt være et <div> eller et <button>-element.

Kopier hele knappe-HTML’en.

Kopier og indsæt denne kode i dit Design.

Nu skal du identificere variablerne i koden.

Mest ofte skal du finde, hvor koden bruger:

  • Produkt-ID

  • Produktantal

Erstat værdierne for produkt-ID med Liquid-variablerne for disse datapunkter.

ID’et vil altid være {{ product.id }} og mængden vil variere afhængigt af, hvordan du sender dataene.

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

Sæt din kode ind i HTML’en i dit Design og test den for at sikre, at den fungerer.

Eksempel #

Nedenstående add-to-cart-knap er et <div> der har klassen button-container:

Add-To-Cart example

Mængden findes inde i kurvlakken efter /cart?add= og Produkt-ID’et findes lige efter &id_product=.

Produkt-ID’et refereres også i data-id-product, og produktets mængde refereres i .data-minimal_quantity.

Disse værdier bør erstattes med Liquid-tags i Designet, så de relevante Produkt-ID’er og mængder bruges i HTML-outputtet.

Med disse ændringer vil den endelige add-to-cart-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 til konsollen, som du kan bruge til at fejlfinde 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 fejlfinde fejlen selv, eller sende den til vores support-team, der vil hjælpe dig.

Nedenfor finder du en liste over de mest almindelige fejl.

Ukendt indhold #

Denne fejl vises, hvis snippet’en, du indsatte, refererer til et Indhold, der ikke findes, i attributen data-template.

For at rette dette, skal du sikre, at navnet i embed-koden matcher en Content-blok, du har oprettet i my.clerk.io.

Content ID

Ugyldigt API-endpoint #

Denne fejl opstår, hvis du har brugt klassen clerk et sted i dit 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 dette, skal du sikre dig at navngive klassen noget andet, som f.eks. clerk-product.

Ugyldigt produktargument #

Denne fejl betyder, at den leverede ID for et produkt har forkert datatype eller syntaks.

For eksempel, hvis dine produkt-ID’er er tal, skal de også være det i embed-koden.

Husk også parenteserne omkring ID’et, for at gøre det til en liste.

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

Manglende argument #

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

Sørg for at inkludere alle nødvendige data attributes i salgs-sporingen.

Ingen kald foretaget #

Hvis du ikke kan se kaldet til sale selv med begge scripts installeret, er der noget, der har fået Clerk.js-skriptet til at blive indlæst forkert.

Test dette ved at følge disse trin:

  1. Åbn din browsers Konsol.

  2. Skriv “Clerk”.

  3. Hvis Clerk.js ikke er blevet indlæst korrekt, vil du se en ReferenceError:

Uncaught ReferenceError: Clerk is not defined

Hvis dette er tilfældet, skal du tjekke din Clerk.js-opsætning:

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

  • Sørg for, at det ikke blokkeres af anden JavaScript-funktionalitet.

Ingen Clerk-påvirkning #

Hvis du med succes sporer salg i my.clerk.io, men ingen af dem vises som påvirket af Clerk, kan du have en fejl i din visitor-tracking / click-tracking-opsætning.

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

  1. Klik på et hvilket som helst produkt gennem Clerk’s Search eller Recommendations.

  2. Fortsæt med at afgive en ordre, der indeholder dette produkt.

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

  4. Vent på, at ordren vises.

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

Orders overview

Hvis du ikke ser nogen værdi tilføjet i den ordre, du har afgivet, viser de følgende sektioner almindelige fejl, der kan forårsage dette.

API-opsætninger #

Hvis du har opsat Clerk med en tilpasset integration direkte med API’et, skal du aktivt aktivere visitor-tracking.

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

Forkerte produkt-ID’er #

For visitor-tracking at fungere, skal klik- og salgs-sporing have de samme produkt-ID’er som dem, vi modtager i importøren.

Normalt hvis dette ikke virker skyldes det, at du sporer variant-ID’er i stedet for forældres ID’er eller SKU i stedet for ID.

Wrong Product IDs

For at kontrollere, om dette er problemet, gør følgende:

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

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

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

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

Besøgende-ID ændringer #

Clerk bruger et besøgende-ID til at identificere hver enkelt session, inklusive de produkter, de klikker og køber.

På grund af dette bør ID’erne forblive de samme gennem mindst hele sessionen, og fortrinsvis på tværs af flere sessioner også.

Dette besøgende-ID oprettes automatisk, når man bruger Clerk.js til opsætningen, men hvis du bruger en API-opsætning, eller tilpasser dine besøgende-ID’er, kan du ved et uheld ændre det.

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

  1. Åbn dine Network-indstillinger i din browser, og indsnævr resultaterne til “clerk”.

  2. Start med at tjekke en af de undefined-kald, som er relateret til søgning eller Recommendations.

  3. I payload kan du tjekke den aktuelle Besøgende-ID. Du vil kunne gøre det for alle kald forbundet med Clerk.

  4. Fortsæt med at klikke på produktet, og afgiv en ordre med dette produkt.

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

  6. Sørg for, at visitor i payload matcher den Visitor ID, du så i trin 3.

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

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

Opdater din kode, så den bruger det samme besøgende-ID for hver side.

Opgradering til Clerk.js 2 #

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

Det gør installation af Clerk på enhver webshop lettere.

Da de to versioner imidlertid fungerer lidt forskelligt, skal du følge disse trin for at opgradere med succes.

De to væsentligste forskelle i Clerk.js 2 er:

  • Designene i my.clerk.io bruger Liquid, men de kan også nemt oprettes ved hjælp af Design Editor.

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

Opret designs #

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

Du kan oprette dine Clerk.js 2-designs enten ved at gentage dem i Design Editor, eller ved at konvertere dine gamle kode-designs til Liquid, hvilket nedenstående vejledning forklarer, hvordan du gør.

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

Design Editor-alternativ #

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

  2. Vælg en design-type andet 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, klik på ethvert eksisterende element som navn, billede, knap osv. for at redigere det, eller tilføj nye elementer til designet.

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

  5. Gå til Recommendations/Search > Elements og skift din Clerk Content til at bruge dit nye Design, hvorefter du klikker på Update Content.

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

Konvertering af designs #

Da Clerk.js 2 bruger det mere fleksible template-sprog 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 Opret design.

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

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

  6. Kopier din gamle Clerk.js 1 Design over til dit nye Clerk.js 2 Design.

    • Du vil bemærke, at der ikke er ingen Container Code i din nye.

    • Dette skyldes, at Liquid bruger for-løkker til at gengive alle produkterne.

    • Kopier din gamle Product HTML inde i for-løkken, din gamle Container Code omkring den og kopiér også CSS’en.

  7. Konverter designet til Liquid’s syntaks. Hovedforskellen er, at de gamle designs brugte syntaksen {{ formatter attribute }}, mens v2’s syntaks er {{ product.attribute | formatter }}.

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

  9. Hvis du bruger {{#if}} eller {{#is}}-udtryk, 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å en 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 Opdater design for at gemme ændringerne.

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

  3. Klik Opdater indhold. Dette vil midlertidigt få dem til ikke at vises på din webshop, indtil du er færdig med Trin 2. Vælg det nye Design for alt indhold, der skal opdateres.

Erstat script #

  1. Find skabelonfilen, der bruges til at vise alle sider af webshoppen, og hvor det oprindelige Clerk.js-script findes tæt ved bunden.

  2. Fjern det gamle Clerk.js-script fra filen. Det vil se ud omtrent således:

<!-- 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. Dette indeholder Clerk.js 2-koden.

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

Tillykke! Du kører nu på den meget forbedrede Clerk.js 2-opsætning!

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

Håndtering af require.js #

Denne sektion gælder kun ved brug af 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 det tracking-script, som du har indsat i bunden af alle sider.

Inkluder i Require.js #

Den bedste tilgang er at få Require.js til at genkende Clerk.

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

Insert Require Clerk.js 1

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

Ignore Require.js

Efter at have anvendt en af disse tilgange 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.