Pikselsporing på etterkjøpssiden

Advarsel

Sporingsskript er avanserte tilpasninger som ikke støttes av Shopifys støtteteam. Kunnskap om webdesign-språk som HTML, CSS, JavaScript og Liquid kreves. Du bør vurdere å leie inn en Shopify-ekspert hvis du ikke er komfortabel med å jobbe med skript.

Hvis butikken har installert en app som legger til en etterkjøpsside i butikkens kasse, kan det hende at egendefinert pikselsporing som brukes i butikken ikke registrerer visse sporingshendelser. Egendefinerte sporingspiksler som legges til butikkens Ytterligere skript-boks sporer bare hendelser på statussiden, som kommer etter etterkjøpssiden i kassen. Hvis en kunde forlater butikken på etterkjøpssiden, blir det ikke sporet noen hendelser på statussiden.

For å sikre at du registrerer konverteringshendelser på riktig måte, kan du legge til et skript som sporer hendelser på etterkjøpssiden. Dette skriptet kan også spore ytterligere kjøp som gjøres fra etterkjøpssiden, som mersalg. Når du har lagt til et skript på etterkjøpssiden, må du justere skriptet på statussiden slik at det ignorerer hendelser som allerede er registrert av skriptet på etterkjøpssiden.

Du må bare endre hvordan butikken sporer hendelser hvis du bruker en egendefinert sporingspiksel. Hvis du for eksempel konfigurerer Google Analytics gjennom Nettbutikk > Preferanser, registrerer det allerede hendelser på etterkjøpssiden.

Hensyn

Tilleggsskriptet på etterkjøpssiden ligner på ytterligere skript på statussiden, men har noen viktige forskjeller:

• Skriptet legges til på etterkjøpssiden, ikke på statussiden.
• Feltet tillater bare JavaScript. Liquid-kode godtas ikke.
• Den eneste HTML-taggen som tillates er <script>.
• Skriptet kjører i en sandkasse, og er ikke inkludert på hovedsiden.
• Du kan bare legge til et skript på etterkjøpssiden hvis butikken har installert en app som legger til en etterkjøpsside i kassen.

Ved å kjøre skriptet i en sandkasse sikres det at skriptet er sikkert, og at det brukes for det tiltenkte formålet.

Shopify-brukerstøtte kan ikke hjelpe med skript på etterkjøpssiden. Hvis du trenger hjelp, kan du publisere et innlegg i Shopify-fellesskapet eller leie inn en Shopify-ekspert.

Kompatibilitet med skript på statussiden

For å sikre at pikslene sporer alle konverteringshendelser på riktig måte, må du konfigurere sporingsskript på både etterkjøpssiden og statussiden. For å unngå at konverteringshendelser telles to ganger, kan du bruke Liquid-variabelen post_purchase_page_accessed i skript som kjører på statussiden.

Hvis en kunde lander på etterkjøpssiden og deretter går til statussiden, returnerer variabelen post_purchase_page_accessed true. Hvis en kunde ikke kommer til etterkjøpssiden, returnerer variabelen false.

Du kan for eksempel bruke følgende format for skriptene dine på statussiden:

{% if first_time_accessed == true and post_purchase_page_accessed == false %}
<script>
   // insert your tracking script
</script>
{% endif %}

Tilgjengelige API-er

Du kan bruke JavaScript-globaler for å gi sporingsskript tilgang til dataene de trenger. Tilgjengelige data er tilgjengelig under window.Shopify.

Spore kjøp gjort på etterkjøpssiden

For å spore ytterligere kjøp som gjøres gjennom etterkjøpssiden, kan du abonnere på hendelsen Shopify.on.

Etter at du abonnerer skjer følgende hendelser når det legges til et endringssett for etterkjøp:

• Behandleren kalles med to argumenter av Bestilling-type: order og outdated order.
• Globalene under window.Shopify oppdateres slik at skriptene kan bruke de oppdaterte dataene.

Behandlere som abonnerer på denne hendelsen kan ha så lite som 500 ms på å kjøre. Sørg for å laste inn nødvendige avhengigheter på forhånd.

Legg til skriptet på etterkjøpssiden

1. Fra Shopify-administrator går du til Innstillinger > Kasse.
2. Angi skriptet i feltet Ytterligere skript for etterkjøp.
3. Klikk på Lagre.

Eksempelskript

Du kan bruke følgende grunnleggende skriptmal som en hjelp til å bygge egne skript for etterkjøpssiden. Dette eksempelskriptet bruker Google Analytics til å spore den innledende konverteringen, og forklarer hvordan du sporer ytterligere kjøp. Dette eksempelet er svært enkelt, og det endelige skriptet vil sannsynligvis avvike fra dette.

Eksempel på skriptfiler

Eksempelskript for statussiden:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-FYNQ742HTX"></script>
<script>
(function() {
  // make sure the initial conversion isn't tracked twice
  {% if first_time_accessed == false or post_purchase_page_accessed == true %}
    return;
  {% endif %}
  // set up google analytics
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());
  gtag('config', 'G-FYNQ742HTX');
  // track initial conversion
  var order = window.Shopify.order;

  gtag('event', 'purchase', {
    affiliation: 'My Shopify Store',
    transaction_id: Number(order.id).toString(),
    value: order.totalPrice,
    currency: order.currency,
    items: order.lineItems.map((item) => ({
      id: Number(item.id).toString(),
      name: item.title,
      category: item.product.type,
      price: item.price,
      quantity: item.quantity,
      variant: Number(item.variant.sku).toString(),
    })),
  });
})();
</script>

Eksempelskript for etterkjøpssiden:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-FYNQ742HTX"></script>
<script>
(function() {
  // set up google analytics
  window.dataLayer = window.dataLayer || [];

  function gtag() {
    dataLayer.push(arguments);
  }

  gtag('js', new Date());
  gtag('config', 'G-FYNQ742HTX');

  // make sure the initial conversion isn't tracked twice
  if (!Shopify.wasPostPurchasePageSeen) {
    var order = window.Shopify.order;

    // track initial conversion
    gtag('event', 'purchase', {
      affiliation: 'My Shopify Store',
      transaction_id: Number(order.id).toString(),
      value: order.totalPrice,
      currency: order.currency,
      items: order.lineItems.map(function(item) {
        return {
          id: Number(item.id).toString(),
          name: item.title,
          category: item.product.type,
          price: item.price,
          quantity: item.quantity,
          variant: Number(item.variant.sku).toString(),
        };
      }),
    });
  }

  // set up additional conversion tracking
  Shopify.on('CheckoutAmended', function(newOrder, previousOrder) {
    // identify which items were recently added, if any
    var oldItems = previousOrder.lineItems.map(function (line) { return line.id; });

    var addedItems = newOrder.lineItems.filter(
      function (line) { return oldItems.indexOf(line.id) < 0; }
    );

    // no new items were added, so we skip conversion tracking
    if (addedItems.length === 0) {
      return;
    }

    // track additional purchase
    gtag('event', 'purchase', {
      affiliation: 'My Shopify Store',
      transaction_id: Number(order.id).toString(),
      value: order.totalPrice,
      currency: order.currency,
      items: addedItems.map(function (item) {
        return {
          id: Number(item.id).toString(),
          name: item.title,
          category: item.product.type,
          price: item.price,
          quantity: item.quantity,
          variant: Number(item.variant.sku).toString(),
        };
      }),
    });
  });
})();
</script>

Referanser

Den følgende tabellen inneholder typedefinisjoner for attributtene som eksponeres for ytterligere skript for etterkjøp gjennom window.Shopify:

Felt	Definisjon
window.Shopify
shop	Detaljene for butikken der bestillingen ble lagt inn.
order	Detaljene for bestillingen.
pageUrl	URL-adressen til den gjeldende siden.
wasPostPurchasePageSeen	Hvorvidt kunden har sett etterkjøpssiden i denne betalingsprosessen. Den vil være usann hvis siden vises for første gang, og ellers sann, som hvis siden lastes inn på nytt.
on(event: string, handler: function): void	Abonnerer på en hendelse. For øyeblikket støttes bare CheckoutAmended-hendelsen.
off(event: string, handler: function): void	Avslutter abonnementet på handler fra oppgitt event. For øyeblikket støttes bare CheckoutAmended-hendelsen.
Shop
id	Butikkens ID.
currency	Butikkens valuta i ISO 4217-format. For eksempel USD. For mer informasjon kan du se shop.currency.
Order
id	Bestillingens interne identifikator.
number	Heltallsrepresentasjonen av bestillingsnavnet. For eksempel 1025.
checkoutToken	Kassens interne identifikator.
customer	Kunden som er tilknyttet bestillingen.
lineItem	Varelinjene i bestillingen.
subtotalPrice	Delsumsprisen for alle varene i bestillingen etter at rabatter for både varelinjer og handlekurven er trukket fra. Delsummen inkluderer ikke avgifter (med mindre avgifter er inkludert i prisene), fraktkostnader eller tips.
totalPrice	Totalprisen for bestillingen.
currency	ISO 4217-koden for bestillingens valuta.
discounts	Summen av rabattbeløpene som er lagt til i bestillingen.
Customer
id	Kundens ID.
email	Kundens e-postadresse.
acceptsMarketing	Hvorvidt kunden har godtatt markedsføring. Den er sann hvis kunden godtar markedsføring, og usann hvis ikke.
hasAccount	Hvorvidt kundens e-postadresse er knyttet til en kundekonto. Den vil være sann hvis e-posten er oppført i en kundekonto, og usann hvis ikke. For mer informasjon kan du se customer.has_account.
firstName	Fornavnet til kunden.
lastName	Etternavnet til kunden.
ordersCount	Det totale antallet bestillinger kunden har lagt inn.
totalSpent	Det totale beløpet kunden har brukt på alle bestillinger.
LineItem
finalLinePrice	Den kombinerte prisen for alle varer i varelinjen. Dette tilsvarer line_item.final_price multiplisert med line_item.quantity.
finalPrice	Prisen for varelinjen, inkludert alle rabattbeløp på varelinjenivå.
lineLevelTotalDiscount	Totalbeløpet for alle rabatter som er lagt til på den bestemte varelinjen. Dette inkluderer ikke rabatter som er lagt til i handlekurven.
optionsWithValues	En matrise med valgte verdier fra varens produktalternativer. For mer informasjon kan du se line_item.options_with_values.
originalLinePrice	Den kombinerte prisen for antall varer inkludert i linjen, før rabatter er lagt til. Dette tilsvarer line_item.original_price multiplisert med line_item.quantity.
originalPrice	Den opprinnelige prisen på varelinjen før rabatter er lagt til.
price	Enhetsprisen for varelinjen. Prisen reflekterer eventuelle rabatter som er lagt til varelinjen. Gjelder bare for butikker lokalisert i Tyskland eller Frankrike.
product	Produktet tilhørende varelinjen.
properties	En matrise med egendefinert informasjon for en vare som er lagt til i handlekurven. For mer informasjon kan du se line_item.properties.
quantity	Antallet av varelinjen.
title	Tittelen på varelinjen. For mer informasjon kan du se line_item.title.
variant	Varelinjens variant.
Product
id	Produktets ID.
type	Produkttypen.
ProductVariant
id	Variantens ID.
sku	Variantens SKU
CartDiscount
id	Den interne identifikatoren for rabattapplikasjonen.
code	Koden til rabatten, hvis den finnes.
type	Rabattypen. Mulige verdier er: automatic, discount_code, manual og script.
amount	Totalbeløpet som prisen for en bestilling reduseres med av rabatten.