Let op: Dit artikel is bedoeld voor websites die gebruik maken van een maatwerk systeem. Bij AdPage Tagging proberen we zo veel mogelijk gebruik te maken van eigen gemaakte plugins/apps zoals de WooCommerce Plugin en de Shopify Plugin.


Onderstaand vind je de requirements voor het juist instellen van de DataLayer inclusief voorbeeld codes:

User cookie
Cookie die uniek blijft voor de gebruiker die ook mee wordt gestuurd in de datalayer en webhook. Onderstaand script kan gebruikt worden als voorbeeld voor het maken van de cookie en het generen van het marketing object in de datalayer.

var taggingUserIdCookieName = "tagging_user_id";

var taggingHelpers = {
  getCookie: function (name) {
    const cookies = document.cookie.split("; ");
    for (const cookie of cookies) {
      const [cookieName, cookieValue] = cookie.split("=");
      if (cookieName === name) {
        return decodeURIComponent(cookieValue);
      }
    }
    return null;
  },
  setCookie: function (name, value, daysToExpire) {
    const expires = new Date();
    expires.setTime(expires.getTime() + daysToExpire * 24 * 60 * 60 * 1000);
    document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
  },
  generateUUID: function () {
    const segment = () =>
      Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
    return `${segment()}${segment()}-${segment()}-${segment()}-${segment()}-${segment()}${segment()}${segment()}`;
  },
  getDeviceInfo: function () {
    const screenResolution = `${window.screen.width}x${window.screen.height}`;
    const viewportSize = `${
      window.innerWidth || document.documentElement.clientWidth
    }x${window.innerHeight || document.documentElement.clientHeight}`;
    const encoding = document.characterSet || document.charset || "";
    const language = (
      navigator.language ||
      navigator.userLanguage ||
      ""
    ).toLowerCase();
    const colorDepth = `${window.screen.colorDepth}-bit`;

    return {
      screen_resolution: screenResolution,
      viewport_size: viewportSize,
      encoding: encoding,
      language: language,
      colors: colorDepth,
    };
  },
  getMarketingObject: function () {
    const cookieData = {};
    const analyticsCookies = {};
    const sessionId = {};
    const sessionCount = {};

    // Add all cookies that start with _ga_
    const cookies = document.cookie.split("; ");
    for (const cookie of cookies) {
      const cookieObj = cookie.split("=");
      if (cookieObj[0].startsWith("_ga_")) {
        analyticsCookies[cookieObj[0]] = cookieObj[1];
        sessionId[cookieObj[0]] = cookieObj[1].split(".")[2];
        sessionCount[cookieObj[0]] = cookieObj[1].split(".")[3];
      }
    }

    cookieData.user_id = taggingHelpers.getCookie(taggingUserIdCookieName);
    cookieData._ga = taggingHelpers.getCookie("_ga");
    cookieData._fbp = taggingHelpers.getCookie("_fbp");
    cookieData._fbc = taggingHelpers.getCookie("_fbc");

    let clientId = "";

		if (taggingHelpers.getCookie("_ga")) {
		  clientId = taggingHelpers.getCookie("_ga") ;
		  const clientIdParts = clientId.split('.');
		  clientId = clientIdParts[2] + '.' + clientIdParts[3];
		}

    cookieData.client_id = clientId;
    cookieData.session_id = sessionId;
    cookieData.session_count = sessionCount;
    return cookieData;
  },
};

(function () {
  document.addEventListener("DOMContentLoaded", function () {
    if (taggingHelpers.getCookie(taggingUserIdCookieName) === null) {
      taggingHelpers.setCookie(
        taggingUserIdCookieName,
        taggingHelpers.generateUUID(),
        365
      );
    }

    console.log({
      marketing: taggingHelpers.getMarketingObject(),
      device: taggingHelpers.getDeviceInfo(),
    });
  });
})();

DataLayer events

trytagging_user_data
Bij elke sessie is het belangrijk dat gebruikersdata beschikbaar is. Zie hier een voorbeeld van het user data event:

voor het generen van het marketing object kan je taggingHelpers.getMarketingObject() gebruiken
voor het generen van het device object kan je taggingHelpers.getDeviceInfo() gebruiken

{
   "event": "trytagging_user_data",
   "device": {
      "screen_resolution": "2560x1440",
      "viewport_size": "1271x1363",
      "encoding": "UTF-8",
      "language": "en-us",
      "colors": "24-bit"
   },
   "cart_total": 0,
   "page": {
      "title": "Document title"
   },
   "marketing": {
      "user_id": "24fce0e2-ebc3-fec6-0f0e-1154ee203aeb",
      "_ga": "GA1.1.1977170070.1692017518",
      "_fbp": "fb.1.1692017517655.435054448",
      "_fbc": null,
      "client_id": "1977170070.1692017518",
      "session_id": {
          "_ga_XXX": "1692627109"
      },
      "session_count": {
          "_ga_XXX": "9"
      }
   },
   "event_time": "2023-08-21T14:19:14.438Z",
}

Toevoegen van events
Onderstaand vind je voorbeelden van standaard events die je kan toevoegen. Je kunt er natuurlijk ook voor kiezen om custom events toe te voegen.

Bij elk event is het belangrijk dat het marketing object wordt toegevoegd. Zie bovenstaande voorbeeld en dan het marketing object. Het marketing object kan gemaakt worden via bovenstaande javascript met de functie taggingHelpers.getMarketingObject()

Meer informatie over de standaard events van GA4 vind je hier:
trytagging_view_item
https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtm#view_item_details

trytagging_view_item_list
https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtm#select_an_item_from_a_list

trytagging_begin_checkout
trytagging_add_shipping_info
trytagging_add_payment_info
https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtm#initiate_the_checkout_process

trytagging_add_to_cart
trytagging_view_cart
trytagging_remove_from_cart
https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtm#add_or_remove_an_item_from_a_shopping_cart

trytagging_purchase
https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtm#make_a_purchase_or_issue_a_refund

Toevoegen van webhooks

Wat levert het op om met Webhooks te werken?
Het grote voordeel van webhooks is dat alle data die vanuit de webhook wordt gestuurd ook altijd binnenkomt. Het kan dus niet zo zijn dat events of conversies niet gelijk zijn of niet gemeten worden. Via Shopify zou je bijvoorbeeld Purchase orders kunnen sturen of Refund events. Voeg daar Event Parameters aan toe zoals GA en Facebook cookies en kanalen zijn dan ook in staat om het purchase en refund event te koppelen aan de bezoekerreis.

Technische informatie over webhooks
Na het aanmaken van de order hebben we een webhook event nodig van dat de order betaald is. Deze mag naar de url van tag manager en het path is dan /order_created. in JSON. Je zou ook een Webhook event kunnen sturen voor andere events zoals Refund. Gebruik dan /order_refund.

Het ecommerce object moet gelijk blijven met het trytagging_purchase
Marketing object van het webhook event mag het zelfde object zijn als in de front-end wordt gestuurd onder marketing. Met daaraan toegevoegd de user client ip en user agent. Wat wij doen met shop oplossing zoals Shopify is het marketing object opslaan onder de order notities die niet zichtbaar zijn voor de klant. Dan voegen wij die weer toe aan de webhook.

Voorbeeld van het webhook event:

{
  "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": {
    "client_id": "148223934.1685878331",
    "session_id": {
      "H0L2HGP1BV": "1687960108",
      "W9CLGRX92R": "1694003767"
    },
    "session_count": {
      "H0L2HGP1BV": "2",
      "W9CLGRX92R": "11"
    },
    "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36",
    "client_ip": "185.116.00.00"
  }
}

Bijgewerkt op: 22/09/2023