• GTM Courses
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
  • About
    • About
    • Contact
  • GTM Courses
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
  • About
    • About
    • Contact

May 14, 2017

Cookie Consent Notification with Google Tag Manager

IMPORTANT UPDATE: Due to GDPR (General Data Protection Regulation) this cookie consent is not relevant anymore. Read this step-by-step guide instead how to implement a new GDPR Cookie Consent Notification with Google Tag Manager.

=======

Have you ever wondered why some sites display a cookie consent notice? If you or your business is located in the European Union, or if you are targeting EU citizens AND you’re using tracking software (i.e. Google Analytics), then you need to display a cookie consent notification on your website. In this Google Tag Manager Cookie Consent guide, I’ll show you how to install one without much hassle.

 

Short context

In May 2011, a European Union (EU) Directive was adopted by all EU member countries to protect consumer privacy online. This piece of privacy legislation requires that covered websites:

  • Let users know if they are using cookies.
  • Explain what data is gathered through the use of cookies and how that data is used.
  • Gather user consent to the use of cookies.

cookie consent

The law is enforced by governing bodies in the EU, and therefore cannot apply unilaterally to everyone. If you live outside of the EU, have a website hosted on a server outside of the EU, and are targeting consumers anywhere other than the EU, you don’t need a cookie consent notice.

But since it’s pretty difficult to avoid visitors from European Union, you should add a consent notification.

 

So what’s the plan?

For the notification to work, you’ll need to complete the following steps:

  • Get a Javascript code of Cookie Consent Notification. It displays a message to your visitor and once he/she clicks Got It button, saves a cookie in visitor’s browser. The cookie makes sure that a person does not see the notification on every page load. If a visitor uses a different browser or clears browser cache/cookies, the notification will be displayed once again.
  • Modify the code in order to match notification’s style with your website’s. In addition to that, you’ll need to edit text as well.
  • Create a Privacy Policy page and paste its link to notification’s Javascript code.
  • Publish Javascript code with help of Google Tag Manager.
  • Test, test, test.

 

Cookie consent code

For your convenience, I have created a ready-made Google Tag Manager Cookie Consent Recipe. Just download it, import it to your GTM container and follow the instructions.

DOWNLOAD COOKIE CONSENT RECIPE FOR GTM

If you’re willing to better understand how everything works, continue reading.

Update: Since GDPR (General Data Protection Regulation) changed the way we should be tracking users and getting their consent, this guide became irrelevant. I started using a different cookie consent tool offered by OneTrust. Here is a new step-by-step guide.

For Cookie Consent Javascript code, I chose a free solution offered by Insites (which you have already seen on my website). They offer a user-friendly solution with configuration wizard. You can choose notification’s position, layout, color theme, edit content, etc.

Insites cookie consent setup wizard

After you finish configuring your cookie consent notice, on the right side of the screen, you’ll see a read-to-use code. It should look like this:

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
 "palette": {
 "popup": {
 "background": "#ebebeb",
 "text": "#3c3c3c"
 },
 "button": {
 "background": "#5c5c5c",
 "text": "#ffffff"
 }
 },
 "theme": "edgeless",
 "content": {
 "message": "This website uses cookies to ensure you get the best experience on our website.",
 "dismiss": "Got it ",
 "link": "Learn more",
 "href": "https://www.analyticsmania.com"
 }
})});
</script>

If you use my Google Tag Manager Cookie Consent Recipe, then this code is already created as a Custom HTML tag. In that case, do not forget to edit the following parameters in the code:

  • background and text colors (to match the style of your brand).
  • message (this is the main text of the notification).
  • dismiss (title of the main button).
  • link (“Privacy Policy” link title).
  • href (actual link to your “Privacy Policy” page. I have explained how to create a PP page in the next chapter of this blog post.).

Great! The code is complete. Now, you should take care of Privacy Policy page.

 

How to create a privacy policy page

In this chapter we’ll need to find a quick solution how we can easily create this page without the help of lawyers whose services are pretty expensive 🙂

My recommendation for you: don’t try to invent the wheel, it’s already been created. Use others’ creations and adapt them to your needs.

There are two quick ways to get a Privacy Policy:

  • Use a Privacy Policy Generator.
  • Take a look at what well-known players in your industry (or competitors) are using.

 

Privacy Policy Generator

Here are several alternatives to choose from:

  • Getterms.io – generates 2-in-1: Terms of Use and Privacy policy.
    • Pros – easy to generate and free.
    • Cons – a bit too broad, does not cover various nuances and isn’t personalized.
  • Termsfeed – Generates a Privacy Policy, adapted to your business.
    • Pros – easy to generate, personalized.
    • Cons – isn’t free, price depends on your needs and technologies you use.
  • SerpRank Generator (requires a free account) + Freeprivacypolicy.com. For Analytics Mania, I just took these two resources and used their best/most suitable parts.
    • Pros – free.
    • Cons – requires a bit more effort while editing the content.

 

“Borrow” ideas from Well Known Websites/Competitors

Several reasons to choose this method:

  • Owners of a well-known website (usually) invest in such content. They have probably consulted with lawyers to create it.
  • If you find a leader in your industry (or a pretty similar competitor) who has implemented Cookie Consent Notification on their website, that’s even better! They have prepared a ready-made template which should apply to your business as well.
  • Well, it’s free. While I am not encouraging you to 100% steal their policy, you can take it as a solid draft and easily edit it + cut unnecessary parts.

I will not explain Privacy Policies in detail, because I am not an expert in this field. If you wish to learn more, here are two resources for a good start – 7 steps to writing a good privacy policy and How do you create a privacy policy without spending a lot of money on lawyers? (Quora).

 

Set up cookie consent code with Google Tag Manager

For this part you’ll need to complete the following steps:

  • Create a trigger – Page view or DOM ready. In my Google Tag Manager Cookie Consent Recipe, I used DOM ready. I tried to utilize the Window Loaded trigger, but it did not work. So save your time and just use one of two aforementioned options.
  • Create a Custom HTML tag and paste our modified Cookie Consent Javascript code and link it with DOM Ready trigger.
  • Test and publish.

 

Create a trigger

In your Google Tag Manager account, go to Triggers and create new one with the following settings:

Pageview - DOM ready

 

Create a tag

Now, let’s head over to Tags and create a Custom HTML tag which will contaa in code of cookie notification. Its settings should look like this:

Google Tag Manager Cookie Consent - custom HTML tag

cHTML (in the title) stands for Custom HTML. If you wish to learn more about naming conventions in Google Tag Manager, read this awesome blog post by Lunametrics.

If you skipped some chapters of this blog post, make sure you have edited the following settings in the Javascript of cookie consent notification:

  • background and text (to match colors of your site).
    color codes
  • message (this is the main text of the notification).
  • dismiss (title of the main button).
  • link (“Privacy Policy” link title).
  • href (actual link to your “Privacy Policy” page).

 

Time to test

Use Google Tag Manager’s Preview and Debug mode to test whether the notification appears when it’s supposed to. Click “Got It” button in the cookie consent dialog and refresh the page. If it did not reappear, you’re good to go!

If you’re new to GTM, here’s a comprehensive guide to Preview and Debug mode. It’s an essential tool in the tag deployment process, so make sure you fully understand its capabilities.

 

Google Tag Manager Cookie Consent: Conclusion

If your website visitors are from the European Union or your business/website is located in the EU, you must display a cookie consent notification which informs visitors that you’re using cookies.

In this blog post, I explained how you can easily generate a Javascript code of cookie notification and implement it with help of Google Tag Manager.

I am using that very same solution on analyticsmania.com as well. If you don’t like its style, head over to Cookie Consent by Insites and generate your own code.

For your convenience, I have created a ready made Google Tag Manager Cookie Consent Recipe. Just download it, follow the instructions and publish on your website.

Julius Fedorovicius
In Google Tag Manager Recipes Google Tag Manager Tips
16 COMMENTS
David Brown
  • Jun 28 2017
  • Reply

Hi Julius, great post. This has been really useful to me. Until recently, I'd never used Javascript, Tag Manager or Analytics. However, I now have a website up and running on Google Cloud Platform with a compliant Cookie Consent script.

I tried to use your method as written above but found that the Insite Cookie Consent popup wasn't showing reliably whether I used Page View, DOM Ready or Window Loaded. I gave up and went back to having the script embedded in the website HTML.

Not wanting to be beaten, I came back and I now have the Cookie Consent code running in GTM 100% reliably. To do this I had to paste it in without wrapping it in "window.addEventListener("load", function(){}" - I guessed that GTM is going to trigger the code itself and doesn't need a separate listener acting on Window Loaded.

I've gone a step further and I now only trigger the Analytics code if the cookie: cookieconsent_status is present and contains "dismiss". This way no tracking is done until a user consents (and doesn't opt-out).

Any thoughts?

David

    Julius Fedorovicius
    • Jul 4 2017
    • Reply

    Good job! You took this to the next level. This is exactly how you should implement opting-out from web tracking.

Vince
  • Sep 11 2017
  • Reply

Thank you for the article. I'm currently trying to get cookie consent set up on one of my sites and I was wondering if this solution would only be isolated to just users from the EU? Preferably, I would like for the cookie consent banner to be seen only by the people residing within the EU. Is this possible with this solution? Thank you!

    Julius Fedorovicius
    • Sep 12 2017
    • Reply

    Hey,
    What if he visitor is in the EU but is using VPN service which changes his/her IP address? I cannot think of a robust solution to display the message only EU residents.

      EricC
      • Jun 5 2018
      • Reply

      If your company is registered in the EU, it does not matter at all: you have to display this message worldwide (= to all visitors). If not, I think you can safely ignore such a case. Using a VPN is like IP-masking anyway, in the end there's no PII.

Dave Toliver
  • Mar 30 2018
  • Reply

Thanks, Julius! Fast forward 9 months from when this post was written, and the new big questions are around GDPR. And we don't have this solved yet. :)

I'm wondering if you have any thoughts on how we solve the cookie acceptance issue as it relates to GDPR where the user has to be given the option to both accept it, or decline cookies?

In other words, I think the next needed level is two buttons on this popup... "Got it" and "No, don't track me", whereby the user opts out of having ANY cookies dropped.

It would be great if this could all be controlled/managed by GTM vs. a paid third party software or something else.

Thoughts/solves?

    Julius Fed
    • Apr 3 2018
    • Reply

    Hi, I didn't have a chance to think this through (yet), but it's on my calendar for this/next week. I'll let you know when I have some updates.

Daniel McClure
  • Apr 19 2018
  • Reply

@Dave & Julius: I'm not sure if the Insites code has been updated since you adopted it or not but you can select a compliance type of "opt-in" and it will give you an acceptance and dismissal link. Both drop a cookie letting confirming the decision and you can use that for triggering what you do with the rest of your tags so you can meet GDPR compliance.

    Julius Fed
    • Apr 20 2018
    • Reply

    Thanks, Daniel! I will give it a try in the nearest future.

Alex
  • May 11 2018
  • Reply

@Daniel - I haven't checked the Insites code, but if as you said it drops a cookie for opt-out it's not GDPR compliant.

I've been looking for an open source solution such as the Insights code, but to be GDPR compliant we need to store:

The person’s name
The date of consent
A copy what they have agreed to

To be compliant.

    Alex
    • May 11 2018
    • Reply

    Specifically, "Keep records to evidence consent – who consented, when, how, and what they were told."

    https://ico.org.uk/for-organisations/guide-to-the-general-data-protection-regulation-gdpr/lawful-basis-for-processing/consent/

Claudio
  • May 22 2018
  • Reply

Hello,

has anyone been able to use the compiance feature of the Insites code to allow cookies to be disabled the cookie before consent with GTM?

    Daniel McClure
    • May 22 2018
    • Reply

    Yes, this is the solution that I built here:

    https://themodernentrepreneur.com/admace-gdpr-wordpress-gtm/

    You may also want to check out the latest post on this blog but it doesn't use the insites solution:

    https://www.analyticsmania.com/post/gdpr-cookie-consent-notification-with-google-tag-manager/

DeDe
  • May 23 2018
  • Reply

Could anyone explain why this method is no longer valid?

It seems I'll have to find a different solution for GDPR since Cookie Consent doesn't appear to be a valid option as of right now.

    Julius Fed
    • May 24 2018
    • Reply

    Hi, from May 25th, tracking tags must be fired only after a visitor gives a consent.

    Regular (old) cookie consent does not impact/block tracking tags, therefore it's not compliant.

    Here's a new guide you should check https://www.analyticsmania.com/post/gdpr-cookie-consent-notification-with-google-tag-manager/

EricC
  • Jun 5 2018
  • Reply

It's not necessarily irrelevant since you can chose to init script using opt-out as your compliance type: https://cookieconsent.insites.com/documentation/disabling-cookies/

Leave a comment Cancel reply

Your email address will not be published. Required fields are marked *

 

Hi, I'm Julius Fedorovicius and I'm here to help you learn Google Tag Manager and GA (but mostly GTM). Join other 100 000+ monthly visits and 14000+ newsletter subscribers in this exciting journey. Read more
Essential resources


Popular articles
  • 🔥 GTM Form Tracking: 7 Effective Methods
  • 🔥 dataLayer.push: The Guide
  • 🔥 GTM vs Google Analytics
  • 🔥 99 Things You Can Do with GTM
  • 🔥 Common GTM Mistakes
  • 🔥 Data Layer: Ultimate Guide
  • 🔥 60+ Custom JavaScripts for GTM
Analytics Mania
  • Google Tag Manager Courses
  • Google Tag Manager Recipes
  • Google Tag Manager Resources
  • Google Tag Manager Community
  • Login to courses
Follow Analytics Mania
  • Subscribe to newsletter
  • RSS feed
Recent Posts
  • Track Clicks with Google Analytics 4 and GTM
  • A Guide to DebugView in Google Analytics 4
  • How to Find Time to Learn New Skills?
Analytics Mania - Google Tag Manager and Google Analytics Blog | Privacy Policy
Manage Cookie Settings