Sign in

Welcome to our Support Center

Get help with integration and live campaigns

Welcome to our Support Center. Get help with integration and live campaigns

Step 1 Google Tag Manager: dataLayer

Overview

The dataLayer is a variable declared in the source code of your website on each page where you will implement the Criteo OneTag. It is not implemented through the Google Tag Manager website. The content of the dataLayer will determine what information is transmitted to us through the Criteo OneTag. Here are a few tips:

  • Implementation of the dataLayer is best performed by a developer or someone with suitable technical skills.
  • The content of the dataLayer will be used on the next step, through the variables on Google Tag Manager.
  • The dataLayer should be declared between <script></script> tags and BEFORE the Google Tag Manager tag is declared.
  • If you already have a dataLayer in place, you may need to update it if you don't have all the expected data in place. In this case, please be aware you may need to update your source code.

All pages

On the pages that feature the Criteo OneTag, the email variable should be added to the dataLayer. This will enable Criteo's Cross Device solution:

  • The user’s email address should be available when a purchase is made on your website, and if your website provides user accounts.
  • The email address must be trimmed of trailing spaces and converted to lowercase.
  • Criteo will then use md5-hashing to encrypt the email address on the fly before storing it on our servers. We will never store plain email addresses as this would go against our Privacy policy.
<script type="text/javascript">
dataLayer = dataLayer || [];
dataLayer.push({
'email': 'email address of the user'
});
</script>
  • If the user’s email address is not available on the current page, the parameter should be left as an empty string.
<script type="text/javascript">
dataLayer = dataLayer || [];
dataLayer.push({
'email': ''
});
</script>

Homepage dataLayer

  • The dataLayer needs to be implemented on your Homepage.
  • The PageType parameter will be used to tell Google Tag Manager what type of page the user is browsing and trigger the Criteo OneTag accordingly.
  • The code below shows how to implement the dataLayer on your Homepage:
<script type="text/javascript">
dataLayer = dataLayer || [];
dataLayer.push({
'PageType':'HomePage',
'email': 'email address of the user'
});
</script>

Listing page dataLayer

  • The dataLayer needs to be implemented on your Listing pages: category Listings and search Listings.
  • ProductID_1, ProductID_2 and ProductID_3 on the example below need to be replaced dynamically with three valid product ids from the Listing.
  • Note that we will attempt to match the ids provided here with the ids that are contained in your product feed. In case your system has more than one type of id, you need to ensure that the same id type is used consistently across all pages.
  • The code below shows how to implement the dataLayer on your Listing page:
<script type="text/javascript">
dataLayer = dataLayer || [];
dataLayer.push({
'PageType':'ListingPage',
'email': 'email address of the user',
'ProductIDList' : ['ProductID_1', 'ProductID_2', 'ProductID_3']
});
</script>

Product page dataLayer

  • The dataLayer needs to be implemented on your individual Product pages.
  • The ProductID parameter needs to be replaced dynamically with the product id of the currently browsed product. This id must be the same as the one contained in your product feed for a given product.
  • The code below shows how to implement the dataLayer on your Product page:
<script type="text/javascript">
dataLayer = dataLayer || [];
dataLayer.push({
'PageType': 'ProductPage',
'email': 'email address of the user',
'ProductID': 'ProductID'
});
</script>

Basket page dataLayer

  • The dataLayer needs to be implemented on your Basket/Cart page.
  • For each product contained in the basket, you must pass the product id, the quantity (number of units of the corresponding product), and the unit price.
  • The code below shows how to implement the dataLayer on your Basket page:
<script type="text/javascript">
var product_list = [];
product_list.push(
{ id: "productID_1", price: price_1, quantity: quantity_1 },
{ id: "productID_2", price: price_2, quantity: quantity_2 }
/* add a line for each item in the user's cart */
);
dataLayer = dataLayer || [];
dataLayer.push({
'PageType': 'BasketPage',
'email': 'email address of the user',
'ProductBasketProducts': product_list
});
</script>

Sales Confirmation page dataLayer

  • The dataLayer needs to be declared on the Sales Confirmation/Thank You page (shown after the user has placed their order and payment is confirmed).
  • The TransactionID parameter must be dynamically replaced with the corresponding order number. This information will be used to clean possible duplicates we might receive.
  • For each product purchased, you must pass the product id, the quantity (number of units of the corresponding product), and the unit price.
  • The code below shows how to implement the dataLayer on your Sales Confirmation page:
<script type="text/javascript">
var product_list = [];
product_list.push(
{ id: "productID_1", price: price_1, quantity: quantity_1 },
{ id: "productID_2", price: price_2, quantity: quantity_2 }
/* add a line for each item in the user's cart */
);
dataLayer = dataLayer || [];
dataLayer.push({
'PageType': 'TransactionPage',
'email': 'email address of the user',
'ProductTransactionProducts': product_list,
'TransactionID': 'TransactionID'
});
</script>

What's Next?

Now that the information Criteo needs is available in the dataLayer, Google Tag Manager needs to know how to read the dataLayer and take out the relevant data. This mechanism is called Variables. For more detail, see: Step 2: Variables

Was this article helpful?
0 out of 0 found this helpful
Powered by Zendesk