Stuifbergen.com

Analytics & Growth Hacking

  • About
  • Contact
  • Professional Services

Find me here

  • Mastodon (social)
  • Mastodon (measure)
  • No more Twitter
You are here: Home / Blog / Google Tag Manager Cookie Consent dialog

Google Tag Manager Cookie Consent dialog

13 July 2016 by jules 21 Comments

Update 2018-05-24: The GDPR sparked renewed interest in this. I’ve made an update to the container. The cookie now gets set with a default path. Thanks to an alert user!

On this page, you can download a Google Tag Manager (GTM) Container that contains a Cookie Consent (opt-in) dialog box, and a set of triggers to use for “opt-in” and “opt-out” tags. No external scripts are needed for it to function.

For now, it’s a simple yes-no system, but with a bit of copying and pasting, you can easily extend it to multi-tiered permissions.

Check out a working demo here!

I’ll explain below how it works and what the features are.

Why ask for Cookie permission?

Well.. you should. It’s the law, at least here in Europe. In practice, you only have to ask it if you use third party tracking (e.g. Google Analytics tracking via Doubleclick) or if you place dozens of adnetwork cookies.

Anyway, you’re probably here with the intention of installing the thing, so here’s how it works.

How it works

The setup is pretty simple: I’ve created a 1st party cookie variable named: Cookiepermission – content.

When the cookie exists, it triggers either:

  1. The trigger: Cookiepermission – no (if the cookie has “no” in it)
  2. The trigger: Cookiepermission – yes (if consent was given, the cookie has “yes” in it)

When the variable is not set (there is no cookie), the “Dialog Tag” named Cookiepermission – ask loads via the trigger Cookiepermission – unknown. This tag does the following:

  1. Show an overlay with an option screen where a question is asked, along with two buttons:
    1. Option “No” button
    2. Option “Yes” button
  2. When clicked, the value “No” or “Yes” is stored in a cookie
  3. Finally, based on the choice made, a “firstpage” trigger goes off
    1. Trigger Cookiepermission – firstpage yes (if “Yes” was answered)
    2. Trigger Cookiepermission – firstpage no (if “No” was answered)

The last triggers makes sure tracking tags are sent on the first page as well, without having to reload the page.

Prefer a visual explanation?

This is the logic in a nice little diagram.

cookieconsent logic

 

Configuration options

There are several GTM Variables that you can use to customize your setup:

  • Question text – here you can configure the Question Text
  • Yes text – the text on the “YES” button
  • No text – the text on the “NO” button
  • Cookie expiry – the number of days the cookiepermission cookie is valid
  • Cookie name – the name of the cookiepermission cookie

Making it look good

For now, you’ll have to edit the Cookiepermission Dialog tag to edit or remove the styling.

Ofcourse, you can include your own stylesheet in the HTML of the page. The overlay and dialog box all have proper id attributes.

Using it

For all your tags that you need opt-in for, you should change the trigger. No more “Page Load” triggers without opt-in. Use the built-in triggers “cookiepermission – yes” and “cookiepermission – first page yes” for those tags.

Google_Tag_Manager triggers

 

I’ve also included “no” triggers in the container. This is not really needed per se, but might come in handy if you want to use it as an exception trigger.

Download and install

The container export can be downloaded here.

You can import this container into your own setup (please test it first – import it into a test container to configure it, then export-import it to your final destination).

Google_Tag_Manager

All tags, triggers and variables are neatly organised into a folder, aptly named cookiepermission, for your convenience.

Need help? Contact me, either in the comments or send a tweet to @zjuul and I’ll guide you along. If you want me to do the actual work for you: use the contact page or send me an email.

 

Photo Credit: https://flic.kr/p/9Mcwzt

Related posts:

Default ThumbnailGTM For WordPress (gtm4wp) Container with Google Analytics Tags Catch exit-intent with a Google Tag Manager trigger https://flic.kr/p/7AuHtETrack non-left mouseclicks with Google Tag Manager Detecting Incognito Mode and using it in Google Tag Manager

Filed Under: Blog Tagged With: consent, cookies, download, Google Tag Manager, permission

Liked this post?

Buy Me a Coffee

Comments

  1. Erik says

    17 November 2017 at 10:16

    hello,
    Get an error importing the json file.

    JSON-parseerfout: mismatched input ‘”en”‘ expecting {‘{‘, ‘[‘}

    What is wrong?

    Reply
    • Erik says

      17 November 2017 at 10:37

      my bad. Just open the link in stead of trying to save target as… thnx for quick reply!

      Reply
  2. Georg says

    27 February 2018 at 15:48

    Hi Jules,
    while importing the json file (saved as…), I get this error in GTM : File format is invalid.
    1

    ​

    2

    ​

    3

    ​

    4

    ​

    5

    ​

    6

    ​

    7

    8

    JSON parsing error: mismatched input ‘”en”‘ expecting {‘{‘, ‘[‘}

    Any thoughts,
    Greetings from Germany,
    Georg
    Site powerded by Squarespace

    Reply
    • jules says

      27 February 2018 at 19:28

      The link is the link to github. The raw json file is here: https://raw.githubusercontent.com/zjuul/gtm-cookieconsent/master/cookieconsent_v3.json

      Reply
  3. Gijs says

    23 March 2018 at 17:00

    Hi Jules,

    Would it be possible by changing your script to set cookies for the root domain (so they are valid across all subdomains)?

    Kind regards,

    Gijs

    Reply
    • jules says

      24 March 2018 at 18:13

      Yes, sure. Read this answer: https://stackoverflow.com/a/5671466/5950710 and change the cookiepermission – ask tag.

      Reply
      • Gijs says

        29 March 2018 at 14:01

        Thanks a lot!

        Reply
  4. Bas says

    25 April 2018 at 16:03

    Great script! Helps a lot. Is it possible to create a link/button function that people can use to change there preference? How can I do that? Thanks in advance.

    Reply
    • Thom says

      28 April 2018 at 09:14

      That’s important as well, because this is also part of the GDPR!

      Reply
      • Kolja says

        18 May 2018 at 11:13

        Hi

        It’s possible to enter additional content and functionalities, rewriting and copy pasting the code in the script. E.g., we added an additional line with a link to an information page. The link and text was added as a constant variable in html format, such as (sorry, text is Dutch):

        Lees hier meer over onze cookies

        Now, we went to the Question tag and added the following parts:

        cpInfo = document.createElement(“a”);
        cpInfo.id = ‘cp-info’;
        cpInfo.style.textAlign = “left”;
        cpInfo.innerHTML = ‘{{cookiepermission – info text}}’;

        below the code for cpNoA

        Then we appended it to the created object by adding the following line to the end of the code

        cpdiv.appendChild(cpInfo);

        just below

        cpNo.appendChild(cpNoA);

        You can do that with different functionalities, also with different selections. I you just want to work based on links ‘yes, I agree….’, the code itself should have all elements to need to get there with a bit copy and pasting.

        Good luck.

        Reply
  5. Carlos M. Díaz Honrado says

    22 May 2018 at 11:20

    Hi Jules.

    There is a little bug in Cookie Permision Consent.

    If you access to homepage and accept or refuse cookies all is fine…

    But is you access to other page or post, and accept or refuse cookies, message it shows till user accept, or refuse in homepage.

    ¿Any idea?

    Reply
    • Carlos M. Díaz Honrado says

      22 May 2018 at 12:16

      I think thats problems is here

      cookiepermission – ask

      function setCookie(value, box) {
      var d = new Date();
      d.setTime(d.getTime() + ({{cookiepermission – expiry}}*24*60*60*1000));
      var expires = “expires=”+ d.toUTCString();
      document.cookie = ‘{{cookiepermission – cookiename}}’ + “=” + value + “; ” + expires;

      // remove box
      box.style.display = ‘none’;

      if (value == “yes”)
      dataLayer.push( { event: ‘cookiepermission first page yes’ } );
      else
      dataLayer.push( { event: ‘cookiepermission first page no’ } );

      }

      Reply
  6. Carlos M. Díaz Honrado says

    22 May 2018 at 17:04

    Hi Again Jules.

    #CookieDrama resolved.

    Problem is the cookiepermission builder function.

    In this function is defined only permission Value & expiry date, but not the path. Is for this that when a user accept, or refuse Cookies in other page different to Home, message shows again & again & again…..

    I modified this function for include path = / in cookiepermision. This is the codde

    function setCookie(value, box) {
    var d = new Date();
    d.setTime(d.getTime() + ({{cookiepermission – expiry}}*24*60*60*1000));
    var expires = “expires=”+ d.toUTCString();
    var path = “path=/”
    document.cookie = ‘{{cookiepermission – cookiename}}’ + “=” + value + “; ” + expires + “; ” + path;

    Happy day

    Reply
    • jules says

      23 May 2018 at 20:38

      Thanks!

      Reply
      • Carlos M. Díaz Honrado says

        25 May 2018 at 07:11

        you’re welcome

        Any idea to block other Cookies differents to Google Analytics Cookies?

        Reply
        • jules says

          25 May 2018 at 10:11

          If you have a tag that sets a cookie, you should use a trigger that only works when `cookiepermission = yes`

          It doesn’t work for server-side cookies on your own domain, and it also doesn’t work when you iframe content that fills your cookiejar with their own stuff.

          Reply
  7. EyeGee says

    20 June 2018 at 23:39

    Used your script… Installation and setting up went perfectly. I got a complaint that tracking is started immediately by default even before the user clicks accept. How to solve this?

    Reply
    • jules says

      21 June 2018 at 07:51

      You have to make sure you do not have any tags firing on “All Pages“. Only fire tags on “cookiepermission – firstpage yes” or “cookiepermission – yes“

      Reply
  8. Carlos M. Díaz Honrado says

    28 December 2019 at 12:06

    Hi again Jules.

    ¿Any idea to implement different “Question Text” in a multilingual website?

    Greats

    Reply
    • jules says

      31 December 2019 at 14:35

      Yes, replace the variable by a Custom Javascript. Something along the lines of:

      function() {
      if ( {{language}} == “es”) return “Spanish text”;
      else return “English text”;
      }

      Reply
  9. Bogdan says

    16 July 2020 at 09:51

    Hi Jules,

    Any idea on how to copy an existing stylesheet from another website for this cookie dialog box?

    Cheers,
    Bogdan

    Reply

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts

  • Analyze AB tests in GA4 via Big Query
  • How to make sure your GA4 events tables do not expire
  • Prepare your cloud project for “Bulk data export” Google Search Console
  • Making Sense of the GA4 Configuration Tag
  • Using Big Query to calculate DAU / MAU

Need help?

  • Contact me

Search

© Copyright Jules Stuifbergen · Powered by Genesis ·