Installing the custom DataLayer

Please note: This article is intended for websites that use a custom system. At AdPage Tagging we try to use our own plugins/apps as much as possible, such as the WooCommerce Plugin and the Shopify Plugin.


Below you will find the requirements for correctly setting up the DataLayer, including example codes:

User cookie

Cookie that remains unique for the user and is also sent in the data layer and webhook. The script below can be used as an example for creating the cookie and generating the marketing object in the data layer.

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(), }); }); })();

trytagging_user_data
It is important that user data is available for every session. See an example of the user data event here:

you can use taggingHelpers.getMarketingObject() to generate the marketing object
You can use taggingHelpers.getDeviceInfo() to generate the device object

{ "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", }

Adding events

Below you will find examples of standard events that you can add. You can of course also choose to add custom events.

It is important that the marketing object is added to every event. See the example above and then the marketing object. The marketing object can be created via the above javascript with the function taggingHelpers.getMarketingObject()

More information about GA4's standard events can be found here:
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



What are the benefits of working with Webhooks?

The big advantage of webhooks is that all data sent from the webhook always arrives. It is therefore not possible that events or conversions are not the same or are not measured. For example, you could send Purchase orders or Refund events via Shopify. Add Event Parameters such as GA and Facebook cookies and channels are then able to link the purchase and refund event to the visitor journey.

Technical information about webhooks
After creating the order, we need a webhook event that the order has been paid. This can go to the url of tag manager and the path is /order_created. in JSON. You could also send a Webhook event for other events such as Refund. Then use /order_refund.

The ecommerce object must remain the same as the trytagging_purchase
The marketing object of the webhook event may be the same object as is controlled in the front-end under marketing. With the user client IP and user agent added. What we do with shop solutions such as Shopify is store the marketing object under the order notes that are not visible to the customer. Then we add it back to the webhook.

Example of the 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" } }

Updated: 22/09/2023

Updated on: 12/03/2024