How to easily setup cookies in GTM using our custom cookie template

Introduction

Remember all those default tags that you saw in Google Tag Manager? (like Google Analytics, Google Ads, Hotjar, etc.)

With custom tags, you are now able to create your own user-friendly tags just like the above.

For example:

Simo Ahava created a Facebook Pixel tag that you can import into your own GTM account, so when you go to create a new Tag, you can choose the “Facebook” tag.

From here, you’re able to choose a page view pixel or an event pixel, and you can even create a custom Facebook event.

Whether before custom templates, you would have to add a Facebook Event code in Google Tag Manager, which is not as user friendly.

Now, how will this new feature change the way we implement tags in GTM?

For instance, we’ll begin to see more and more custom templates from:

• Martech and AdTech vendors
• Digital Agencies, and
• Independent GTM experts, consultants and developers

All which aim to solve specific problems.

You might even see Google’s own competitors, like VWO (Visual Website Optimizer, and A/B Testing platform), develop their own custom templates in order to make it easier for their users to implement the VWO snippet via Google Tag Manager.

In other words, the more custom templates are released to the public, the easier it will become for non-technical GTM users to implement all kinds of tags.

So we asked ourselves:

What part of our workflow can we improve by using custom templates?

So here’s what we built, and how you can use it to speed up your own workflow:

A custom template for adding & removing cookies

Our idea for a custom template is very simple: get rid of all the code you need to create or delete a cookie and only fill a tag with all the information you want.

Which meant replacing this:

with this:

Until now, creating a cookie implied a new custom HTML tag in which you added some JavaScript code every time you needed a new cookie.

The “Custom Cookie Tag” solves this problem so you don’t have to touch a line of code — just download the custom template at the end of this article, import it and start using it.

Not sure what cookies are or how they work?

Basically whenever you want to store specific information about your visitors for later use, you can store that information inside a cookie.

Now, let’s dig into the 3 steps to follow when using this Custom Template.

Step 1: Import Custom Template

To import a custom template you need to first click on the Template button from the left side menu and then New.

Then in the Template Editor, click on the three dots in the top-right corner and hit “Import”.

Once you import it, your template editor will automatically change to include the following:

The way it works is very simple and straightforward, as you’ll see in the next section.

Just hit the SAVE button and you’ll be good to go.

Step 2: How to create a Custom Cookie

For this example, we’re going to create a cookie for new visitors.

Which means that whenever someone visits our site, we want to check whether they are here for the first time or not and if they are, we want to place a cookie in their browser.

Here’s how you can do this:

Create a new Tag and choose the “Custom Cookie Tag” as the tag type.

Now let’s configure the tag as follows:

Choose “Add Custom Cookie” from the first dropdown, then choose a cookie name. We chose “Custom Cookie 2” for this example, but you can choose any name from the list. In the cookie value field, let’s write ‘newUsers’ and set the firing priority to 100, so it will fire before other tags.

Our tag should now look like this:

Next step is to set this cookie for every visitor who is new and doesn’t already have this cookie. 

For that we need to create 2 new variables:

Variable #1: Identify New Users

The first variable is for determining if the user is new or returning. For that we are going to use a Custom JavaScript variable, that should look like this:

You can copy the JavaScript code below and paste it in your custom JS tag:

function() {
   function getCookie(name) {
      var re = new RegExp(name + "=([^;]+)");
      var value = re.exec(document.cookie);
      return (value != null) ? unescape(value[1]) : null;
   }
   var value = '';
   if(getCookie('_ga') !== undefined){
        var cookie = getCookie('_ga');
        var timestamp = cookie.substr(cookie.lastIndexOf(".") + 1).substring(0,9);
        var actualTimestamp = Date.now().toString().substring(0,9);
        if(timestamp == actualTimestamp) {
          value = 'NewUser';
        }
        else {
    	  value = 'ReturningUser';
        }
    }
  	else {
    	value = 'NewUser';
    }
    return value;
}

And hit SAVE.

Variable #2: New Users Cookie Value

This second variable is going to be a 1st Party Cookie, and we’ll give it the same name as our custom cookie: ‘customCookie2’

Hit SAVE and let’s go back to our main tag:

We’ll need to create the trigger for our Custom Cookie Tag based on the 2 variables we just created. Here’s what the trigger configuration should look like:

And here’s what our tag should look like, now that we’ve setup the trigger:

Congrats! You just created your first cookie using our custom template!

But, what now? How can you use this cookie?

Let’s say you implemented a popup via Google Tag Manager, and you only want to show this popup to new visitors.

All you’d have to do is add this trigger to your popup:

What you’re basically saying with this trigger is: “Only show my popup to visitors who have the New User cookie”

You can also add another condition, to only show your popup to new visitors when they’re on a specific page, like the homepage or the cart page, for example. Like so:

And lastly, one more step that many websites are missing:

Step 3: How to delete a Cookie

It’s important that you don’t forget to remove the cookie after you use it (e.g. after firing that popup, survey or whatever you decide to fire when a new user visits your site).

If you don’t, then that cookie will remain even after this visitor leaves your site. So a user might come back 2 days later and because they will still have the New User Cookie, you will identify them as a new user when in fact they are not.

You have to create another Custom Cookie Tag to remove the Custom Cookie 2 that we just created.

This tag should fire right after your hypothetical popup tag.

So what you would do is go to your popup tag and set this “Remove New Users Cookie” tag to fire only after as a Cleanup Tag.

And you’re done.

You have now (hypothetically) created a cookie for new users, used that cookie to trigger a popup, and then removed the cookie from those new users. You’re a GTM badass!

BONUS EXAMPLE: The New User Cookie in action

Let’s look at two more examples in which using our new user cookie might come in handy.

Segmentation is important: Showing the right message at the right time.

So let’s try this:

Use Case #2: Personalized Surveys (Show a survey to New Visitors who spend at least 30 seconds on the page)

Want to show a specific survey to new visitors who spend at least 30 seconds on a specific page?

Easy.

Take the trigger we created earlier:

And let’s create a second trigger with the condition that the user has spent at least 30 seconds on our site:

And now simply create a group trigger which combines the 2 triggers above:

You can now use this group trigger to fire your survey whenever a new visitor spends at least 30 seconds on a specific page.

And you can rest assured that they won’t see this survey again if you don’t want to. Just remember to remove the New User cookie after the survey tag has fired. 🙂

Conclusion

If you need to persist data about your visitors throughout a session (or even after a session), cookies are your go-to solution. And with our new Custom Template, it is now easier than ever to create and delete cookies.

Custom templates are a true game changer and over the next year we will see more and more companies releasing their own custom templates to the public, making more advanced GTM implementations easier for the non-technical users.

If at your company, you find yourself implementing the same custom tags over and over (using custom JS/HTML code), perhaps it is time you asked a developer to create a custom template which would save your team time, and maybe even enable new non-technical team members to implement those tags without having to deal with any JS code.

I hope you found this guide useful and that our custom cookie template can help you with your projects. We’d love to hear your feedback on it as well as any questions you might have, so feel free to send us a message.

Get our Custom Cookie Template delivered to your inbox

Send it to me