Set Cookies with Google Tag Manager

The Magic of Google Tag Manager and Cookies

18 comments / April 18, 2018

Facebook

Google+

Twitter

Updated: April 18th, 2018. Cookies are a super important part of the web. Imagine the world without them: you wouldn’t be able to use your Facebook or Twitter. They help retain data throughout a user’s visit on a webpage, so naturally they’re an important component of web analytics, as well.

By default, Google Analytics and other analytics tools use cookies in order to track users’ behavior on your website. Unfortunately, I still see many marketers (working with GTM) suffering over not being able to fire Tags for returning visitors, or after 4 page views, etc.

But this shouldn’t be a problem, since you can use Google Tag Manager to set and retrieve data from cookies in fairly easy way. In this blog post, I’ll show you how to easily utilize cookies with Google Tag Manager and take your web tracking to the next level.

I remember when I was just starting to learn GTM. It was a giant leap for me, when I realized I could set and read cookies without developer’s help. It added much more flexibility and freedom to my tag management.

What if I need to fire a specific Pop-up if a visitor originally landed on my website from Adwords AND has already viewed 5 pages? Not a problem!

Why Should you Even Bother? Few Examples.

By setting and reading cookies with Google Tag Manager you can start creating much sophisticated triggers, such as:

A visitor has viewed 5 pages. Let’s show him a popup with special offer!
A visitor is actually a user in your SaaS (Software as a service) but is currently browsing without logging in. Nevertheless, he/she still has a cookie with value “registeredUser=true” which can be used as a condition for your trigger.
A visitor has landed on your website via affiliate link. With each page view, you can preserve affiliate ID in visitor’s cookie.
Do you have a pricing page with price calculator? Let’s attach calculator’s results (price) to that particular visitor. This way you’ll see how visitors with different price ranges are behaving on your site.

Pretty neat, huh?

So What’s the Plan?

First, someone has to set the cookie. That might be either you (with help of Google Tag Manager), or a developer.
Then, you need to create a 1st party cookie variable in GTM. It will look for cookie with particular name and make its value available in data layer. You will also be able to see it in Google Tag Manager’s Preview and Debug mode.
Create a trigger where condition involves aforementioned 1st party cookie variable.
Fire a tag based on a trigger from bullet point No. 3.
Profit.

Set cookies with Google Tag Manager

In order to set a cookie, you’ll need to create a custom HTML tag. It contains Javascript code which defines cookie’s name, expiration time, etc.

<script>
 
 var cookieName = "visitorFromAdwords"; // Name of your cookie
 var cookieValue = "true"; // Value of your cookie
 var expirationTime = 2592000; // One month in seconds
 expirationTime = expirationTime * 1000; // Converts expirationtime to milliseconds
 var date = new Date(); 
 var dateTimeNow = date.getTime(); 

 date.setTime(dateTimeNow + expirationTime); // Sets expiration time (Time now + one month)
 var expirationTime = date.toUTCString(); // Converts milliseconds to UTC time string
 document.cookie = cookieName+"="+cookieValue+"; expires="+expirationTime+"; path=/; domain=." + location.hostname.replace(/^www\./i, ""); // Sets cookie for all subdomains

</script>

var cookieName = "visitorFromAdwords"; // Name of your cookie

var cookieValue = "true"; // Value of your cookie

var expirationTime = 2592000; // One month in seconds

expirationTime = expirationTime * 1000; // Converts expirationtime to milliseconds

var date = new Date();

var dateTimeNow = date.getTime();

date.setTime(dateTimeNow + expirationTime); // Sets expiration time (Time now + one month)

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

document.cookie = cookieName+"="+cookieValue+"; expires="+expirationTime+"; path=/; domain=." + location.hostname.replace(/^www\./i, ""); // Sets cookie for all subdomains

</script>

In the script above, there are three variables that you should edit:

cookieName – you should give it a meaningful title, e.g. visitorFromAdwords, affiliateID, pageviewCount, etc.
cookieValue – In case of visitorFromAdwords possible values ca be true or false. affiliateID cookie’s value can be 2385437, and pageviewCount cookie’s – 5.
expirationTime defines when the cookie expires. 2592000 is 30 days converted to seconds (30 days * 24 hours * 60 minutes * 60 seconds * 1000 seconds). If you want the cookie to expire after the session ends (when browser window is closed), then remove expires=”+expirationTime+”; from the end of the script. Keep in mind, that Google Chrome still runs in the background when you close the browser window, thus the cookie will “live” longer.

Now, you need to decide when you want to set that cookie. Should this “set cookie” script fire when URL contains ?gclid= (meaning that a visitor landed via Adwords campaign)?

Say, we want to set cookies for those visitors, who have found our website via Google Adwords. In that case, we need to create a trigger with the following settings.

Trigger - Visitor from Adwords

When a person clicks any Google ad, a destination URL contains ?gclid=XXXXXX. That’s the reason behind this trigger’s condition.

Test The Cookie

After you created custom HTML tag with cookie-setting script and its trigger, next thing you should do is test the implementation with Preview and Debug mode. Make sure that the tag fires ONLY when URL contains ?gclid=. If you’re new to Preview and Debug mode, read this comprehensive guide.

Now, let’s check whether cookie is set correctly. There are two main ways to check cookies – browser’s built-in feature (developer tools) or a plugin.

Personally, I am using Chrome plugin called EditThisCookie (also available for Opera users). This really simple and intuitive extension enables me to quickly check which cookies are currently in use and what data do they contain.

If you haven’t already installed, download it here. If you’re using a different browser, here are some similar plugins:

Firefox – Cookies Manager+
For Internet Explorer users, it’s recommended to use built-in features of developer tools.

Anyway, let’s get back to EditThisCookie. Once you have installed this extension, a cookie icon will appear next to the Menu icon (in Chrome).

Go to the website you’re currently working on, click EditThisCookie icon and you’ll see an expanded list of all cookies that are currently in use on that website. Look for cookie named visitorFromAdwords. This little piece of data will help us do the magic in further chapters of this blog post.

Edit this cookie expanded

Read The COOKIE

Now, we need to “teach” Google Tag Manager read the cookie and make it available as a variable. Go to your GTM account, open list of Variables and create a new user-defined variable with the following settings:

cookie variable - visitorFromAdwords

This variable searches for cookies with title visitorFromAdwords. If it spots one, GTM will read its value and make it available in the Variables tab of Preview and Debug console.

Cookie variable in Preview and Debug mode

This enables you to use visitorFromAdwords variable in any GTM tag or trigger, like in the example below:

trigger with cookie

Example – Fire a Tag on 3rd Page View

This is one of the most popular use cases of cookies with Google Tag Manager. For your convenience, I have prepared a GTM Recipe with a ready made script which counts number of page views and fires a trigger after 3. But if you’re eager to understand the details, continue reading.

DOWNLOAD THIS GTM RECIPE

Let’s Count Page Views

First of all, you’ll need to create a custom HTML tag which counts page views. Every time a page refreshes, this script searches for cookie pageviewCount and increments its value by 1.

<script>function setCookie(name, value, expires) {
 var cookie = name + "=" + value + "; path=/; domain=." + location.hostname.replace(/^www\./i, "");

 if (typeof expires !== "undefined") {
 var now = new Date();
 now.setTime(now.getTime() + expires * 24 * 60 * 60 * 1000);
 cookie += "; expires=" + now.toUTCString();
 }

 document.cookie = cookie;
}

function getCookie(name) {
 var cookies = document.cookie.split(";"),
 toReturn;

 for (var i = 0; i < cookies.length; i++) {
 var cookie = cookies[i].trim();
 if (cookie.indexOf(name + "=") === 0) {
 toReturn = cookie.substring((name + "=").length, cookie.length);
 }
 }

 return toReturn;
}

(function() {
 var pageviewCount = getCookie("pageviewCount");

 if (typeof pageviewCount === "undefined") {
 pageviewCount = 1;
 } else {
 pageviewCount++;
 }

 setCookie("pageviewCount", pageviewCount, 30);

})();
</script>

var cookie = name + "=" + value + "; path=/; domain=." + location.hostname.replace(/^www\./i, "");

if (typeof expires !== "undefined") {

var now = new Date();

now.setTime(now.getTime() + expires * 24 * 60 * 60 * 1000);

cookie += "; expires=" + now.toUTCString();

}

document.cookie = cookie;

}

function getCookie(name) {

var cookies = document.cookie.split(";"),

toReturn;

for (var i = 0; i < cookies.length; i++) {

var cookie = cookies[i].trim();

if (cookie.indexOf(name + "=") === 0) {

toReturn = cookie.substring((name + "=").length, cookie.length);

}

return toReturn;

}

(function() {

var pageviewCount = getCookie("pageviewCount");

if (typeof pageviewCount === "undefined") {

pageviewCount = 1;

} else {

pageviewCount++;

}

setCookie("pageviewCount", pageviewCount, 30);

})();

</script>

The cookie (set by this Javascript) expires after 30 days. You can easily change its duration by editing setCookie(“pageviewCount”, pageviewCount, 30).

Set this custom HTML to fire on all pages. Refresh Preview and Debug mode, open EditThisCookie plugin and check whether cookie was successfully saved. Now, refresh the page. Cookie’s value should increase to 2.

pageviewCount cookie

If you want this cookie to be valid only for that visitor session, here’s a modified script (I’ve removed all parts which are related to expiration date). Keep in mind, that Chrome handles cookies a bit differently (compared to other browsers). Even if you close the tab or window, the Chrome still might keep running in the background, therefore session cookies might be still valid.

<script>function setCookie(name, value) {
 var cookie = name + "=" + value + "; path=/; domain=." + location.hostname.replace(/^www\./i, "");

 document.cookie = cookie;
}

function getCookie(name) {
 var cookies = document.cookie.split(";"),
 toReturn;

 for (var i = 0; i < cookies.length; i++) {
 var cookie = cookies[i].trim();
 if (cookie.indexOf(name + "=") === 0) {
 toReturn = cookie.substring((name + "=").length, cookie.length);
 }
 }

 return toReturn;
}

(function() {
 var pageviewCount = getCookie("pageviewCount");

 if (typeof pageviewCount === "undefined") {
 pageviewCount = 1;
 } else {
 pageviewCount++;
 }

 setCookie("pageviewCount", pageviewCount);

})();
</script>

var cookie = name + "=" + value + "; path=/; domain=." + location.hostname.replace(/^www\./i, "");

document.cookie = cookie;

}

function getCookie(name) {

var cookies = document.cookie.split(";"),

toReturn;

for (var i = 0; i < cookies.length; i++) {

var cookie = cookies[i].trim();

if (cookie.indexOf(name + "=") === 0) {

toReturn = cookie.substring((name + "=").length, cookie.length);

}

return toReturn;

}

(function() {

var pageviewCount = getCookie("pageviewCount");

if (typeof pageviewCount === "undefined") {

pageviewCount = 1;

} else {

pageviewCount++;

}

setCookie("pageviewCount", pageviewCount);

})();

</script>

cookie variable and trigger in Google Tag Manager

Since we have created pageviewCount cookie, now it’s time to “teach” Google Tag Manager read the cookie and make it available as a variable. Go to your GTM account and open list of Variables. Create new user-defined variable with the following settings:

pageviewCount cookie variable in google tag manager

Next, go to Triggers and create a new Page view trigger with the following settings:

trigger with cookie

This trigger will fire when cookie’s value is greater or equal to 3.

That’s it! You can now assign this trigger to any tag you want, whether it is a pop-up or Google Analytics event tag, or whatever. It’s up to your imagination.

Spongebob imagination google tag manager

Delete Cookie

If you want to delete a particular 1st-party cookie, you need to set its expiration time to the past date, e.g. 1970 January 1st. Such cookies cannot exist, therefore, they immediately expire.

Here’s a script that you should use:

<script>
 function delete_cookie(name) {
 var expires = new Date(0).toUTCString();
 var domain = location.hostname.replace(/^www\./i, "");
 document.cookie = name + "=; expires=" + expires + "; path=/; domain=." + domain;
 }

 delete_cookie("yourCookieName"); // REPLACE yourCookieName WITH THE NAME OF THE COOKIE YOU WANT TO DELETE
</script>

function delete_cookie(name) {

var expires = new Date(0).toUTCString();

var domain = location.hostname.replace(/^www\./i, "");

document.cookie = name + "=; expires=" + expires + "; path=/; domain=." + domain;

}

delete_cookie("yourCookieName"); // REPLACE yourCookieName WITH THE NAME OF THE COOKIE YOU WANT TO DELETE

</script>

In the 8th line of the code, change yourCookieName with the name of a cookie you wish to delete. This code should also be implemented via GTM Custom HTML tag and fired whenever you need to delete a cookie (e.g. after a conversion, opt-out or something else).

Few More Ideas

If you still don’t know how to leverage cookies in your marketing stack, here’s food for thought. I hope these examples will help you break the ice:

If you run an affiliate program, you already know that visitors come to your site via affiliate links (which contain unique affiliate ID). You can fetch that data from URL, set it as cookie and send to Google Analytics as Custom Dimensions. This way you’ll see how well/terrible affiliate traffic is converting. Also, you can identify which affiliate partner is driving the most engaged traffic.
If a person made a purchase on your site, save this fact as a cookie. Then, create a pageview trigger which blocks pop-ups (irrelevant to recent buyers).
If you run a SaaS business, ask developers to set various data about the user to cookies. Even if the user is logged out, you can still identify him/her visiting your website/blog/etc. and send that data to Google Analytics as custom dimensions. But be aware of PII limitations.

Final WOrds

So there you have it. Turns out it’s pretty easy to manage cookies with Google Tag Manager. First you need to fire a custom HTML tag which sets the the cookie with particular value. Then, you need to create 1st party cookie variable within GTM.

This variable’s value can be transferred to another tools (such as Google Analytics) or used as a firing condition within a trigger.

If you’re looking for ways how to fire a particular tag after 3 page views, or for those visitors, who have visited a particular page, then cookies should be your weapon of choice. Another solution is browser storage (localStorage and sessionStorage), but that’s a topic for another time.

Do you know more tricks how to use cookies with Google Tag Manager? Let me know in the comments.

Facebook

Google+

Twitter

Julius Fed

Head of Developer Operations at Omnisend. I am highly interested in Google Tag Manager, Google Analytics, Adwords, Email marketing, Email Deliverability, Digital Marketing in general. You can follow me on Twitter.

Mayo Racek
May 19, 2017 at 10:24 am

Hello,

this is a fantastic way to measure the content engagement and create some smart metrics that can really impact the business bottom line.

Much thanks for this solution. If I could ask 2 question.

1. The cookie is valid till the end of the session (30min) or if the user returns to the site after one week it will continue to count the pageviews where it ends for current cookie?

2. Do you have an idea how to find out which page was last pageview?

Thanks a lot for great blog and really appreciate your work

have a great day

- Mayo Racek
  May 19, 2017 at 10:38 am
  
  Just to clarify question 2.
  
  What i would like to know what was the total count of pages for “user”/client id to make some deeper analysis to find out what value certain page has.
  
  is there a chance to fire a special tag in GTM when the user sees last page and i will be able to grab the count of how much pages there were before they reached the current page?
  
  hope it is a bit understandable, anyway, pardon me the little messy explanation.
  
  Thanks a lot
  
- Julius Fedorovicius
  May 19, 2017 at 10:40 am
  
  Hey,
  
  1. One cookie can be have only one expiration date: either session, either 1 week. If your cookie expires after session AND then user returns after 1 week, page view counter will start counting from start (1).
  
  2. Sorry, I am still not sure whether I understood the 2nd question. If you wish to see how many page views or sessions do your visitors make, you can go to Audience > Behavior > Frequency and Recency. Did that answer your question?
  
Scott Sunderland
July 6, 2017 at 6:39 am

This is glorious. Great work Julius!

Bastognekoek
November 1, 2017 at 10:20 pm

Hi, how do I set the cookie to expire at the end of the session in the “Let’s count pageviews” code.

If I remove 30 from this part of the code I get an error: setCookie(“pageviewCount”, pageviewCount, 30);

- Bastognekoek
  November 27, 2017 at 2:28 pm
  
  Hi Julius, can you answer my question please? Thx!
  
  - Julius Fed
    November 27, 2017 at 8:06 pm
    
    Hey, sorry, somehow I missed your comment. In order to create a cookie which is valid only for that session, you do not need to edit “Let’s count pageviews” script. Instead, use the very first script (in “Set cookies with Google Tag Manager” section) and edit two things:
    1. Remove the line no. 5 (var expirationTime = 2592000; // One month in seconds)
    2. Edit line no. 12 by removing expires=”+expirationTime+”; As a final result, the line no. 12 should look like this:
    document.cookie = cookieName+”=”+cookieValue+”; path=/; domain=.” + location.hostname.replace(/^www\./i, “”);
    
    What I did here was to remove everything that has something to do with Expiration. If expiration setting is not defined, the cookie will be active only during that session. But keep in mind how Chrome handles sessions. Even if you close the browser window, Chrome might keep running in the background, therefore that session cookie might still be available.
    
    Cheers
    
    - Bastognekoek
      November 27, 2017 at 9:00 pm
      
      Hi Julius,
      
      Thx for your reply. I think you misunderstood me. I have to use the “Let’s count pageviews” script, cause that’s what I want to do (count page views and store them in a cookie). As you say in your explanation:
      
      “this script searches for cookie pageviewCount and increments its value by 1.”
      
      The cookie pageviewCount is set by creating a user defined variable in GTM. Like you explained here:
      
      “Go to your GTM account and open list of Variables. Create new user-defined variable with the following settings:”
      
      So if I want the cookie pageviewCount to only live during the session, I’ll have to update the “Let’s count pageviews” script. This is what led me to my question.
      
      If I remove 30 from this part of the code in the “Let’s count pageviews” code, I get an error: setCookie(“pageviewCount”, pageviewCount, 30);”
      
      - Julius Fed
        November 28, 2017 at 1:49 pm
        
        Yes, apparently, I indeed misunderstood you. I’ve updated the blog post by adding an additional, modified, script which creates a cookie valid only for that session. You can find it below the paragraph you’ve quoted in your last comment. Keep in mind that issue with Chrome is still possible.
        
        Cheers
      - Bastognekoek
        December 4, 2017 at 8:28 pm
        
        Great! Thx for this!
David
November 7, 2017 at 9:47 pm

Hi! Thanks for the article, is excellent! I have a question. I can create a cookie that maintenance the UTM into “dl”(document.location) parameter? I have a problem with SPA(AngularJs) and source, atributtion, and after to test diferent options, I think this could be the solution. Do you believe that it is possible?

- Julius Fed
  November 13, 2017 at 3:07 pm
  
  Hey, sorry, I don’t know a lot about SPA in AngularJS, thus I’m not sure whether it can help you. But yes, you can definitely store document.location in a cookie.
  
Andrew
November 30, 2017 at 2:13 am

Hello! Awesome script. Is there a way to modify the pageviewCount script so that it counts number of sessions as opposed to pageviews? Rather than counting how many times a page is viewed, I was hoping to use the cookie to determine how often a customer comes back to the site to check on prices or products. Thanks!

- Julius Fed
  December 4, 2017 at 7:53 am
  
  Hey, not sure. This is a whole another level of JavaScript development. And I’m not very efficient with it. On one hand, this idea sounds a bit hacky and might cause a lot of inaccurate data but maybe I’m wrong.
  
Margaret White
February 13, 2018 at 2:22 am

Hi Julius,

thank you so much for this article! I would like to ask a question:

I am tracking form submissions on my website right now and here is what a typical journey of a user looks like:

1) Reach product landing page (urls are tagged with UTM, e.g. ?variable=facebook)
2) Clicks on product interest submission form and is redirected to a third party site where they can select their choice of product
3) is redirected back to my site where they can proceed to submit the form which grabs the product of their choice from the third party site

Can i use this method as stated in the article to preserve the cookie from step 2 to step 3 so i am able to attribute to form submission back to facebook?

Thank you!

- Julius Fed
  February 13, 2018 at 12:44 pm
  
  Yes, you can.
  
  Set the cookie in step 1 (I’d set its duration to a couple of hours, but you know your business/website better than me). When the user is redirected back to your site in step 3 and submits the form, fire all conversion tags you need and then fire one more Custom HTML tag which deletes the cookie.
  
  Here’s a solution how to delete a particular cookie by name (set its date to the past) https://stackoverflow.com/questions/10593013/delete-cookie-by-name (see the most upvoted answer). Take that code snippet, change cookie’s name and paste the code to Custom HTML tag.
  
Emilya
April 12, 2018 at 3:50 pm

You are the best. This is the most helpful article. Thank you very much. As for how to use a cookie – I have a situation where our customer help agents open sessions logged in as customers and place orders for them. In every way during the session, this looks as if the customer is placing the order, but I need to create reports specifying when it’s an agent and when it’s a customer. Setting a cookie just when the agent starts the session is the trick. Thank you again!

- Julius Fed
  April 15, 2018 at 12:23 pm
  
  Happy to help!