Create & Set Cookies with Google Tag Manager to Track User Behaviours

For advanced users of Google Tag Manager, there will be times when you’ll need to create a Cookie and trigger it to fire on a site without the use of a developer. There are various reasons for this, but the most common one is to capture some information from a user on particular part of the site, and to release and record that information elsewhere on the site; this will allow you to track your visitors’ online behaviour.

 

Specific examples are:

• A user has entered the site with a specific value in the UTM parameter
• A specific form has been submitted
• To capture the value of a specific form field
• A specific link has been clicked on the site
• To fix duplicate transactions issues in Google Analytics
• To trigger a specific action (e.g. a popup) for returning visitors
• To create custom dimensions in Google Analytics

 

In this post we will discuss how to record the value of a Tracking Parameter.

 

6 Steps to creating & setting a Cookie in GTM:

1. Create the variable that will be recorded by your Cookie (optional)
2. Create a Custom HTML Tag which holds your Cookie JavaScript
3. Create a Trigger which fires the Cookie
4. Create a 1st Party Cookie variable to import the Cookie value back into GTM
5. Test and debug your Cookie Tag
6. Publish

 

Create the variable that will be recorded by your Cookie (optional)

 

Whilst it might not always be necessary to store a variable in your Cookie, more often than not it is; the first thing you should do (if you haven’t already!) is to create the variable you want to be stored in the value of the Cookie. In this case, we’re storing the Query Key ‘Source’:

 

 

 

Create a Custom HTML Tag which holds your Cookie JavaScript

 

Paste the code of your Cookie into a Custom HTML tag in Tag Manager.  Your Cookie code will depend on what you are recording, although it should look something like this:

 

<script>
 
var cookieName  = "website_source"; 
var cookieValue = "{{URL - Query - Source}}";			//pull in the value from a variable or constant here, true, false etc
var cookiePath  = "/";

var expirationTime = 86400;                          	//time the cookie should expire in seconds
expirationTime = expirationTime * 1000;                 //Convert expirationtime to milliseconds
 
var date = new Date();                                  //Create new date
var dateTimeNow = date.getTime();                       //What is the current time in milliseconds

date.setTime(dateTimeNow + expirationTime);             //Set expiration time

var expirationTime = date.toUTCString();                //Convert milliseconds to UTC time string

document.cookie = cookieName+"="+cookieValue+"; expires="+expirationTime+"; path="+cookiePath;  //Set cookie

</script>

 

And it should look like below:

 

 

 

Create a Trigger which fires the Cookie

 

Now that you have the core of your Cookie created, you need to tell GTM when to fire it. In our example, the Cookie should fire when the URL contains ‘source=’ in the parameter query string, for example:

https://www.propellernet.co.uk/?source=otherwebsite&medium=…

 

 

 

Create a 1st Party Cookie variable to import the Cookie value back into GTM

 

Although GTM has created the Cookie, it cannot extract the value of the Cookie unless you create a 1st Party Cookie Variable. This is a built-in variable that returns the value for the first browser Cookie with the name you specify in the Cookie Name field.

 

 

 

Test and debug your Cookie Tag

 

As with every tag you publish in Tag Manager, you should always test it before publishing. To do this, click ‘preview’ in GTM, head over to your site and make the trigger fire the tag you created. For cookies, you should be able to check if it has worked in one of these two ways:

• Study the Cookies of your site. We us the ‘editThisCookie’ chrome extension which works well, but other tools can do this too:

 

 

• Look at the variables in the GTM Preview Debug Tool. If this has worked, the 1st Party Cookie variable you created earlier will now have a value:

 

 

 

Publish

 

Once you’ve followed the steps above, publish your container and boom, you can now track your visitors behaviour in the browser.

 

Need some help?

If you want to talk about this, or any other GA/GTM issues, then Propellernet offers bespoke Google Analytics and Google Tag Manager training. We also offer a wide range of Google Analytics Services or Google Tag Manager consultancy services. Please contact us for more information

Sign Up To Our Google Analytics Newsletter

Sign up to our Monthly Analytics newsletter with more tips & techniques on Google Analytics or Google Tag Manager, discover new tools and software to help you measure your traffic and hear about the latest news on Analytics and Tag Management