GTM - Criteo Datalayer - Manual Implementation¶

A guide to implement the Criteo dataLayer on your site and set up the variables, triggers and tags in GTM.

Overview¶

This guide will explain the setup of the Criteo dataLayer as well as the implementation of the Tags, Triggers, and Variables in GTM.

DataLayer¶

The Criteo dataLayer is a javascript variable that needs to push all required information. It needs to be declared on each page of your site in the source code. The Criteo dataLayer should be implemented on the following 5 page types on your website:

Homepage
Category / Listing
Product
Basket / Cart
Sales

[[disclaimer-developer]]

Tags, Triggers, and Variables¶

After the Criteo dataLayer is implemented, you will need to setup the following in your GTM:

Variables
Triggers
Tags

DataLayer¶

Homepage¶

Install the following dataLayer on the homepage of your website. Example URL: {{homepageurl}}

Field	Overview	Example	Syntax
event	Page type event	crto_homepage	Static string value
email	Plain-text or MD5 Hash	79054025255fb1a26e4bc422aef54eb4	String. Trimmed and lowercase 32 character, encoded in UTF-8

Structure¶

Dynamically replace fields surrounded by ## with users information. See Example

<!-- Criteo Homepage dataLayer -->
<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        event: 'crto_homepage',
        crto: {
            email: '##Users Email##' //can be empty string if email not known
        }
    });
</script>
<!-- END Criteo Homepage dataLayer -->

Example¶

<!-- Criteo Homepage dataLayer -->
<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        event: 'crto_homepage',
        crto: {
            email: 'crtotest@test.com'
        }
    });
</script>
<!-- END Criteo Homepage dataLayer -->

Category / Listing¶

Install the following dataLayer on the listing, category, and search results pages of your website. Example URL: {{homepageurl}}/category?id=categoryid1

Field	Overview	Example	Syntax
event	Page type event	crto_listingpage	Static string value
email	Plain-text or MD5 Hash	79054025255fb1a26e4bc422aef54eb4	String. Trimmed and lowercase 32 character, encoded in UTF-8
Product ID	unique ID of Product	ProductID_1	String

Structure¶

Dynamically replace fields surrounded by ## with users information. See Example

<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        event: 'crto_listingpage',
        crto: {
            email: '##Users Email##', //can be empty string if email not known
            products: ['##Product ID 1##', '##Product ID 2##', '##Product ID 3##']
        }
    });
</script>
<!-- END Criteo Category / Listing dataLayer -->

Example¶

<!-- Criteo Category / Listing dataLayer -->
<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        event: 'crto_listingpage',
        crto: {
            email: 'crtotest@test.com',
            products: ['ProductID_1', 'ProductID_2', 'ProductID_3']
        }
    });
</script>
<!-- END Criteo Category / Listing dataLayer -->

Product¶

Install the following dataLayer on the product detail pages of your website. Example URL: {{homepageurl}}/product?id=productid_1

Field	Overview	Example	Syntax
event	Page type event	crto_productpage	Static string value
email	Plain-text or MD5 Hash	79054025255fb1a26e4bc422aef54eb4	String. Trimmed and lowercase 32 character, encoded in UTF-8
Product ID	unique ID of Product	ProductID_1	String

Structure¶

Dynamically replace fields surrounded by ## with users information. See Example

<!-- Criteo Product dataLayer -->
<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        event: 'crto_productpage',
        crto: {
            email: '##Users Email##', //can be empty string if email not known
            products: ['##Product ID 1##']
        }
    });
</script>
<!-- END Criteo Product dataLayer -->

Example¶

<!-- Criteo Product dataLayer -->
<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        event: 'crto_productpage',
        crto: {
            email: 'crtotest@test.com',
            products: ['ProductID_1']
        }
    });
</script>
<!-- END Criteo Product dataLayer -->

Basket/Cart¶

Install the following dataLayer on the cart or basket page of your website. Example URL: {{homepageurl}}/cart

Field	Overview	Example	Syntax
event	Page type event	crto_basketpage	Static string value
email	Plain-text or MD5 Hash	79054025255fb1a26e4bc422aef54eb4	String. Trimmed and lowercase 32 character, encoded in UTF-8
Product ID	unique ID of Product	ProductID_1	String
price	unit price of product	200.99	String or Integer, excluding the currency symbol
quantity	number of units added	2	Integer

Structure¶

Dynamically replace fields surrounded by ## with users information. See Example

<!-- Criteo Basket/Cart dataLayer -->
<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        event: 'crto_basketpage',
        crto: {             
            email: '##Users Email##',  //can be empty string if email not known
            products: [{
                id: '##Product ID 1##',
                price: '##Product Unit Price##',
                quantity: '##Number of Units##'
            }] //add new object for each product added to cart.
        }
    });
</script>
<!-- END Criteo Basket/Cart dataLayer -->

Example¶

<!-- Criteo Basket/Cart dataLayer -->
<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        event: 'crto_basketpage',
        crto: {
            email: 'crtotest@test.com',
            products: [{
                id: 'ProductID_1',
                price: '200.99',
                quantity: '2'
            },
            {
                id:'ProductID_2',
                price: '50.00',
                quantity: '1'
            }]
        }
    });
</script>
<!-- END Criteo Basket/Cart dataLayer -->

Sales¶

Install the following dataLayer on the sales confirmation or Thank You page of your website. Example URL: {{homepageurl}}/thankyou

Field	Overview	Example	Syntax
event	Page type event	crto_transactionpage	Static string value
email	Plain-text or MD5 Hash	79054025255fb1a26e4bc422aef54eb4	String. Trimmed and lowercase 32 character, encoded in UTF-8
Product ID	unique ID of Product	ProductID_1	String
price	unit price of product	200.99	String or Integer, excluding the currency symbol
quantity	number of units added	2	Integer
transactionid	Confirmation or Order #	7654322	Integer. Unique ID

Structure¶

Dynamically replace fields surrounded by ## with users information. See Example

<!-- Criteo Sales dataLayer -->
<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        event: 'crto_transactionpage',
        crto: {
            email: '##Users Email##',  //can be empty string if email not known   
            transactionid: '##Order Number##',
            products: [{
                id: '##Product ID 1##',
                price: '##Product Unit Price##',
                quantity: '##Number of Units##'
            }] //add new object for each product added to cart.
        }
    });
</script>
<!-- END Criteo Sales dataLayer -->

Example¶

<!-- Criteo Sales dataLayer -->
<script type="text/javascript">
    var dataLayer = dataLayer || [];
    dataLayer.push({
        event: 'crto_transactionpage',
        crto: {             
            email: 'crtotest@test.com',
            transactionid: 'ORD00001',
            products: [{
                id: 'ProductID_1',
                price: '200.99',
                quantity: '2'
            },
            {
                id:'ProductID_2',
                price: '50.00',
                quantity: '1'
            }]
        }
    });
</script>
<!-- END Criteo Sales dataLayer -->

Variables¶

Steps¶

1 Click on Variables > New

2 Create the following 6 variables:

Criteo Email
Criteo Product IDs
Criteo Products
Criteo Site Type
Criteo Transaction ID
CriteoPartnerID

Criteo Email¶

Add the name Criteo Email
Select the Variable type Data Layer Variable
Add the Data Layer Varaible Name: crto.email
Save the Variable

Criteo Product IDs¶

Add the name Criteo Product IDs
Select the Variable type Custom JavaScript
Add the following code

function () {
    var products = {{Criteo Products}};
    var ids = [];
    for (var i = 0; i < products.length && i < 3; i++) {
        if (typeof products[i] == 'object') {
            if (products[i].hasOwnProperty('id')) {
                ids.push(products[i].id);
            }
        } else if (typeof products[i] == 'number' || typeof products[i] == 'string') {
            ids.push(products[i]);
        }
    }
    return ids;
}

Save the Variable

Criteo Products¶

Add the name Criteo Products
Select the Variable type Data Layer Variable
Add the Data Layer Varaible Name: crto.products
Save the Variable

Criteo Site Type¶

Add the name Criteo Site Type
Select the Variable type Custom JavaScript
Add the following code

function(){
  return /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d";
}

Save the Variable

Criteo Transaction ID¶

Add the name Criteo Transaction ID
Select the Variable type Data Layer Variable
Add the Data Layer Varaible Name: crto.transactionid
Save the Variable

CriteoPartnerID¶

Add the name CriteoPartnerID
Select the Variable type Constant
Add the Value: {{accountid}}
Save the Variable

Triggers¶

Steps¶

Click on Triggers > New
Create the 5 Triggers for each page type:
- Criteo Homepage Trigger
  - Trigger type: Custom Event
  - Event name: crto_homepage
  - Condition: Event equals crto_homepage
- Criteo Listingpage Trigger
  - Trigger type: Custom Event
  - Event name: crto_listingpage
  - Condition: Event equals crto_listingpage
- Criteo Productpage Trigger
  - Trigger type: Custom Event
  - Event name: crto_productpage
  - Condition: Event equals crto_productpage
- Criteo Basketpage Trigger
  - Trigger type: Custom Event
  - Event name: crto_basketpage
  - Condition: Event equals crto_basketpage
- Criteo Transactionpage Trigger
  - Trigger type: Custom Event
  - Event name: crto_transactionpage
  - Condition: Event equals crto_transactionpage
Give the Trigger a name. Example: Criteo Homepage Trigger
Choose trigger type Custom Event
Set the Event name to the corresponding dataLayer event for each trigger. Example: crto_homepage
Set the trigger conditions to the following for each page type:
Save the trigger
Repeat steps 1 to 6 for each of the 5 triggers

Tags¶

Steps¶

1 Click on New Tag

2 Give the Tag a name from the list below

Criteo Homepage Tag
Criteo Listing Tag
Criteo Product Tag
Criteo Basket Tag
Criteo Transaction Tag

3 Choose tag type Custom HTML

4 Copy and paste the following code in the HTML frame

Criteo Homepage Tag¶

<!-- Criteo GTM Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
  { event: "setAccount", account: {{CriteoPartnerID}} },
  { event: "setEmail", email: {{Criteo Email}} },
  { event: "setSiteType", type: {{Criteo Site Type}} },
  { event: "viewHome", tms: "gtm-criteo-2.0.0" }
);
</script>
<!-- End Criteo GTM Tag -->

Criteo Listing Tag¶


<!-- Criteo GTM Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
  { event: "setAccount", account: {{CriteoPartnerID}} },
  { event: "setEmail", email: {{Criteo Email}} },
  { event: "setSiteType", type: {{Criteo Site Type}} },
  { event: "viewList", tms: "gtm-criteo-2.0.0", item: {{Criteo Product IDs}} }
);
</script>
<!-- End Criteo GTM Tag -->

Criteo Product Tag¶

<!-- Criteo GTM Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
  { event: "setAccount", account: {{CriteoPartnerID}} },
  { event: "setEmail", email: {{Criteo Email}} },
  { event: "setSiteType", type: {{Criteo Site Type}} },
  { event: "viewItem", tms: "gtm-criteo-2.0.0", item: {{Criteo Products}} }
);
</script>
<!-- End Criteo GTM Tag -->

Criteo Basket Tag¶

<!-- Criteo GTM Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
  { event: "setAccount", account: {{CriteoPartnerID}} },
  { event: "setEmail", email: {{Criteo Email}} },
  { event: "setSiteType", type: {{Criteo Site Type}} },
  { event: "viewBasket", tms: "gtm-criteo-2.0.0", item: {{Criteo Products}} }
);
</script>
<!-- End Criteo GTM Tag -->

Criteo Transaction Tag¶

<!-- Criteo GTM Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
  { event: "setAccount", account: {{CriteoPartnerID}} },
  { event: "setEmail", email: {{Criteo Email}} },
  { event: "setSiteType", type: {{Criteo Site Type}} },
  { event: "trackTransaction", tms: "gtm-criteo-2.0.0", id: {{Criteo Transaction ID}}, item: {{Criteo Products}} }
);
</script>
<!-- End Criteo GTM Tag -->

5 Save the tag

6 Repeat steps 1 to 5 for each of the 5 Criteo tags

Verification¶

[[accurate]]

Field	Overview	Example	Syntax	Required
Email Address	Email address in plain text (if allowed by the law in your country), sha256 hashed email address or MD5 hashed email address.	79054025255fb1a26e4bc422aef54eb4...	- Plain text emails - Sha256 and md5 hashed emails	Required
Hash Method	The hashing method used for the email. - Doesn't need to be included for plain text emails - For sha265 hashed emails: "sha256" - For md5 hashed emails: "md5"	sha256	String	Required

Field

Overview

Example

Syntax

Required

Email Address

Email address in plain text (if allowed by the law in your country), sha256 hashed email address or MD5 hashed email address.

79054025255fb1a26e4bc422aef54eb4...

- Plain text emails
- Sha256 and md5 hashed emails

Required

Hash Method

The hashing method used for the email.
- Doesn't need to be included for plain text emails
- For sha265 hashed emails: "sha256"
- For md5 hashed emails: "md5"

sha256

String

Required

<script type="text/javascript"> window.criteo_q = window.criteo_q || []; var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d"; window.criteo_q.push( { event: "setAccount", account: YOUR_PARTNER_ID}, { event: "setEmail", email: "useremail@somedomain.com" }, { event: "setEmail", email: "", hash_method: "sha256" }, { event: "setEmail", email: "", hash_method: "md5" }, { event: "setSiteType", type: deviceType}, { event: "viewPage" } ); </script>

<script type="text/javascript"> window.criteo_q = window.criteo_q || []; var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d"; window.criteo_q.push( { event: "setAccount", account: YOUR_PARTNER_ID}, { event: "setEmail", email: "" }, { event: "setEmail", email: "79054025255fb1a26e4bc422aef54eb4...", hash_method: "sha256" }, { event: "setEmail", email: "3242asd342421...", hash_method: "md5" }, { event: "setSiteType", type: deviceType}, { event: "viewPage" } ); </script>

필드	개요	예시	구문	필수
Email Address	sha256 해시된 이메일 주소와 MD5 해시된 이메일 주소.	79054025255fb1a26e4bc422aef54eb4....	- sha256 및 md5 해시된 이메일	필수
Hash Method	이메일에 사용된 해싱 방법. - sha256 및 md5로 이메일을 해시화 할 것 - sha265 해시된 이메일의 경우: "sha256" - md5 해시된 이메일의 경우: "md5"	sha256, md5	문자열	필수

필드

개요

예시

구문

필수

Email Address

sha256 해시된 이메일 주소와 MD5 해시된 이메일 주소.

79054025255fb1a26e4bc422aef54eb4....

- sha256 및 md5 해시된 이메일

필수

Hash Method

이메일에 사용된 해싱 방법.
- sha256 및 md5로 이메일을 해시화 할 것
- sha265 해시된 이메일의 경우: "sha256"
- md5 해시된 이메일의 경우: "md5"

sha256, md5

문자열

필수

<script type="text/javascript"> window.criteo_q = window.criteo_q || []; var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d"; window.criteo_q.push( { event: "setAccount", account: YOUR_PARTNER_ID}, { event: "setEmail", email: "79054025255fb1a26e4bc422aef54eb4...", hash_method: "sha256" }, { event: "setEmail", email: "3242asd342421...", hash_method: "md5" }, { event: "setSiteType", type: deviceType}, { event: "viewPage" } ); </script>

GTM - Criteo Datalayer - Manual Implementation¶

Overview¶

DataLayer¶

Tags, Triggers, and Variables¶

DataLayer¶

Homepage¶

Structure¶

Example¶

Category / Listing¶

Structure¶

Example¶

Product¶

Structure¶

Example¶

Basket/Cart¶

Structure¶

Example¶

Sales¶

Structure¶

Example¶

Variables¶

Steps¶

Criteo Email¶

Criteo Product IDs¶

Criteo Products¶

Criteo Site Type¶

Criteo Transaction ID¶

CriteoPartnerID¶

Triggers¶

Steps¶

Tags¶

Steps¶

Criteo Homepage Tag¶

Criteo Listing Tag¶

Criteo Product Tag¶

Criteo Basket Tag¶

Criteo Transaction Tag¶

Verification¶

Plain text example

Hashed Emails Example

해시된 이메일 예시