Setting Cookie in Google Tag Manager — CXL Course Review

Google Tag Manager is a really useful tool which can complete multiple tasks. In this blog, I will be talking about how to set cookies in GTM. But before diving into the core topic, let us first be clear about what a cookie really is. According to W3Schools, a cookies are “data, stored in small text files, on your computer.” That is exactly what they are — little snippets of information about the user. By remembering things like preferred language and other settings, it makes it possible for the browser to identify the user when visiting another page on the same domain. However, differentiation must be made between first party and third party cookies.

When it comes to first party cookies, these are set by the domain that you are visiting. These are considered fairly harmless with regard to privacy concerns and it is this type of cookie that we are going to set and also fetch data from. For the purposes of this post, we are going to combine the lessons from Chris Mercer’s course in Intermediate GTM at CXL as well as Simo Ahava’s article on the same topic at his blog. So now that the definition has been provided, let us look at a few syntaxes in Javascript for setting cookies. Here’s how a cookie can be created in Javascript:

document.cookie = “username=John Doe”;

Notice how in this example the username of the individual was also stored. That’s right — even your name can be read by and stored in the cookie during your browser session. I hope you can immediately see the potential for privacy intrusion in a cookie — that’s why all that hullabaloo has been created over third party cookies getting access to personal information. But I digress again — so let’s get back to how an expiry date can be set. Remember that by default, cookies get deleted when the browser is closed by the user.

document.cookie = “username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC”;

We have so far only included the username while setting the cookie, but there are other parameters that the main function for setting the cookie can take. For instance, name, value, path, ms (expiry time in milliseconds) and domain.

Here is another way of setting a cookie with all the important parameters:

document.cookie = “username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/”;

As you can see in this example, the expiry date and path have been specified in the declaration itself along with the name. The one below by Simo Ahava is more advanced in the sense that it collects the information from the values of the corresponding path, domain etc variables that are previously set in the browser. So if they change, the corresponding cookie parameters’ values also change.

Here’s what the final code given by Simo Ahava looks like:

Let us go through step by step to understand how it is working. At the very start, we can see that it is a function(). The return statement after the “if” condition means that if there is no name and no value, then the function() execution will stop. In other words, the name and value have been set as mandatory entries.

In the next few lines of code, we can see the variables cpath, cdomain and expires being defined. For cpath and cdomain variables, as long as the path and domain variables are already set respectively, the corresponding values will be updated in the path/domain directive, or else an empty string will be set. You will see the path in the variable section within the Data Model in GTM debugger mode. For instance, in the page I am testing this cookie setup, the Page URL is the root domain itself because I am on the home page

When it comes to setting the expiry date, it follows three steps:

First the current date is fetched by calling the Date() function and storing it in the variable “d.”

The following bit of code just fetches the number of milliseconds since midnight of January 1 1970 and adds the same to get the resultant date and time.

d.setTime(d.getTime() + ms);

The line of code expires = ‘; expires=’ + d.toUTCString(); sets the value of the date and time in UTC (universal time) and saves in the “expires” variable.

Finally, the cookie output is in the format given:

document.cookie = name + “=” + value + expires + cpath + cdomain;

Whereby it ties together all the variable values to construct and set the cookie.

Use Case

I have tried the easier use case from Chris Mercer’s course for now. It is fairly straight-forward but nonetheless helped me get started. Here is what the tag looked like:

As you can see above, there is nothing complex about this one — I simply write document.cookie and then name it “MyCookie”.

The “cookie set test” tag was fired upon Page load and here’s how it looked like in the Debugger:

And finally under the Application tab in the Inspect Tool in the browser containing the page, the cookie set by me appeared just as expected:

Concluding Observations =:

This is of course the more complex use case and most certainly, the discussion here is not nearly exhaustive. I myself am no expert in Javascript but am enjoying the journey so far with CXL’s digital analytics minidegree, along with learning some Python for data science. I have generally avoided Javascript in the past, apart from a little bit that I learned a few years back while going through a very introductory course on HTML and CSS along with some PHP. I think developing some understanding of Javascript is necessary because it will open up newer avenues in Google Tag Manager and online tracking in general.

I intend to complete the Advanced GTM by Simo Ahava within the next week or at most another week. I know I am going a little slow now but it is fine, Google Analytics should not take much time to cover. It’s the Big Query part that will take more time.

I am a digital marketing professional with over 6 years' experience and specialize in paid marketing and analytics along with creative writing