Custom DataLayer installation

1) Create pixel in AdPage Dashboard.

After creation of the pixel, you'll get the following options:



Custom cooky name:
This cookie name is used for the feature cookie keeper. This cookie should be set by the server and should contain a unique value for the user that ideally lasts for 1 year or longer. If you do not want to use the cookie keeper feature or if it is not possible, you can leave it at the default value. The cookie keeper feature is only active when a cookie is found.

2) Installation of our marketing helpers

After linking a domain name, you will have access to our marketing helpers. This is a JavaScript file that assists in correctly generating the marketing object. The marketing object is a JavaScript object that contains self-generated and cookie values. This object is essential for setting up, especially in combination with webhooks.

The script is available through following URL:

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

It gives access to following JavaScript functions:

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

These functions can be used later in the DataLayer. The marketing object will also be used to send in webhooks later on.

3) Installation of DataLayer

The first event that is always used is the user_data event. This event contains the marketing object and the device info. Below is an example of the 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"
  }
}

The device object and marketing object are currently being created by our marketing helper script in the step above. The marketing object is also added to all events you send in the data layer.

The other events are based on the goal of installation, for example, for an ecommerce site, you can use the standard ecommerce events. Also, check out this link from Google for more information:
Google recommended events

For questions about this, it is best to contact our support department.

4) Instellen van de webhook

A webhook can be sent on different events, here are a few examples:

- on the purchase event in an online store

- on a form submission (for example, if the website's goal is to generate more quotes)

The most important aspect of the webhook is that it contains the same marketing object used in the front-end. In many of our plugins, this marketing object is stored with an order so that it is always available to send events.

Below is an example of a custom webhook for ecommerce (it is important to maintain this structure for ecommerce as many functionalities in the system follow this structure).

Send webhook event to following 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",
    "ip": "ipadres_of_the_visitor"
  }
}

5) Instellen of GTM serverside with Webhooks:

Setting up webhooks

Updated on: 15/11/2024