Store Intent Signals¶
A guide to implement dataLayer, Tags, Triggers, and Variables in GTM in order to capture physical store intent signals on your website.
Overview¶
This tutorial will explain how to install the specific Criteo Tags to capture different store intent signals that you are likely to have available on your website. We strongly advise that you implement all scenarios that are relevant to your site to maximize the performance of your store campaigns.
[[disclaimer-zipcode]]
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 pages on your website:
Tags, Triggers, and Variables¶
After the Criteo dataLayer is implemented, you will need to setup the following in your GTM:
DataLayer¶
'Recommended' or 'Favorite' Store¶
Install the following dataLayer when you get the 'Recommended' or 'Favorite' Store of the user on your website.
Field | Overview | Example | Syntax |
---|---|---|---|
event | Page type event | recommendedstore | Static string value |
zipcode | Deliery Zipcode | 75000 | String |
store_id | User's store_id | 26 | String |
Structure¶
Dynamically replace fields surrounded by ## with users information. See Example
<!-- Criteo Recommended store dataLayer -->
<script type="text/javascript">
var dataLayer = dataLayer || [];
dataLayer.push({
event: 'recommendedstore',
crto: {
zipcode: ##Users Zipcode##,
store_id: ##Users Store_id##
}
});
</script>
<!-- END Criteo Recommended store dataLayer -->
Example¶
<!-- Criteo Recommended store dataLayer -->
<script type="text/javascript">
var dataLayer = dataLayer || [];
dataLayer.push({
event: 'recommendedstore',
crto: {
zipcode: 75000,
store_id: 26
}
});
</script>
<!-- END Criteo Recommended store dataLayer -->
Store Locator main page or search page¶
Install the following dataLayer on the Store Locator main page or search page of your website.
Field | Overview | Example | Syntax |
---|---|---|---|
event | Page type event | storelocator | Static string value |
zipcode | Deliery Zipcode | 75000 | String |
store_id | User's store_id | 26 | String |
Structure¶
Dynamically replace fields surrounded by ## with users information. See Example
<!-- Criteo Recommended store dataLayer -->
<script type="text/javascript">
var dataLayer = dataLayer || [];
dataLayer.push({
event: 'storelocator',
store_id: ['##Store_ID 1##', '##Store_ID 2##', '##Store_ID 3##'] // add a Store ID for each store in the list. Can be empty string if email not known
});
</script>
<!-- END Criteo store locator dataLayer -->
Example¶
<!-- Criteo store locator dataLayer -->
<script type="text/javascript">
var dataLayer = dataLayer || [];
dataLayer.push({
event: 'storelocator',
store_id: ['25', '26', '27'] // add a Store ID for each store in the list. Can be empty string if email not known
});
</script>
<!-- END Criteo store locator dataLayer -->
Store detail page¶
Install the following dataLayer on the Store detail pages of your website.
Field | Overview | Example | Syntax |
---|---|---|---|
event | Page type event | storepage | Static string value |
zipcode | Deliery Zipcode | 75000 | String |
store_id | User's store_id | 26 | String |
Structure¶
Dynamically replace fields surrounded by ## with users information. See Example
<!-- Criteo store page dataLayer -->
<script type="text/javascript">
var dataLayer = dataLayer || [];
dataLayer.push({
event: 'storepage',
crto: {
zipcode: ##Users Zipcode##,
store_id: ##Users Store_id##
}
});
</script>
<!-- END Criteo store page dataLayer -->
Example¶
<!-- Criteo store page dataLayer -->
<script type="text/javascript">
var dataLayer = dataLayer || [];
dataLayer.push({
event: 'storepage',
crto: {
zipcode: 75000,
store_id: 26
}
});
</script>
<!-- END Criteo store page dataLayer -->
Reserve a product in-store¶
If your website has the capability to allow shoppers to reserve products in-store, install the following dataLayer on the according pages of your website.
Field | Overview | Example | Syntax |
---|---|---|---|
event | Page type event | reseveinstore | Static string value |
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 |
zipcode | Deliery Zipcode | 75000 | String |
store_id | User's store_id | 26 | String |
Structure¶
Dynamically replace fields surrounded by ## with users information. See Example
<!-- Criteo Reserve a product in-store dataLayer -->
<script type="text/javascript">
var dataLayer = dataLayer || [];
dataLayer.push({
event: 'reseveinstore',
crto: {
zipcode: ##Users Zipcode##,
store_id: ##Users Store_id##,
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 reserved in store.
}
});
</script>
<!-- END Criteo Reserve a product in-store dataLayer -->
Example¶
<!-- Criteo Reserve a product in-store dataLayer -->
<script type="text/javascript">
var dataLayer = dataLayer || [];
dataLayer.push({
event: 'reseveinstore',
crto: {
zipcode: 75000,
store_id: 26
email: 'crtotest@test.com',
products: [{
id: 'ProductID_1',
price: '200.99',
quantity: '2'
},
{
id:'ProductID_2',
price: '50.00',
quantity: '1'
}]
}
});
</script>
<!-- END Criteo Reserve a product in-store dataLayer -->
Click & Collect¶
Install the following dataLayer on the Click & Collect page of your website.
Field | Overview | Example | Syntax |
---|---|---|---|
event | Page type event | clickandcollect | Static string value |
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 |
zipcode | Deliery Zipcode | 75000 | String |
store_id | User's store_id | 26 | String |
Structure¶
Dynamically replace fields surrounded by ## with users information. See Example
<!-- Criteo click and collect dataLayer -->
<script type="text/javascript">
var dataLayer = dataLayer || [];
dataLayer.push({
event: 'clickandcollect',
crto: {
zipcode: ##Users Zipcode##,
store_id: ##Users Store_id##,
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 click and collect dataLayer -->
Example¶
<!-- Criteo click and collect dataLayer -->
<script type="text/javascript">
var dataLayer = dataLayer || [];
dataLayer.push({
event: 'clickandcollect',
crto: {
zipcode: 75000,
store_id: 26
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 click and collect dataLayer -->
Check availability in-store¶
The 'checkAvailability' event should be specified in the Criteo OneTag each time a user uses the 'check availability in store' functionality on your site. Install the following dataLayer on the according pages of your website.
Field | Overview | Example | Syntax |
---|---|---|---|
event | Page type event | checkavailability | Static string value |
zipcode | Deliery Zipcode | 75000 | String |
store_id | User's store_id | 26 | String |
product_id | unique ID of Product | 12432 | String |
Structure¶
Dynamically replace fields surrounded by ## with users information. See Example
<!-- Criteo check availability dataLayer -->
<script type="text/javascript">
var dataLayer = dataLayer || [];
dataLayer.push({
event: 'checkavailability',
crto: {
zipcode: ##Users Zipcode##,
store_id: ##Users Store_id##,
product_id: ##unique ID of Product##
}
});
</script>
<!-- END Criteo check availability dataLayer -->
Example¶
<!-- Criteo check availability dataLayer -->
<script type="text/javascript">
var dataLayer = dataLayer || [];
dataLayer.push({
event: 'checkavailability',
crto: {
zipcode: 75000,
store_id: 26,
product_id: 12432
}
});
</script>
<!-- END Criteo check availability dataLayer -->
Tags¶
Steps¶
1 Click on New Tag
2 Give the Tag a name from the list below
- Criteo recommendedstore Tag
- Criteo storelocator Tag
- Criteo storepage Tag
- Criteo reseveinstore Tag
- Criteo clickandcollect Tag
- Criteo checkavailability Tag
3 Choose tag type Custom HTML
4 Copy and paste the following code in the HTML frame
Criteo recommended store 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: "setZipcode", zipcode: {{zipcode}} },
{ event: "setStore", store_id: {{store_id}} },
{ event: "viewHome"}
);
</script>
<!-- End Criteo GTM Tag -->
Criteo Store Locator 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: "viewStore", user_segment: 18 }
);
</script>
<!-- End Criteo GTM Tag -->
Criteo Store detail 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: "viewStore", store_id: {{store_id}}, zipcode: {{zipcode}}, user_segment: 18 }
);
</script>
<!-- End Criteo GTM Tag -->
Criteo "Reserve a product in-store" 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: "reserveInStore", item: {{Criteo Products}} ,
zipcode: {{zipcode}}, store_id: {{store_id}}, user_segment: 18 }
);
</script>
<!-- End Criteo GTM Tag -->
Criteo Click & Collect 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", id: {{Criteo Transaction ID}}, delivery: "store", zipcode: {{zipcode}}, store_id: {{store_id}}, user_segment: 18, item: {{Criteo Products}} }
);
</script>
<!-- End Criteo GTM Tag -->
Criteo Click & Collect 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: "checkAvailability", item: {id: {{Criteo Products}}}, zipcode: {{zipcode}}, store_id: {{store_id}}, user_segment: 18 }
);
</script>
<!-- End Criteo GTM Tag -->
5 Save the tag
6 Repeat steps 1 to 5 for each of the Criteo Store intent tags
Triggers¶
Steps¶
-
Click on Triggers > New
-
Create the following Triggers for each page type:
- Criteo recommended store Trigger
- Trigger type: Custom Event
- Event name:
recommendedstore
- Condition: Event equals
recommendedstore
- Criteo Store locator Trigger
- Trigger type: Custom Event
- Event name:
storelocator
- Condition: Event equals
storelocator
- Criteo store page Trigger
- Trigger type: Custom Event
- Event name:
storepage
- Condition: Event equals
storepage
- Criteo reseve in store Trigger
- Trigger type: Custom Event
- Event name:
reseveinstore
- Condition: Event equals
reseveinstore
- Criteo click and collect Trigger
- Trigger type: Custom Event
- Event name:
clickandcollect
- Condition: Event equals
clickandcollect
- Criteo check availability Trigger
- Trigger type: Custom Event
- Event name:
checkavailability
- Condition: Event equals
checkavailability
- Criteo recommended store Trigger
-
Give the Trigger a name. Example: Criteo recommended store Trigger
-
Choose trigger type Custom Event
-
Set the Event name to the corresponding dataLayer event for each trigger. Example:
recommendedstore
-
Set the trigger conditions to the following for each page type:
-
Save the trigger
-
Repeat steps 1 to 6 for each of the the triggers
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
- CriteoStoreID
- CriteoZipcode
- CriteoStoreID
Criteo Email¶
- Add the name Criteo Email
- Select the Variable type Data Layer Variable
- Add the Data Layer Variable 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 Variable 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 Variable Name:
crto.transactionid
- Save the Variable
CriteoPartnerID¶
- Add the name CriteoPartnerID
- Select the Variable type Constant
- Add the Value:
{{accountid}}
- Save the Variable
Criteo Zipcode¶
- Add the name Criteo Zipcode
- Select the Variable type Data Layer Variable
- Add the Data Layer Variable Name:
zipcode
- Save the Variable
Criteo Store_ID¶
- Add the name Criteo Store_ID
- Select the Variable type Data Layer Variable
- Add the Data Layer Variable Name:
store_id
- Save the Variable
Verification¶
[[accurate]]