Sometimes it is difficult to integrate multiple marketing tags on your website, especially when you have to depend on a developer to modify website codes. Google Tag Manager can be your beloved tool when dealing with marketing and analytics tags. In this guide, you will learn how to install your Criteo OneTag via Google Tag Manager built-in template.
Step 1: Create the Data Layer
The Data layer is a javascript code snippet which is used to store and send information to Google Tag Manager. This code snippet is placed directly on your website just before the GTM container snippet.
While implementing Criteo Onetag, first you have to decide on which pages you want to add this tag. For example, if you want to add Criteo OneTag on your homepage, then you would have to add the data layer code on the home page too. This content in the data layer will specify what information will be sent to Criteo through this tag.
The data layer code is enclosed between the script tags (<script></script>) and is placed in the head section of your webpage. Below is how the data layer code should look like on your page.
Below is an example of the data layer code to be placed on your homepage. The PageType parameter tells GTM the type of page a user is viewing and hence fire the trigger accordingly.
<script> dataLayer = dataLayer || [ ]; dataLayer.push ({ ‘PageType’ : ‘HomePage’, ‘Email’ : ‘email address of the user’ }); </script>
This is just an example code, your setup might be different and complex. If you are not good with codes, ask a developer to implement data layer on your website.
Step 2: Choose the Variable
Now you have to create a variable that will retrieve information from the data layer. Once you create the variables, the information contained in the data layer we created in the first step will be automatically fed into Criteo OneTag.
To create the variable in GTM, click on the Variables tab under the current workflow.
Here you will need to create a User-Defined variable.
We will create the Criteo OneTag partner ID and site type variables here
To create the Partner ID variable, name the variable as Criteo PartnerID, select the variable type as constant and enter your Criteo partner ID into the value field.
Next, we will create the site type variable. Again create a new user-defined variable.
Enter the name as Site Type, select the variable type as Custom JavaScript and enter the below line of code into the code field to identify the site type.
function(){ var deviceType= /iPad/.test(navigator.userAgent)?"t":/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent)?"m":"d"; return deviceType }
You can write your own JavaScript code to get the site type value.
If you have other things to capture you can create other variables like CriteoProductID or CriteoProductIDList.
Step 3: Setup the Trigger
Now you will have to specify when the Criteo OneTag should be fired on your website.
Click on the triggers tab under the current workspace.
Click on the new button to create the trigger.
Name the trigger as Criteo – Home
Select the trigger type as DOM Ready
Choose the trigger to fire on Some DOM Ready Events
Set the trigger to fire when Site Type equals home.
Step 4: Create the Tag
Now it’s time to create the Criteo OneTag via Google Tag Manager template.
Click on the Tags button under the current workspace and create a new tag
Enter the name as Criteo – Home
Select the tag type as Criteo OneTag
In the Criteo Account ID field select the {{Criteo PartnerID}} variable we created before.
In the Site Type field select the {{Site Type}} variable from the drop down.
Leave the hashed email field empty
Select the Page Type as Home Page
Next, select the trigger type as Criteo – Home we created in the previous step.
Read Also: How to Install LinkedIn Insight Tag via Google Tag Manager Template
Step 5: Preview & Publish
Click on the preview button to test and preview this tag before setting it live. If the tag successfully fired publish the new changes to the workflow.