Daniel Setzermann

EU Cookie Consent for GDPR with Google Tag Manager

First of all: I’m not a lawyer, so use this approach at your own risk, I cannot and will not guarantee that his solution to comply with GDPR with the support of Google Tag Manager is valid.

The EU e-Privacy Directive Law going into effect on the 25th of May in 2018 will force websites catering to european visitors to follow the Commission’s guidelines on privacy and data protection and inform users that cookies are not being used to gather information unnecessarily.

The ePrivacy directive – more specifically Article 5(3) – requires prior informed consent for storage or for access to information stored on a user’s terminal equipment. In other words, you must ask users if they agree to most cookies and similar technologies (e.g. web beacons, Flash cookies, etc.) before the site starts to use them.

Important Notice: This guide is not really meant to be followed step by step as it is a very custom solution. Instead take the information I provided and use pieces or just take it as inspiration. My solution is by far not the most elegant I’m sure but maybe there are bits and pieces that might be helpful to your approach of getting your site ready for GDPR.

Update 23.05.18:

New Approach: Strict Approach with Preference-Management

  • Consent on certain cookie categories only by clicking “accept”.
  • Categorisation of cookies in different categories.
  • Cookie-Preference Management.

I’ve updated my cookie consent with Google Tag Manager quite a bit. My new “solution” is a bit more strict and allows for categorisation of cookies.

If you want to use some of my code, here’s a little FAQ:

  • Adjust the “Cookie Base URL” Macro to match your URL otherwise the cookies won’t set correctly.
  • There are a couple “Example” Tags included to show you how your tags need to fired with this approach.
  • Be sure to update the “Cookie Bar Text” variable to adjust the text and links accordingly.
  • Adapt the “Cookie Settings Pageview” Trigger to match your cookie-settings page – this trigger and the Tag “Settings Seen Cookie” will save the settings when they are only “viewed”. This Tag would be optional – I just found it helped the user experience.

This is the markup for the “cookie settings” page:

You could just use that code within a page in wordpress and it should work.

<input id="consent_performance" type="checkbox" /><label for="consent_performance">Performance Cookies</label>

<input id="consent_targeting" type="checkbox" /><label for="consent_targeting">Targeting Cookies</label>

<button type="button" class="button" id="consent_save">Save Settings</button>

→ Download the GTM Recipe

Old Approach: How to implement a cookie consent solution with Google Tag Manager

With the solution outlined below I wanted to make sure these requirements of the GDPR are met.

  • The user is informed.
  • The page adheres to Privacy by Default – meaning that no personal data is transmitted just by visiting the site. In plain english: No Facebook Pixel is fired just from opening the site.
  • The user has the right to object to the data transmission.

What is happening once a visitor enters the site

  • When a user enters the site the Cookie Consent Cookie is read to check if consent was given before.
  • The Cookie Bar is shown because no consent was given yet.
  • No third-party cookies are placed yet.
  • The user gives consent by either scrolling the page or clicking on “ok” in the cookie bar.
  • This event triggers the consent_event
    • The consent itself is saved to a first-party cookie.
    • The marketing-pixels (e.g. Facebook or Google Analytics) are triggered.

If the consent was given before

  • The Cookie Consent Cookie is set to true from a prior user consent (e.g. by scrolling or clicking “ok”)
  • The Cookie Bar is hidden because consent was already given.
  • The consent_event is immediately called.
    • The marketing-pixels (e.g. Facebook or Google Analytics) are triggered.

These Tags / Triggers are contained

  • Cookie Bar This Tag contains a complete cookie consent bar informing about the use of cookies. Once the user taps “ok” the cookie bar is hidden and a consent_event is pushed to the DataLayer.
    • There is a part in the code that reads innerHTML, that you have to adjust to match your sites privacy policy URL and personal choice of words.
  • Cookie Scroll Consent This Tag contains a script that checks for a scroll event. If the user scrolls the website:
    • A first party cookie is written to save the users consent.
    • The consent_event is pushed to the DataLayer.
  • Cookie Consent Global Settings is a Custom HTML Tag that controls a button in the privacy policy for the the user to object to the use of “marketing-cookies”.
    • To make it work you’d need to add this code to your privacy-policy or another part of your site where it makes sense <button id="disablecookies" class="button">Marketing-Cookies deaktivieren</button>* The Cookie Consent Cookie is a variable that stores the value of the first party cookie called cookie_consent
  • Consent Event is a Trigger that is called when the consent_event is being called by other Tags. It will in turn fire all marketing tags like Facebook or Analytics.
  • Cookie Consent True is a Trigger that fires if the consent_cookie cookie is set to true. It’s used to immediately fire the marketing tags if consent was given prior.
  • Set Cookie Consent is a Tag that creates the first party cookie to save the users consent. It is triggered by the Consent Event.
  • Cookie Consent DataLayer Event is a Tag that pushes the consent_event into the DataLayer. It is triggered by the Trigger “Cookie Consent True”.

Download the whole mess of triggers / tags / variables as one Google Tag Manager Recipe. Be sure to choose merge, don’t overwrite your data. You might even want to import the stuff into a new workspace.

→ Download the GTM Recipe

In

,