Pixeltracking op de post-purchasepagina

Let op

Trackingscripts zijn geavanceerde aanpassingen die niet worden ondersteund door het ondersteuningsteam van Shopify. Hiervoor is kennis van webontwerptaal zoals HTML, CSS, JavaScript en Liquid vereist. Als je niet vertrouwd bent met het werken met scripts, kun je overwegen om een Shopify-partner in te huren.

Als je winkel een app heeft geïnstalleerd die een post-purchasepagina toevoegt aan de checkout van je winkel, kan elke aangepaste pixeltracking die je in je winkel gebruikt, bepaalde tracking-events mogelijk niet vastleggen. Aangepaste trackingpixels die zijn toegevoegd aan de Extra scripts van je winkel, volgen alleen events op de bestelstatuspagina, die wordt weergegeven na de post-purchasepagina in de checkout. Als een klant je winkel verlaat op de post-purchasepagina, worden er geen events op de bestelstatuspagina bijgehouden.

Om ervoor te zorgen dat je conversie-events correct vastlegt, kun je een script toevoegen dat events bijhoudt op de post-purchasepagina. Dit script kan ook aanvullende aankopen volgen die worden gedaan vanaf de post-purchasepagina, zoals upsells. Nadat je een script voor een post-purchasepagina hebt toegevoegd, moet je het script van de bestelstatuspagina aanpassen om events te negeren die al zijn vastgelegd door het script van de post-purchasepagina.

Je hoeft de manier waarop je winkel events bijhoudt alleen te wijzigen als je een aangepaste trackingpixel gebruikt. Als je bijvoorbeeld Google Analytics instelt via Onlinewinkel > Voorkeuren, worden events al correct vastgelegd op je post-purchasepagina.

Overwegingen

Het extra script op de post-purchasepagina is vergelijkbaar met aanvullende scripts voor de bestelstatuspagina, maar met een paar belangrijke verschillen:

• Het script wordt toegevoegd aan de post-purchasepagina, niet aan de bestelstatuspagina.
• In het veld kan alleen JavaScript worden gebruikt. Liquid-code wordt niet geaccepteerd.
• De enige HTML-tag die is toegestaan, is <script>.
• Het script wordt in een sandbox uitgevoerd en is niet opgenomen op de hoofdpagina.
• Je kunt een script voor je post-purchasepagina alleen toevoegen als je winkel een app heeft geïnstalleerd waarmee een post-purchasepagina aan je checkout wordt toegevoegd.

Als je het script in een sandbox uitvoert, zorg er dan voor dat het script veilig is en voor het beoogde doel wordt gebruikt.

Shopify Support kan niet helpen met scripts voor post-purchasepagina's. Als je hulp nodig hebt, kun je in de Shopify Community posten of een Shopify-partner inhuren.

Compatibiliteit met scripts op de bestelstatuspagina

Om ervoor te zorgen dat je pixels alle conversie-events correct volgen, stel je trackingscripts in op zowel de post-purchasepagina als de bestelstatuspagina. Om te voorkomen dat conversie-events twee keer worden geteld, kun je de Liquid-variabele post_purchase_page_accessed gebruiken in scripts die op de bestelstatuspagina worden uitgevoerd.

Als een klant op de post-purchasepagina landt en vervolgens naar de bestelstatuspagina navigeert, retourneert de variabele post_purchase_page_accessed true. Als een klant niet op de post-purchasepagina aankomt, wordt de variabele false geretourneerd.

Je kunt bijvoorbeeld de volgende indeling gebruiken voor je scripts op de bestelstatuspagina:

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

Beschikbare API's

Je kunt JavaScript Globals gebruiken om trackingscripts toegang te geven tot de gegevens die ze nodig hebben. De toegankelijke gegevens zijn beschikbaar onder window.Shopify.

Aankopen volgen die op de post-purchasepagina zijn gemaakt

Als je extra aankopen wilt volgen die worden gedaan via de post-purchasepagina, kun je het event Shopify.on aanroepen.

Na het aanroepen van het event, vinden de volgende acties plaats, telkens wanneer een wijzigingenset voor de post-purchasepagina is toegepast:

• Je handler wordt aangeroepen met twee argumenten van het type Bestelling: order en outdated order.
• De globals onder window.Shopify worden bijgewerkt, zodat de scripts de bijgewerkte gegevens kunnen gebruiken.

Handlers die zijn toegekend aan dit event, kunnen maar 500 ms hebben om uit te voeren. Zorg ervoor dat je van tevoren eventuele afhankelijkheden laadt die je nodig hebt.

Het script voor de post-purchasepagina toevoegen

Voordat je het post-purchasepaginascript toevoegt, stel je het Google- en YouTube-kanaal in of download je een externe post-purchase-app, als je het post-purchaseveld wilt weergeven in het Shopify-beheercentrum.

Stappen:

1. Ga in het Shopify-beheercentrum naar Instellingen > Checkout.
2. Voer in het veld Aanvullende scripts voor post-purchsepagina je script in.
3. Klik op Opslaan.

Voorbeeldscript

Je kunt het volgende basisscripttemplate gebruiken om je te helpen je eigen script voor je bedankpagina te maken. Dit voorbeeldscript gebruikt Google Analytics om de eerste conversie bij te houden en legt uit hoe je aanvullende aankopen kunt bijhouden. Dit voorbeeld is erg eenvoudig en je uiteindelijke script zal er waarschijnlijk van verschillen.

Voorbeeld scriptbestanden

Voorbeeldscript voor de bestelstatuspagina:

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

Voorbeeldscript voor de post-purchasepagina:

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

Naslag

De volgende tabel bevat de typedefinities voor de attributen die zijn blootgesteld aan aanvullende scripts voor bedankpagina's via window.Shopify:

Veld	Definitie
window.Shopify
shop	De gegevens van de winkel van waar de bestelling is geplaatst.
order	De gegevens van de bestelling.
pageUrl	De URL van de huidige pagina.
wasPostPurchasePageSeen	Of de klant bij de checkout de post-purchasepagina heeft bekeken. Voor de eerste keer wordt false weergegeven, en in andere gevallen wordt true weergegeven, bijvoorbeeld wanneer de pagina opnieuw wordt geladen.
on(event: string, handler: function): void	Is toegekend aan event. Momenteel wordt alleen het event CheckoutAmended ondersteund.
off(event: string, handler: function): void	Verwijdert handler van het opgegeven event. Momenteel wordt alleen het event CheckoutAmended ondersteund.
Shop
id	De ID van de winkel.
currency	De valuta van de winkel in de indeling ISO 4217. Bijvoorbeeld USD. Raadpleeg shop.currency voor meer informatie.
Order
id	De interne identifier van de bestelling.
number	De integere weergave van de bestellingsnaam. Bijvoorbeeld 1025.
checkoutToken	De interne ID van de checkout.
customer	De klant die aan de bestelling is gekoppeld.
lineItem	De orderregels voor de bestelling.
subtotalPrice	De subtotaalprijs van alle artikelen in de bestelling nadat zowel regelitem- als winkelwagenkortingen zijn toegepast. Het subtotaal omvat geen belastingen (tenzij belastingen zijn inbegrepen in de prijzen), verzendkosten of tips.
totalPrice	De totale prijs van de bestelling.
currency	De ISO 4217-code van de valuta van de bestelling.
discounts	De som van het bedrag van de kortingen dat op de bestelling wordt toegepast.
Customer
id	De ID van de klant.
email	Het e-mailadres van de klant.
acceptsMarketing	Of de klant marketing heeft geaccepteerd. Dit is true als de klant marketing accepteert, en false als dat niet zo is.
hasAccount	Of het e-mailadres van de klant is gekoppeld aan een klantaccount. Dit is true als het e-mailadres wordt vermeld op een klantaccount, en false als dat niet zo is. Raadpleeg voor meer informatie de customer.has_account.
firstName	De voornaam van de klant.
lastName	De achternaam van de klant.
ordersCount	Het totale aantal bestellingen dat de klant heeft geplaatst.
totalSpent	Het totale bedrag dat de klant aan alle bestellingen heeft uitgegeven.
LineItem
finalLinePrice	De gecombineerde prijs van alle artikelen in de orderregel. Dit is gelijk aan line_item.final_price vermenigvuldigd met line_item.quantity.
finalPrice	De prijs van de orderregel, inclusief alle kortingsbedragen op regelniveau.
lineLevelTotalDiscount	Het totale bedrag van alle kortingen dat specifiek op de regel wordt toegepast. Dit omvat geen kortingen die aan de winkelwagen zijn toegevoegd.
optionsWithValues	Een matrix met geselecteerde waarden uit de productopties van het artikel. Raadpleeg voor meer informatie line_item.options_with_values.
originalLinePrice	De gecombineerde prijs van het aantal artikelen dat is opgenomen in de regel, voordat kortingen zijn toegepast. Dit is gelijk aan line_item.original_price vermenigvuldigd met line_item.quantity.
originalPrice	De oorspronkelijke prijs van de orderregel voordat kortingen zijn toegepast.
price	De eenheidsprijs van de orderregel. De prijs weerspiegelt eventuele kortingen die worden toegepast op de orderregel. Alleen beschikbaar voor winkels in Duitsland of Frankrijk.
product	Het product van de orderregel.
properties	Een matrix met aangepaste gegevens voor een artikel dat aan de winkelwagen is toegevoegd. Raadpleeg voor meer informatie line_item.properties.
quantity	De hoeveelheid van de orderregel.
title	De titel van de orderregel. Raadpleeg voor meer informatie line_item.title.
variant	De variant van de orderregel.
Product
id	De ID van het product.
type	Het type product.
ProductVariant
id	De ID van de variant.
sku	De SKU van de variant.
CartDiscount
id	De interne ID van de kortingstoepassing.
code	De code van de korting, als deze er een heeft.
type	Het type korting. Mogelijke waarden zijn: automatic, discount_code, manual en script .
amount	Het totale bedrag aan korting waarmee de prijs van de bestelling is verminderd.