Maatwerk instellen van de datalayer.

1) Maak een pixel aan het in het trytagging dashboard

Na het aanmaken van je container kan je een eigen pixel aanmaken. Tijdens de setup krijg je de volgende opties.



Custom cookie naam:
Deze cookie naam wordt gebruikt voor de feature cookie keeper. Deze cookie moet dan gezet worden door de server en moet een unieke waarde bevatten voor de user die in het beste geval 1 jaar of langer gezet wordt. Als je geen gebruik wilt maken van de cookie keeper feature of niet mogelijk is mag je deze op de standaard waarde laten staan. Cookie keeper staat namelijk alleen aan als er een cookie gevonden wordt.

2) Installeren van onze marketing helpers

Na het koppelen van een domein naam heb je toegang tot de onze marketing helpers. Dit is een javascript bestand wat helpt bij het correct genereren van het marketing object. Het marketing is een javascript object wat eigen genereerde en cookie waardes bevat. Dit object is essentieel voor het instellen vooral in combinatie met webhooks.

Het script is beschikbaar op de volgende url:

<script defer src="https://[Gekoppelde_domein_naam]/user-data-minified.js"></script>

Dit script geeft toegang tot de volgende javascript functies:

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

Deze functies kunnen later in de datalayer gebruikt worden. Ook wordt het marketing object gebruikt om later mee te versturen in webhooks.

3) Instellen van de datalayer

Het eerste event dat altijd gebruikt wordt is het user_data event. Dit event bevat het marketing object en de device info. Zie hieronder een voorbeeld van het user_data event:

{
  "device": {
    "screen_resolution": "5120x1440",
    "viewport_size": "1181x1363",
    "encoding": "UTF-8",
    "language": "en-gb",
    "colors": "24-bit"
  },
  "event": "trytagging_user_data",
  "marketing": {
    "_ga": "GA1.1.1818643883.1707129196",
    "_ga_LZN92VD7GK": "GS1.1.1711477035.19.0.1711477041.0.0.462628796",
    "user_id": "6fa957c2-52d9-905a-94fe-dfc53b5cef72",
    "client_id": "4132502f-435b-32c1-eaa4-84b37b95f846",
    "session_id": "1711477035",
    "session_count": 19,
    "fbp": null,
    "fbc": null,
    "gclid": null,
    "gbraid": null,
    "wbraid": null,
    "referrer": "",
    "utm_source": null,
    "utm_medium": null,
    "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36"
  }
}

Het device object en marketing object worden dus nu op dit moment aangemaakt door ons marketing helper script in de stap hierboven. Het marketing object wordt ook toegevoegd aan alle events die je verstuurd in de datalayer.

De overige events zijn dus op basis van wat het doel is van installatie voor bijvoorbeeld een ecommerce site kan je de standaard ecommerce events aan houden. Bekijk ook deze link van Google met meer informatie:
Google recommended events

Voor vragen hierover kan je ook het beste contact opnemen met onze support afdeling.

4) Instellen van de webhook

Een webhook kan op verschillende events gestuurd worden een paar voorbeelden:
- op het purchase event in een webshop
- op een formulier submit (denk bijvoorbeeld als de website als doel heeft meer offertes binnen te halen)

Het belangrijkste aan de webhook is dat die het zelfde marketing object bevat die ook in de front-end gebruikt wordt. In veel van onze plugins wordt dit marketing object opgeslagen bij een order zodat deze altijd beschikbaar is om events te sturen.

Hieronder een voorbeeld van custom webhook voor ecommerce (voor ecommerce is het belangrijk om deze structuur aan te houden omdat veel functionaliteiten in het systeem deze structuur hanteren)

Stuur een post webhook naar het volgende endpoint:
https://[Gekoppelde_domein_naam]/order_created

JSON payload:

{
  "event": "trytagging_purchase",
  "ecommerce": {
    "transaction_id": "43",
    "affiliation": "",
    "value": "45.00",
    "tax": "0.00",
    "shipping": "0.00",
    "currency": "EUR",
    "coupon": "",
    "items": [
      {
        "item_name": "copy hoodiiiee",
        "item_brand": "",
        "item_id": "23",
        "item_sku": "",
        "price": "45.00",
        "item_category": "Clothing",
        "quantity": 1,
        "index": 1
      }
    ]
  },
  "user_data": {
    "customer_id": 1,
    "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": "",
    "email": "jeroen@adpage.io",
    "first_name": "Jeroen",
    "last_name": "Test",
    "new_customer": "false"
  },
  "marketing": {
    "_ga": "GA1.1.1818643883.1707129196",
    "_ga_LZN92VD7GK": "GS1.1.1711477035.19.0.1711477041.0.0.462628796",
    "user_id": "6fa957c2-52d9-905a-94fe-dfc53b5cef72",
    "client_id": "4132502f-435b-32c1-eaa4-84b37b95f846",
    "session_id": "1711477035",
    "session_count": 19,
    "fbp": null,
    "fbc": null,
    "gclid": null,
    "gbraid": null,
    "wbraid": null,
    "referrer": "",
    "utm_source": null,
    "utm_medium": null,
    "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36"
  }
}

5) Instellen van Google Tag Manager

Dit onderdeel wordt nog verder uitgebreid.

Bijgewerkt op: 27/03/2024