This article is also available in:

[Custom] Installing DataLayer + Webhooks

Setting up custom AdPage dataLayer & configuring custom webhooks

Before you can begin implementation, you must have an installation link or access to the AdPage Tagging dashboard. The installation link is usually shared via an automatic email from AdPage and can also be retrieved from the AdPage Tagging dashboard.

1. Installing the scripts

The required scripts can be found in the AdPage Tagging dashboard under the "Implementation" section and then "Install Pixel". The platform should be set to "Custom". After this, the installation instructions will appear as 2 different steps. One script that needs to be installed in the <head> of your website and a second script that needs to be installed in the <body> of your website. These scripts that are added replace the standard Google Tag Manager script. Therefore, make sure you remove the Google Tag Manager script. If you have received an installation link, the steps will already be visible on the link.

Note: It is important to remove the original Google Tag Manager script before installing the AdPage scripts. Having both scripts can lead to double tracking and inaccurate data. Before removing, check if the GTM-IDs are the same. In some situations, it might be decided to create a new tag manager container. When you replace the GTM script of your old container with a new container, all tags from the old container will no longer be activated.

If your website has multiple domain names, you must perform the above for each domain.

2. Installing the dataLayer

2.1. user_data event

The user_data event is the first event we send on a website. This must be added before other dataLayer events. This event is used on our side as a start signal in Google Tag Manager. Without the start signal, tracking data will not come in properly.

For the user_data event, you need another script which can be added in the following way (place the script in the body):

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

Note: The linked domain can be found on the installation link or in the AdPage Tagging dashboard under the "Implementation" section and then "Domain Name". Here too, for multiple domain names, the URL must be adjusted.

The above script provides access to 2 javascript helper functions. These functions are:

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

Then the first user_data event can be sent in JavaScript as follows:

// Only execute this code when window.taggingHelpers is available. It is loaded with a defer tag so it doesn't block the website.
window.dataLayer.push({
event: "trytagging_user_data",
marketing: window.taggingHelpers.getMarketingObject(),
device: window.taggingHelpers.getDeviceInfo(),
});

After that, the marketing must be added to each subsequent event. Here's an example of a 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. Installing webhooks

To measure data even better (and more accurately), we work with webhooks. In an eCommerce environment, we always send these webhooks when an order is created, as this is the most important conversion.

Webhooks are a more technical component and require more configuration on the website's side. If you're going to add this customization, it's important to test it thoroughly.
Webhooks may be sent to the following URL: https://[Linked_domain_name]/order_created

3.1 The webhook payload

For an eCommerce website, we use the following payload. It is important that this payload is sent in JSON format and does not deviate from the example. This is because it can have a negative impact on 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": "Province",
"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 // Here you can pass whether the customer has made a previous order
},
"marketing": {
// Front-end marketing data + the following field:
"ip": "visitor_ip_address"
}
}

3.2 The marketing object

The marketing object must therefore come from the front-end. How we do this in our own plugins is by storing the marketing data cookie in the order notes when creating the order. When the order is marked as paid, we send this cookie along in the webhook. The user-data script already ensures that a cookie is created under the name "trytagging_user_data" which is a base64 encoded JSON string.

Updated on: 13/01/2025

Was this article helpful?

Thank you!