The Magic of Google Tag Manager and Cookies

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 date = date.toUTCString(); // Converts milliseconds to UTC time string
 document.cookie = cookieName+"="+cookieValue+"; SameSite=None; Secure; expires="+date+"; 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 can 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 milliseconds). If you want the cookie to expire after the session ends (when the browser window is closed), then remove expires=”+date+”; 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.

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 the 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 a cookie is set correctly. There are two main ways to check cookies – the 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, you’ll need to find something on your own.

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 a cookie named visitorFromAdwords. This little piece of data will help us do the magic in further chapters of this blog post.

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:

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.

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

Let’s Count Page Views

First of all, you’ll need to create a custom HTML tag that 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>

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 the cookie was successfully saved. Now, refresh the page. Cookie’s value should increase to 2.

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 the expiration date). Keep in mind, that Chrome handles cookies a bit differently (compared to other browsers). Even if you close the tab or window, 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>

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 a list of Variables. Create a new user-defined variable with the following settings:

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

This trigger will fire when the 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.

<script>
(function() {
    var name = 'yourCookieName'; // REPLACE yourCookieName WITH THE NAME OF THE COOKIE YOU WANT TO DELETE
    var path = '';  // If needed, replace this
    var domain = ''; // If needed, replace this
    document.cookie = name + "=" +
		((path) ? "; path=" + path: "") +
		((domain)? "; domain=" + domain: "") +
		";expires=Thu, 01 Jan 1970 00:00:01 GMT";
    })();
</script>