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

Criteo OneTag on your Basket page

Overview

The Criteo OneTag should be implemented on your Basket/Cart page to track users who abandon their order before the checkout.
The Criteo OneTag should be implemented within the header of your page code. The tag loads asynchronously, so it will not interfere with the page loading times or user experience.
When implementing the Criteo OneTag on your Basket page you will have to dynamically pass the IDs, prices and quantities of each product added to the basket, along with the sitetype and email parameters.

Criteo OneTag implemented on a Basket page:

<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: YOUR UNIQUE ACCOUNT ID },
{ event: "setSiteType", type: "m FOR MOBILE OR t FOR TABLET OR d FOR DESKTOP" },
{ event: "setEmail", email: "TRIMMED AND LOWERCASE USER EMAIL ADDRESS" },
{ event: "viewBasket", item: [
{ id: "FIRST PRODUCT ID", price: FIRST PRODUCT UNIT PRICE, quantity: FIRST PRODUCT QUANTITY },
{ id: "SECOND PRODUCT ID", price: SECOND PRODUCT UNIT PRICE, quantity: SECOND PRODUCT QUANTITY }
/* add a line for each product in the user's basket */
]});
</script>

The viewBasket event

The Criteo OneTag viewBasket event is used to show basket contents on a page. For each product added to the basket you have to dynamically pass the ID of the product, the product unit price and the quantity of the product selected; if the user has added two instances of the same product to the basket the quantity passed into the Criteo OneTag will be "2".

The viewBasket event:

{ event: "viewBasket", item: [ 
{ id: "FIRST PRODUCT ID", price: FIRST PRODUCT UNIT PRICE, quantity: FIRST PRODUCT QUANTITY },
{ id: "SECOND PRODUCT ID", price: SECOND PRODUCT UNIT PRICE, quantity: SECOND PRODUCT QUANTITY }
/* add a line for each product in the user's basket */

The product IDs passed on the Criteo OneTag tag must be exactly the same IDs as those in your product data feed.

For prices with decimal values the decimal separator used must be a dot. Example: 44.90

For Example, if the user has added two items to the basket:

  • Two instances of the product ID A122 with unit price £44.90
  • One instance of the product ID F5532 with unit price £85.00

viewBasket event example:

{ event: "viewBasket", item: [ 
{ id: "A122",  price: 44.90,  quantity: 2 }, 
{ id: "F5532", price: 85.00, quantity: 1 }

setSiteType parameter

The setSiteType parameter is a dynamic parameter that will be present in the Criteo OneTag across all the pages of your site. If your site has different versions to support multiple device types, indicate which version of your site is displayed to the user via the “setSiteType” parameter:

  • d for desktop
  • m for mobile
  • t for tablet

setSiteType parameter on the desktop version of a site:

 { event: "setSiteType", type: "d" },

setSiteType parameter on the mobile version of a site:

 { event: "setSiteType", type: "m" },

setSiteType parameter on the tablet version of a site:

 { event: "setSiteType", type: "t" },

More information on the site type here

setEmail parameter

The dynamic email parameter is present in the Criteo OneTag used on all the pages of your site. This parameter is used by Criteo Cross Device enabling Criteo to accurately match users across multiple devices. In the email parameter field, pass the customer email address (trimmed and converted to lowercase) and Criteo will hash it using MD5 algorithm before storage on our servers. MD5 encrypted emails are irreversible and anonymous, so Criteo has no access to your users’ email addresses.

setEmail parameter example:

 { event: "setEmail", email: "user@example.com" },

Please leave it blank if an email address is unavailable. Example of setEmail parameter with empty value:

 { event: "setEmail", email: "" },

Alternatively, you can pass the encrypted email address using an MD5 hash function (here a link to a page with some examples on different programming languages of MD5 hash functions). In this case, you should replace the default "setEmail" with “setHashedEmail” as shown below. 

Finally, pass the dynamically encrypted email address (trimmed and converted to lowercase).

Example of hashed email address user@example.com

setHashedEmail parameter:

 { event: "setHashedEmail", email: "b58996c504c5638798eb6b511e6f49af" },

Please leave it blank if the email address is unavailable. Example:

 { event: "setHashedEmail", email: "" },
Was this article helpful?
0 out of 0 found this helpful
Powered by Zendesk