Enhver (webshop)

Ofte stillede spørgsmål

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

Enkelside 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 pågældende side.

Men for enkelside apps, der bruger rammer som vue.js eller next.js, gengives sider 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 først indlæses. 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’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 følge disse trin i rækkefølge:

  • Tilføj Clerk-snippet til HTML’en 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 #

Tilføjelse af 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,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 indhold.

En stigning i indlæsningstiden for en side kommer oftest fra at indlæse flere billeder end tidligere, da Clerks 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, send 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 på enhver hjemmeside. Clerk.js indeholder mange funktioner til at håndtere sporing og UI-komponenter såsom Instant Search, sliders, popups og mere.

Når vi tilføjer nye UI-funktioner eller forbedrer eksisterende, bliver 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 cache-tid, jo længere tid tager det for alle at få adgang til de nyeste funktioner.

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

Cacheudløbstiden på 60 minutter betyder blot, at slutbrugerens browser vil tjekke ind hos Clerk.io hver 60. minut. Hvis der ikke er foretaget ændringer i Clerk.js, vil der ikke blive downloadet noget.

Cacheudløbstiden på 60 minutter er således en afvejning 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 (ligesom Clerk.io) også 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 indsat 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, hvis 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-opkald #

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

Denne funktion tager 3 argumenter:

  • Et API-endpoint
  • Et JSON-dictionary af 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-opkaldet 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]
  }
);

Callback-funktioner #

Når du foretager API-opkald, 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': "men",
      '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 Clerks designs består af HTML & CSS, kan du normalt tilføje denne funktionalitet, hvis du forstår, hvordan det fungerer på dit site.

Generel tilgang #

Nogle tilføj-til-kurv knapper kræver, at JavaScript kører for at fungere. I disse tilfælde kan du tilføje funktionaliteten til Clerks eksisterende cart metode. Tjek hvordan du gør dette i vores udviklerdokumentation her.

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

Kopier og indsæt denne kode i dit Design. Nu skal du identificere variablerne i koden. Ofte 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 i dit Design og test det for at sikre, at det fungerer.

Eksempel #

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

Add-To-Cart example

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.

Console Errors

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, som 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 findes, i data-template attributten.

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

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

Content ID

AuthenticationError: 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 løse det, skal du sørge for, 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 indlejringskoden. Husk også klammerne 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 opstår det, hvis pladsholderen i kategori-indlejringskoden 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 derefter æ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.

Send salgdata fra et POS/ERP-system #

For nogle webshops er det relevant at uploade salgsdata fra andre systemer end selve webshoppen, 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-opkald kan du sende ordredata direkte til din butik i Clerk.io.

Opret blot et POST-opkald til /orders endpointet i dit ERP-system eller webshop, kør jobbet med regelmæssige intervaller, 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 uploade en CSV-fil manuelt, 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 er beskrevet nedenfor.

Send prisobjekter #

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

"products": [
  {
    "id": 1,
    "name": "Ost",
    "description": "Et fint stykke ost.",
    "price": 100,
    "list_price": 50,
    "categories": [25, 42],
    "image": "http://example.com/images/products/1.jpg",
    "url": "http://example.com/product/1",
    // Streng-enkodet JSON eksempel
    "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",
    // Streng-enkodet JSON eksempel
    "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 dit pris-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 #

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 kundepriser, skal koden køre lige efter svaret.

Nedenfor er et eksempel på en simpel begivenhed.

<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 forudsætter, at du kan slå priser op 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-begivenheden til at vente på, at produkterne bliver gengivet, lave en anmodning til din prisserver ved hjælp af produkt-ID’et og ID’et for kunden, før du erstatter det i HTML’en.

Her er et eksempel på at gøre 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 datafeedet
  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 et 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-enkodet 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’en 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 Feedet. For eksempel, hvis en bruger 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, 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øglen i pris-dictet baseret på customer_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 customer_group_prices liste, som 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 også 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 Sync på my.clerk.io:

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

Ingen sporede ordrer #

Clerk.io skal kontinuerligt spore salg fra webshoppen for at holde resultaterne opdaterede med dine kunders adfærd. Dog kan nogle indstillinger i en webshop forårsage, at salgssporingen fejler.

Nedenfor kan du finde ud af, hvordan du fejlretter salgssporingen, 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 en Clerk.js opsætning.

Tjek logfiler #

I de fleste tilfælde fejler salgssporing på grund af fejl i besøgende-ID’erne eller produkt-ID’erne for salgskaldet, 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 salgssporingsscriptet selv og kan fejlrettes ved at se på logfilerne i my.clerk.io > Data > Logs.

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

Error Details

Hvis du ikke kan se nogen fejl i logfilerne, er den nemmeste måde at identificere andre salgssporingsproblemer at placere en testordre.

Testordre Fejlretning #

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

  1. På din webshop, læg et par produkter i kurven.
  2. Gå 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å kaldet, der starter med sale (normalt sale?key=…).

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

Nedenfor er almindelige fejl forbundet med salgssporing.

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-enkodet i salgssporingen, men du bruger heltal i Clerk.io eller omvendt.
  • Listen over produkt-ID’er indeholder tekstformaterings 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 salgssporingen.

Ingen kald lavet #

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

  1. Åbn Konsol 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 din Clerk.js opsætning:

  • Sørg for, at Clerk.js er installeret på alle sider.
  • Sørg for, at det ikke er blokeret 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, at besøgende-sporing fungerer, ved at gøre følgende:

  1. Klik på et hvilket som helst produkt gennem Clerk.io’s Søgning eller Anbefalinger
  2. Gå videre til at afgøre 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 indvirkningen fra det produkt, du tilføjede gennem Clerk.io, i Sporede Ordrer:

Tracked Orders

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øgendes-sporing. Læs hvordan du gør det i denne API-artikel.

Forkerte produkt-ID’er #

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

Wrong Product IDs

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’et 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 det forventede ID for produktet.

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

Besøgende-ID-ændringer #

Clerk.io bruger en besøgende-ID til at identificere hver enkelt session, herunder de produkter, de klikker på og køber. På grund af dette skal ID’erne forblive de samme i hele sessionen og helst også på tværs af flere sessioner.

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

Denne fejl er sjælden, men du kan tjekke besøgende-ID’en 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 undefined kald, der er relateret til søgning eller anbefalinger.
  3. I payload kan du tjekke den aktuelle Besøgende-ID. Du vil kunne gøre dette for alle kald, der er knyttet til Clerk.io
  4. Gå videre til at klikke på produktet, og afgiv en ordre med dette produkt.
  5. På Ordre Succes siden, tjek dit Netværk igen, og find kaldet til sale?.
  6. Sørg for, at visitor i payload, matcher den 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 den 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:

  • Designs 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.

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

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 den 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å Publish 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 vise sig 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 designs til dette sprog.

  1. Start med at gå til my.clerk.io >Recommendations/Search > Designs > New Design.
  2. Vælg Blank > Code og giv den et navn. Vi anbefaler at tilføje “V2”, så det er tydeligt, at du bruger Clerk.js 2 designs til dette.
  3. Klik på Create Design.
  4. Dette vil give dig et tomt design med produkt HTML og CSS, som du kan bruge.
  5. Gå tilbage til designoversigten 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. 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.
    • Dette skyldes, at Liquid bruger for loops til at gengive alle produkterne.
    • Kopier dit gamle Product HTML inside for-loopet, dit gamle Container Code around det og kopier også CSS’en.
  7. Konverter designet til Liquids syntaks. Den største 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>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>

<!-- Denne kode opretter slideren ved hjælp af 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>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 nu på Update 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å Update Content. Dette vil midlertidigt få dem til ikke at vise sig 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 nogenlunde 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 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 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.