Dit artikel is ook beschikbaar in:

[Maatwerk] DataLayer + Webhooks instellen

Het maatwerk instellen van de AdPage dataLayer & het instellen van maatwerk webhooks

Voordat je de implementatie kan beginnen moet je in het bezit zijn van een installatie link of toegang hebben tot het AdPage Tagging dashboard. De installatie link wordt meestal gedeeld via een automatische e-mail van AdPage en kan je ook ophalen vanuit het AdPage Tagging dashboard.

1. De scripts installeren

De scripts die je nodig hebt zijn te vinden in het AdPage Tagging dashboard onder het onderdeel "Implementatie" en dan "Installeer Pixel". Het platform moet staan op "Custom". Daarna verschijnen de installatie instructies als 2 verschillende stappen. 1 script dat geïnstalleerd moet worden in de <head> van je website en een 2e script dat geïnstalleerd moet worden in de <body> van je website. Deze scripts die worden toegevoegd zijn een vervanging van het standaard Google Tag Manager script. Zorg dan ook dat je het Google Tag Manager script weggehaald. Als je een installatie link hebt gekregen zullen de stappen al zichtbaar zijn op de link.

Note: Het is belangrijk om het originele Google Tag Manager script te verwijderen voordat je de AdPage scripts installeert. Het hebben van beide scripts kan leiden tot dubbele tracking en onnauwkeurige data. Controleer voor het verwijderen of de GTM-ID's hetzelfde zijn. Het kan namelijk zijn dat in sommige situaties ervoor gekozen wordt om een nieuwe tagmanager container aan te maken. Wanneer je het GTM-script van je oude container vervangt met een nieuwe container zullen alle tags van de oude container dus niet meer geactiveerd kunnen worden.

Als je website meerdere domeinnamen heeft moet je bovenstaande uitvoeren voor ieder domein.

2. De dataLayer installeren

2.1. user_data event

Het user_data event is het eerste even wat wij sturen op een website. Deze moet ook vóór andere dataLayer events worden toegevoegd. Dit event wordt namelijk gebruikt aan onze kant als start signaal in Google Tag Manager. Zonder het start signaal komt tracking data niet goed binnen.

Voor het user_data event heb je nog een ander script nodig wat op de volgende manier toe te voegen is (plaats het script in de body):

<script

  defer

  src="https://[Gekoppelde_domein_naam]/user-data-minified.js"

></script>

Note: Het gekoppelde domein kan je vinden op de installatie link. of in de AdPage Tagging dashboard onder het onderdeel "Implementatie" en dan "Domeinnaam". Ook hier geld dat voor meerdere domeinennamen de URL moeten worden aangepast.

Het bovenstaande script geeft toegang tot 2 javascript helper functies. Deze functies zijn:

window.taggingHelpers.getMarketingObject(); // Marketing object

window.taggingHelpers.getDeviceInfo(); // Device object

Vervolgens kan in javaScript het eerste user_data event worden gestuurd dit kan als volgt:

// Voer deze code pas uit als window.taggingHelpers beschikbaar is. Deze wordt namelijk met een defer tag ingeladen zodat het niet de website blokkeert.

window.dataLayer.push({

  event: "trytagging_user_data",

  marketing: window.taggingHelpers.getMarketingObject(),

  device: window.taggingHelpers.getDeviceInfo(),

});

Daarna moet het marketing in elk opvolgende event worden toegevoegd. Hierbij een voorbeeld van een view_item event:

window.dataLayer.push({

  event: "trytagging_view_item",

  ecommerce: {

    currency: "EUR",

    value: 100,

    items: [

      {

        item_id: "123456",

        item_name: "Product Name",

        price: 100,

        item_category: "Product Category",

      },

    ],

  },

  marketing: window.taggingHelpers.getMarketingObject(),

});

3. Het installeren van webhooks

Voor het nog beter (en nauwkeuriger) te kunnen meten van data werken wij met webhooks. Deze webhooks versturen wij in een eCommerce omgeving altijd op het moment dat er een bestelling wordt gemaakt, dit is namelijk de belangrijkste conversie.

Webhooks zijn een technischer onderdeel en vereisen wat meer configuratie aan de kant van de website. Als je dit maatwerk gaat toevoegen is het belangrijk om dit goed te testen.

Webhooks mogen gestuurd worden naar de volgende URL: https://[Gekoppelde_domein_naam]/order_created

3.1 De webhook payload

Voor een eCommerce website hanteren wij de volgende payload. Het is belangrijk dat deze payload wordt verstuurd in JSON format. en niet afwijkt van het voorbeeld. Dit aangezien dit een negatieve impact kan hebben op de tracking.

{

  "event": "trytagging_purchase",

  "ecommerce": {

    "transaction_id": "43",

    "affiliation": "",

    "value": 45.0,

    "tax": 0.0,

    "shipping": 0.0,

    "currency": "EUR",

    "coupon": "",

    "items": [

      {

        "item_name": "copy hoodiiiee",

        "item_id": "23",

        "price": 45.0,

        "quantity": 1,

        "index": 1

      }

    ]

  },

  "user_data": {

    "customer_id": 1,

    "customer_email": "jeroen@adpage.io",

    "customer_name": "Jeroen Test",

    "customer_phone": "0612345678",

    "customer_address": "Velmolenweg 54a",

    "customer_zip": "5404 LD",

    "customer_country": "NL",

    "customer_city": "Uden",

    "customer_state": "Provincie",

    "customer_country": "Netherlands",

    "billing_first_name": "Jeroen",

    "billing_last_name": "Test",

    "billing_address": "Velmolenweg 54a",

    "billing_postcode": "5404 LD",

    "billing_country": "NL",

    "billing_state": "",

    "billing_city": "Uden",

    "billing_email": "jeroen@adpage.io",

    "billing_phone": "0612345678",

    "shipping_first_name": "Jeroen",

    "shipping_last_name": "Test",

    "shipping_company": "",

    "shipping_address": "Velmolenweg 54a",

    "shipping_postcode": "5404 LD",

    "shipping_country": "NL",

    "shipping_state": "",

    "shipping_city": "Uden",

    "shipping_phone": "",

    "new_customer": false // Hier kan worden doorgegeven of de klant al eerder een bestelling heeft gemaakt.

  },

  "marketing": {

    // Front-end marketing data + het volgende veld:

    "ip": "ip_adres_van_de_bezoeker"

  }

}

3.2 Het marketing object

Het marketing object moet dus van de front-end afkomen. Hoe wij dit doen in onze eigen plugins is door tijdens het aanmaken van de order de marketing data cookie op te slaan bij de order notities. Zodra de order op betaald komt sturen wij deze cookie mee in de webhook. Het user-data script zorgt er al voor dat er een cookie wordt aangemaakt onder de naam "trytagging_user_data" dit is een base64 encoded JSON string.

Bijgewerkt op: 13/01/2025

Was dit artikel nuttig?

Dankuwel!