Overseas Jobs | Working and living in the Netherlands

toggle menu
How to implement and integrate a GDPR-proof Cookiebar with Google Tag Manager
Tech

How to implement and integrate a GDPR-proof Cookiebar with Google Tag Manager

On May 25th 2018 the new EU privacy legislation (GDPR) starts. Privacy first is the new standard. This blog discusses how to implement a GDPR proof cookie bar on your website and integrates with Google Tag Manager.

The Business Case

As a webmaster, digital marketeer or webshop administrator, you must explicitly ask permission from your end users for collecting specific user behavior. Roughly speaking, there are four categories of cookies for your data collection:

  • Functional cookies
  • Preferences cookies
  • Statistics cookies
  • Marketing cookies

The user must be able to use the website, even if he has not agreed with your cookies. For each category, the end user must therefore explicitly give permission before you may collect data.

How to get started

The pageview tag (or third-party tags) in Google Tag Manager must be linked to the value of your cookie, containing data about preferences, statistics and marketing. Subsequently, a specific tag can be fired based on the cookie value (basic, preferences, statistics, marketing), possibly accompanied by custom dimensions per category. The following steps are discussed:

  • Placement the GDPR proof cookie script
  • Usage of cookievalue throughout your entire web site
  • Firing tags per cookie value
  • Pageview tag with retroactive effect

Placement of GDPR-proof cookie script

To make it simple, I created a full working example on codepen:

The script works (approximately) as follows:

  • 1. Setup of Google Tag Manager dataLayer;
  • 2. Verify whether a cookie exists with the name 'CookieConsent';
  • 3. If a cookie exists with the name 'CookieConsent', the values ​​of the cookie are loaded into the dataLayer. Then follows the event 'CookieBarStatus';
  • 4. If there is no cookie with the name 'CookieConsent' the cookie bar is shown and the 'NoCookieExist' event becomes available in the dataLayer;
  • 5. If a user clicks on accept, the values ​​of the checkboxes are loaded into the cookie;
  • 6. If a user wants to change the cookies, this can always be done by clicking on the button.

Usage of cookie value throughout your web site

The value of the cookie must be available as quickly as possible (at the top of of the website). After these values are stored in the dataLayer, Google Tag Manager can be executed. Example implementation on Jsfiddle:

Firing tags based on cookie value

The cookie values are now stored into the dataLayer, depending on their status the following events can occur:

  • CookieBarStatus (on page load)
  • CookiePreferencesChange (on change)

CookieBarStatus in Google Tag Manager

The CookieBarStatus event only fires at page load. This event occurs directly after the cookie values are stored into the dataLayer.

Variables on CookieBarStatus

In Google Tag Manager these values ​​can then be accessed by creating a dataLayer variable for each category with the name: {{Category - [CATEGORY_NAME]}}.


For each variable the category name is chosen as naming convention(basic, preferences, marketing, statistics).

Triggers for CookieBarStatus

For each cookie category a new trigger will be created (i.e. Event - CategoryMarketing). The trigger listens to the event: 'CookieBarStatus' and only occurs if the value of the category (in this case marketing) equals true.


Tags for CookieBarStatus

Tags can then be linked to the trigger per category. In this case, a remarketing tag is linked to the marketing trigger.


Firing tag if CookiePreferencesChange occurs

The user should have the possibility to change his preferences at any time. This can be done through a button (or link). As soon as a user clicks on it, the cookie bar appears and his settings are retrieved. If the user then clicks Accept the 'CookiePreferencesChange' event appears in the dataLayer, with the cookie values updated.

Pageview with retroactive time

In order to gain full insight into your users behaviour in terms of time, the time the user opened your web site can be linked retroactively to the pageview using a Custom Dimension. For that, I partly followed the example of Simo Ahava. Three separate setups are required for our implementation:

  • 1. Creating Custom HTML Tag
  • 2. Variable with the timestamp of pageload
  • 3. Hit-based Custom Dimension in Google Analytics
  • 4. Fire tag containing timestamp when user accept cookie

Custom HTML Tag: CU - TimeStampOnPageLoad

On pageload the timestamp value needs to be available as quick as possible. Therefore, a script is needed that assigns the timestamp value to a variable, which can then be linked to a retrospective pageview. This tag will be fired if the event ‘NoCookieExist’ occurs. The script in the Custom HTML tag was copied from Stackoverflow (thanx :)):

This tag will fire if the 'NoCookieExist' event occurs:


Variabele: {{Timestamp - OnPageLoad}}

The GTM variable is linked to the value of the variable timeStampOnPageLoad in the Custom HTML tag:


Custom Dimension in Google Analytics

Next, you can create a Hit-based Custom Dimension in Google Analytics.


Pageview tag with retroactive effect

Finally, a pageview tag can be created, which only fires when the CookiePreferencesChange event occurs and the value of {{TimeStamp - onPageLoad}} is not equal to undefined.


Put the index of the Custom Dimensions created in Google Analytics as value of {[TimeStamp - OnPageLoad}} and the analyzes can begin.


Download GDPR Cookie GTM Recipe

Download your free GDPR Cookie GTM recipe here. Any issues, please contact me.

Download recipe

Robert-Jan Kuyper

Robert-Jan Kuyper

About me

Born in the Netherlands. Passion for SEO/SEA, UX, Web Analytics and Vanilla JavaScript. Expert in living as a Dutchy. Studied Economics, meanwhile Digital Marketer and Front-end Savvy.