Any (webshop)

FAQ

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

Enkelt-sides apps (SPA) #

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, aktiverer Clerk.js biblioteket automatisk en funktion til at gengive alle Indhold blokke på den side.

Men for enkelt-sides apps, 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.

Inkluder Clerk.js #

Clerk.js skal kun indlæses én gang, når siden indlæses første gang. Efter dette vil biblioteket være tilgængeligt i hele sessionen. Inkluder det lige før </head> i dit HTML:

<!-- Start af 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>
<!-- Slut på Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Kontroller gengivelse #

Som standard gengiver Clerk.js alle elementer, der har klassen clerk, uanset om de er indsat under den indledende sideindlæsning eller når DOM muterer. 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 gøre disse trin i rækkefølge:

  • Tilføj Clerk-snippet til HTML med en unik vælger, du kan målrette.
  • Kør Clerk("content", "SELECTOR") for at gengive det.

Når besøgende forlader siden, skal du ødelægge snippetet og gengive det igen, hvis besøgende vender tilbage til den samme side. Dette er for at sikre, at Clerk.js ikke ser snippetet som tidligere gengivet, hvilket får det til ikke at 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 brugerdefinerede vælgere efter første gang, du gengiver det.

Indvirkning på Pagespeed #

At tilføje et eksternt værktøj som Clerk.js vil øge den tid, det tager at indlæse din side, men det er uanseligt sammenlignet med de ekstra konverteringer, det vil give. Nedenfor kan du se, hvordan det påvirker din sides ydeevne.

Ydeevne #

Clerk.js biblioteket er kun 37,5kb 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 indhold.

En stigning i indlæsningstiden for en side kommer oftest fra at indlæse flere billeder end tidligere, da Clarks søgeresultater og anbefalinger 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 størrelsen, de har i Clerk-elementerne.

For eksempel, hvis billeder i anbefalinger har en opløsning på 400x400px i desktopvisning, skal du sende billeder i en opløsning på maksimalt 420x420px eller lignende.

Google Page Speed #

Hvis du bruger Google Page Speed Insights eller et lignende værktøj til at analysere din sides ydeevne, kan du se Clerk.js opført under Udnyt browser caching.

Udnyt browser caching

Formålet med Clerk.js er at gøre det super enkelt at indsætte resultater fra Clerk.io 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 forbedrer eksisterende, er de inkluderet i Clerk.js og skal downloades af slutbrugeren for at bruge dem.

At have en cacheudløb på 60 minutter betyder, at når vi frigiver nye funktioner, vil de være tilgængelige for alle inden for maksimalt 60 minutter. Jo længere cachetid, jo længere tid tager det for alle at få adgang til de nyeste funktioner.

Det vigtige er, at slutbrugerne kun skal downloade Clerk.js én gang, når nye funktioner er tilgængelige.

Den 60 minutters cacheudløb betyder blot, at slutbrugerens browser vil tjekke ind med Clerk.io hver 60. minut. Hvis der ikke er foretaget ændringer i Clerk.js, vil intet blive downloadet.

Cacheudløbstiden på 60 minutter er således et kompromis mellem at minimere webanmodninger og at få nye funktioner og forbedringer. De fleste sessioner er kortere end 60 minutter, og derfor vil anmodningen kun blive foretaget én gang pr. session.

Som du kan se i skærmbilledet, er dette en normal praksis, der (sammen med Clerk.io) er brugt af Google Analytics, Facebook, Trustpilot og mange andre.

CLS Indvirkning #

Cumulative Layout Shift (CLS) kan negativt påvirke SEO og brugeroplevelsen, når dynamisk injiceret indhold flytter elementer på en side. I nogle tilfælde, blandt andre faktorer, 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-elementer er over folden.

For at forhindre indhold i at flytte, er der behov for at reservere en pladsholder til Clerk-anbefalinger, før Clerk.js injicerer dem. For at gøre dette skal vi tilføje en minimumshøjde baseret på den forventede indholdshøjde.

Eksempel på kode:

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

Foretage API-anmodninger #

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

Denne funktion tager 3 argumenter:

  • Et API-endpoint
  • Et JSON-ordbog med parametre
  • En callback-funktion til at håndtere svaret

Anmodninger #

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-anmodningen og resultatet.

Script #

function popularProducts(){
  Clerk("call",
    "recommendations/popular",
    {
      limit: 10,
      labels:["Hjemmeside / Bedst sælgende"]
    },
    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-anmodninger, kan du bruge callback-funktioner til at håndtere svaret, som du finder passende. Funktionerne tager response som et argument, som indeholder alle data, der returneres af API’en.

Nedenfor er et eksempel, der opretter en liste over HTML-elementer, der linker til kategorier, der matcher forespørgslen “mænd”.

Clerk("call",
  "search/categories",
  {
      'query': "mænd",
      'limit': "10"
  },
  function(response) {
      var cat = response.categories;
      if (cat.length > 0) {
          let heading = document.createElement('h3');
          heading.textContent = 'Relaterede Kategorier';
          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 de plugins, du bruger. Da Clerk-designs består af HTML & CSS, kan du normalt tilføje denne funktionalitet, hvis du forstår, hvordan det fungerer på din side.

Generel tilgang #

Nogle tilføj-til-kurv knapper kræver, at Javascript kører 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 udviklerdokumentation her.

Undersøg tilføj-til-kurv knappen for at identificere den kode, der er knyttet til den, f.eks. på en kategoriside. Koden vil normalt være et <div> eller et button element. Kopier hele knappen HTML.

Kopier og indsæt denne kode i dit Design. Nu skal du identificere variablerne i koden. Oftest skal du finde ud af, hvor koden bruger:

  • Produkt-ID
  • Produktmængde

Erstat værdierne for produkt-ID’et 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 }}.

Indsæt din kode i HTML’en af dit Design og test det for at sikre, at det fungerer.

Eksempel #

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

Tilføj-til-kurv eksempel

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

Produkt-ID’et 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 relevante produkt-ID’er og mængder bruges i HTML-outputtet.

Med disse ændringer vil den endelige tilføj-til-kurv knap se sådan 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="Tilføj til kurv" 
    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>

Almindelige konsolfejl #

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

Konsolfejl

Ved at klikke på fejl-linket får du flere oplysninger om, hvad der gik galt, som du kan bruge til at fejlfinde fejlen selv eller sende til vores supportteam, der vil hjælpe dig. Nedenfor finder du en liste over de mest almindelige fejl.

LogicalError: Ukendt indhold #

Denne fejl vises, hvis det snippet, du indsatte, refererer til et Indhold, der ikke eksisterer, i data-template attributten.

For at løse det, skal du sikre dig, at navnet i embedkoden matcher en Indhold blok, du har oprettet i my.clerk.io.

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

Indhold ID

AuthenticationError: Ugyldigt API-endpoint #

Denne fejl opstår, hvis du har brugt klassen clerk et eller andet 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 løse det, skal du sikre dig, at du navngiver klassen noget andet, som clerk-product.

ParsingError: Ugyldig type af argument produkt #

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

For eksempel, hvis dine produkt-ID’er er heltal, skal de også være det i embedkoden. 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>

ParsingError: Ugyldig type af argument kategori #

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

I de fleste tilfælde sker det, hvis pladsholderen i kategori embedkoden ikke er blevet erstattet med et faktisk ID:

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

Outputtet af koden skal indeholde ID’et for kategorien:

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

Hvis du kopierede snippetet manuelt, skal du sørge for at vælge dit shopsystem i Vælg din platform dropdown-menuen, før du kopierer snippetet. Det vil så ændre sig for at inkludere din platforms logik til at vælge det korrekte kategori-ID.

Hvis din platform ikke er opført, skal du manuelt tilføje logikken til at vælge det korrekte kategori-ID baseret på din webshops funktionalitet.

AuthenticationError: Forkert offentlig API-nøgle #

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

For at løse dette, log ind på my.clerk.io, og gå til Indstillinger > API-nøgler. Her kan du finde Offentlig API-nøgle, som du derefter kan tilføje til dit Clerk.js sporingsscript enten direkte i koden eller i indstillingerne for din integration, afhængigt af din platform.

Sending salgsdata fra et POS/ERP-system #

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 B2B-butik.

Clerk.io differentierer ikke mellem ordrer fra forskellige kilder - så længe du kan give en ID, et tidsstempel og en liste over produkter, der blev købt, kan de uploades til Clerk.io.

Den anbefalede tilgang er at bruge CRUD API, da det giver dig mulighed for at automatisere opgaven helt. Ved at implementere disse API-anmodninger kan du sende ordredata direkte til din butik i Clerk.io.

Opret blot en POST-anmodning 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 være i stand til at bruge offline ordrer til at booste dine online anbefalinger og søgeresultater.

Alternativt kan du manuelt uploade en CSV-fil uden behov for at kode noget. Du kan læse mere om CSV-filer her.

Valutaomregning #

Der er flere måder at arbejde med valutaomregning i Clerk.io. En enkel måde at få det til at fungere på er beskrevet nedenfor.

Send prisobjekter #

Clerk skal vide, hvad priserne er for hvert produkt i de forskellige valutaer. Den nemmeste måde at gøre dette på er at sende dem som et streng-kodet JSON-objekt af formaterede priser, med valuta-ISO som deres nøgle, i dit Data Feed.

"products": [
  {
    "id": 1,
    "name": "Ost",
    "description": "Et flot stykke ost.",
    "price": 100,
    "list_price": 50,
    "categories": [25, 42],
    "image": "http://example.com/images/products/1.jpg",
    "url": "http://example.com/product/1",
    "prices_formatted": "{'USD':'$100', 'EUR':'€ 87.70', 'GBP':'£ 68.68'}"
  },
  {
    "id": 2,
    "name": "Et pund nødder",
    "description": "Det er mange nødder!",
    "price": 150,
    "categories": [1],
    "image": "http://example.com/images/products/2.jpg",
    "url": "http://example.com/product/2",
    "prices_formatted": "{\"USD\":\"$150\", \"EUR\":\"€142\", \"GBP\":\"£120\"}"
  }
]

Opret en formatter #

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

Her kan du definere en funktion, der tager din pris-dict som argument og returnerer prisen for en specifik valuta, baseret på frontend-logik 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 #

Efter at have defineret formatteren, kan den bruges i dit design med nedenstående 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 en Event i Clerk.io, der indsætter den korrekte pris før produkterne bliver gengivet.

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

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

For at vise individuelle kunders priser, skal koden køre lige efter svaret.

Nedenfor er et eksempel på en simpel 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, som er hele svaret, som Clerk.io sender tilbage fra API’en.

Individuelle kunders priser #

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

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

Denne tilgang antager, at du kan se priser fra din server med et AJAX-opkald i frontend baseret på f.eks. en produkt-ID og en kunde-ID.

Den bedste måde er først at oprette en pladsholder til prisbeholderen i dit design og derefter erstatte den med den pris, der returneres fra dit AJAX-opkald.

Et eksempel:

<div class="clerk-price-container">
   <span class="clerk-price">
      Indlæser pris...
   </span>
</div>

Du kan derefter bruge Clerk-eventet til at vente på, at produkterne bliver gengivet, lave en anmodning til din prisserver ved hjælp af produkt-ID’et og ID’en for kunden, før du erstatter det i HTML.

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

<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>

Den ovenstående kode antager, 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, der er tilgængeligt i data-clerk-product-id, som tilføjes til alle produkter af Clerk.js.

Til sidst erstatter det den indre tekst, “Indlæser pris…”, i dette eksempel, med den pris, der returneres fra dit AJAX-opkald.

Kundegruppepriser #

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

  1. Inkluder de forskellige priser i data feedet
  2. Inkluder en variabel, der henter den aktuelle kundegruppe-ID
  3. Opret en funktion til at hente den relevante pris
  4. Vis prisen i Designet

Inkluder prisobjekter #

Start med at tilføje en attribut til alle produkter, som indeholder alle de forskellige prisoptioner, og sørg for at korrelere hver pris til en bestemt kundegruppe.

Dette skal sendes som et streng-kodet JSON-objekt. For eksempel:

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

Kunde-ID-variabel #

Tilføj en dynamisk global variabel til Clerk.js, som henter kundegruppe-ID for den aktuelle kunde og tilføjer den som værdien.

Kundegruppe-ID-værdien skal svare til nøglen for den tilsvarende pris i Data Feed. For eksempel, en bruger, der skal se prisen for gruppe 2, så skal ID’et være “GROUP2”.

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

Hent pris #

Du kan nu oprette en Formatter, som tager kunde_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øglen i pris-dict baseret på kunde_group ID.

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

Clerk('config', {
  globals: {
    customer_group: "GROUP2"
  },
  formatters: {
    getPrice: function (product) {
      const gid = window.Clerk._config.globals.customer_group;
      if (product.customer_group_prices) {
        const map = JSON.parse(product.customer_group_prices);
        if (map[gid]) {
            return map[gid];
        } else {
            return product.price;
        }
    } else {
        return product.price;
    }
    }
  }
});

Vis pris #

Når final_price formatteren er blevet oprettet, kan du navngive den direkte i dit Design, sammen med den kunde_group_prices liste, du oprettede i trin 1:

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

HTTP Auth Synkronisering #

Ofte bruges HTTP-godkendelse på staging-sider for at undgå uønskede besøgende.

Dette vil i mange tilfælde blokere Clerk-importøren og typisk vise en 401 Unauthorized fejl i synkroniseringsloggen.

Du kan nemt verificere importøren ved at indsætte godkendelsesoplysningerne i import-URL’en som nedenfor, i Data Synkronisering på my.clerk.io:

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

Ingen sporede ordrer #

Clerk.io har brug for at spore salg fra webshoppen kontinuerligt for at holde resultaterne opdaterede med dine kunders adfærd. Nogle indstillinger i en webshop kan dog forårsage, at salgs-sporing fejler.

Nedenfor kan du finde ud af, hvordan du fejlretter salgs-sporing, når du bruger et Clerk.js setup, og se, hvad de mest almindelige problemer og løsninger er.

Før du starter #

Sørg for, at du har installeret:

Disse er nødvendige for at spore salg generelt, når du bruger et Clerk.js setup.

Tjek logs #

I de fleste tilfælde fejler salgs-sporing på grund af fejl i besøgende-ID’erne eller produkt-ID’erne i salgsanmodningen, der sendes til Clerk efter et køb er blevet gennemført. For at fejlfinde dette skal du lave en testordre.

Men i nogle tilfælde kan det være relateret til salgs-sporingsscriptet selv og kan fejlfindes ved at se på loggene i my.clerk.io > Data > Logs.

Hvis salgs-sporingen fejler på grund af en fejl i dit script, vil du ofte kunne se fejlen på denne side. Klik Detaljer for at se mere.

Fejl Detaljer

Hvis du ikke kan se nogen fejl i loggene, er den nemmeste måde at identificere andre salgs-sporingsproblemer at placere en testordre.

Testordre Fejlretning #

I dette eksempel bruger vi Chrome til at vise, hvordan man fejlretter salgs-sporing med en testordre, men andre browsere har lignende funktioner.

  1. På din webshop, læg et par produkter i kurven.
  2. Gå videre til Checkout.
  3. Før du afgiver ordren, skal du åbne din browsers Konsol.
  4. Find Netværk, og søg efter " clerk".
  5. Afgiv ordren, så du ser ordrebekræftelsessiden.
  6. Klik på opkaldet, der starter med sale (normalt sale?key=…).

Her vil du se de data, der sendes til og modtages af salgs-sporings API-endpointet. Klik på Preview for at identificere eventuelle fejl, der kan forårsage, at salg ikke spores.

Nedenfor er almindelige fejl, der er forbundet med salgs-sporing.

Ugyldig syntaks i argument: produkter #

Denne fejl opstår, hvis de produkt-ID’er, du sender, har en forkert syntaks. De mest almindelige fejl er:

  • Produkt-ID’erne er streng-kodet i salgs-sporingen, men du bruger heltal i Clerk.io eller omvendt.
  • Listen over produkt-ID’er indeholder tekst-formaterings tegn i stedet for ren JSON: "products":\[\\"id"\\:\\"123-m"\\\].

Manglende argument X #

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

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

Ingen opkald foretaget #

Hvis du ikke kan se opkaldet til sale, selv med begge scripts installeret, så har noget forårsaget, at Clerk.js scriptet er blevet indlæst forkert. Test dette ved at følge disse trin:

  1. Åbn Konsollen i din browser
  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 dit Clerk.js setup:

  • Sørg for, at Clerk.js er installeret på alle sider.
  • Sørg for, at det ikke blokeres af anden JavaScript-funktionalitet.

Ingen Clerk Indvirkning #

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

Start med at sikre dig, at besøgende-sporing fungerer ved at gøre følgende:

  1. Klik på ethvert produkt gennem Clerk.io’s Søg eller Anbefalinger
  2. Gå videre til at placere en ordre, der indeholder dette produkt
  3. Log ind på my.clerk.io og gå til Ordredetaljer
  4. Vent på, at ordren vises.

Hvis besøgende-sporing fungerer, vil du se værdien og indflydelsen fra det produkt, du tilføjede gennem Clerk.io, i Sporede Ordrer:

Sporede Ordrer

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

API-opsætninger #

Hvis du opsatte Clerk.io med en brugerdefineret integration direkte med API’en, skal du aktivt aktivere besøgende-sporing. Læs hvordan du gør det i denne API-artikel.

Forkerte produkt-ID’er #

For at besøgende-sporing kan fungere, skal klik- og salgs-sporingen spore de samme produkt-ID’er som dem, vi modtager i importøren. Normalt, hvis dette ikke fungerer, skyldes det, at du sporer variant-ID’er i stedet for parent-ID’er eller SKU i stedet for ID.

Forkerte Produkt-ID'er

For at tjekke, om dette er problemet, skal du gøre følgende:

  1. I my.clerk.io, gå til Data > Ordrer og klik på ID’en for en ordre, du har afgivet.
  2. Hvis Clerk.io ikke kan identificere produktet, vil du se en ID og billede pladsholder:
  3. Gå til Data > Produkter og søg efter navnet på det produkt, du tilføjede. 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.io bruger et besøgende-ID til at identificere hver enkelt session, inklusive de produkter, de klikker på og køber. På grund af dette skal ID’erne forblive de samme i hele sessionen og helst på tværs af flere sessioner også.

Dette besøgende-ID oprettes automatisk, når du bruger Clerk.js til at gøre 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 tjekke besøgende-ID’et ved at følge disse trin:

  1. Åbn dine Netværk indstillinger i browseren, og indsnævr resultaterne til “clerk”.
  2. Start med at tjekke nogen af de undefined opkald, der er relateret til søgning eller anbefalinger.
  3. I payload kan du tjekke det aktuelle Besøgende-ID. Du vil kunne gøre dette for alle opkald, der er knyttet til Clerk.io
  4. Gå videre til at klikke på produktet og placere en ordre med dette produkt.
  5. På Ordre Succes siden, tjek dit Netværk igen, og find opkaldet til sale?.
  6. Sørg for, at visitor i payload, matcher det Besøgende-ID, du så i trin 3.

Hvis visitor ID’erne ikke stemmer overens, skal du finde ud af, hvorfor de ændrer sig. En almindelig årsag til, at besøgende-ID’er ændrer sig, kan være, hvis du regenererer ID’erne for hver ny side, der indlæses. Opdater din kode til at bruge det samme besøgende-ID for hver side.

Opgradering til Clerk.js 2 #

Clerk.js 2 er en hurtigere og meget mere fleksibel version af vores JavaScript-bibliotek, der gør installationen af Clerk.io på enhver webshop til en leg.

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

De to hovedforskelle i Clerk.js 2 er:

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

  • Scriptet skal indsættes lige før 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 lave dem igen i Design Editor, eller ved at konvertere din gamle kode Designs til Liquid, som den nedenstående guide forklarer, hvordan man gør.

Mulighed 1: Design Editor Designs #

  1. Gå til my.clerk.io > Recommendations/Search > Designs > New Design.
  2. Vælg en design type, der ikke er Blank og giv det et navn. Vi anbefaler at tilføje “V2”, så det er tydeligt, at du bruger Clerk.js 2 designs til dette.
  3. I Design Editor, klik på et af de eksisterende elementer som navn, billede, knap osv. for at redigere det, eller tilføj nye elementer til designet.
  4. Klik på Publicer Design, når du er færdig, og gå til Trin 2 i guiden.
  5. Til sidst, gå til Recommendations/Search > Content og ændre dit Clerk.io indhold til at bruge dit nye design, og klik derefter på Update Content.
  6. Dette vil midlertidigt få dem til ikke at vises på din webshop, indtil du har indsat Clerk.js 2 som beskrevet længere nede i denne guide.

Mulighed 2: Konvertering af Designs #

Da Clerk.js 2 bruger det mere fleksible template language Liquid, skal du konvertere designene til dette sprog.

  1. Start med at 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 til dette.
  3. Klik på Opret Design.
  4. Dette vil give dig et blankt design med produkt HTML og CSS, som du kan bruge.
  5. Gå tilbage til designoversigten og klik på 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. Nu skal du kopiere det gamle Clerk.js 1 design til dit nye Clerk.js 2 design.
    • Du vil bemærke, at der ikke er Container Code i dit nye design.
    • Dette skyldes, at Liquid bruger for loops til at gengive alle produkterne.
    • Kopier dit gamle Product HTML inden i for-loopet, dit gamle Container Code omkring det og kopier også CSS.
  7. Konverter designet til Liquids syntaks. Den vigtigste forskel er, at de gamle designs brugte syntaksen {{ formatter attribute }}, mens v2’s syntaks er {{ product.attribute | formatter }}.
  8. Gå igennem alle dine attributter og ændre dem til det nye format.
  9. Hvis du bruger {{#if}} eller {{#is}} udsagn, skal disse også konverteres. Brug syntaksen {% if product.attribute %} {% else %} {% endif %}.
  10. Slet id="{{ $id }}" og klassen :target fra container koden 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 #
// Produkt 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>Pris {{ money_eu list_price }}</s>
                </div>
                <span class="clerk-new-price">Pris {{ money_eu price }}</span>
            {{else}}
                <div class="clerk-product-price">Pris {{ money_eu price }}</div>
            {{/if}}
        </div>
    </a>
    <div class="clerk-cta-button btn button">Køb nu</div>
</li>

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

<!-- Denne kode opretter slideren ved dens 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>Pris {{ product.list_price | money_eu }}</s></span>
                    <span class="clerk-new-price">Pris {{ product.price | money_eu }}</span>
                {% else %}
                    <div class="clerk-product-price">Pris {{ product.price | money_eu }}</div>
                {% endif %}
            </div>
            <div class="clerk-cta-button btn button">Køb nu</div>
        </a>
    </li>
    {% endfor %}
</ul>
  1. Klik nu på Opdater Design for at gemme ændringerne.
  2. Til sidst, gå til Recommendations/Search > Content og ændre din indholdsblok til at bruge dit nye design.
  3. Klik på 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 scriptet #

  1. Start med at finde skabelonfilen, der bruges til at vise alle sider af webshoppen, og hvor den originale Clerk.js script findes nær bunden.
  2. Fjern det gamle Clerk.js script fra filen. Det vil se noget sådan ud:
<!-- Start af 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>
<!-- Slut af Clerk.io E-commerce Personalisation tool - www.clerk.io -->
  1. Gå til my.clerk.io > Settings > Tracking Code. Dette indeholder Clerk.js 2 koden.
  2. Kopier denne kode, indsæt den lige før </head> tagget i skabelonen, og gem det.

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, når du bruger Clerk.js 1.

I nogle opsætninger stopper Require.js Clerk.js fra at indlæse, hvilket betyder, at ingen sliders eller søgeresultater vil blive vist. 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. Begge tilgange kræver, at du foretager ændringer i tracking-scriptet, som du har indsat i bunden af alle sider.

Inkluder “clerk” i Require.js #

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

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

Insert Require Clerk.js 1

Ignorer Require.js #

Hvis den 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; i toppen af tracking-scriptet:

Ignore Require.js

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

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