How to disable cookies before consent accepted,
to comply with GDPR

Step-by-step instruction for agencies, marketers and managers
on how to enable cookies after cookie consent is given with Google Tag Manager.

Vlad Korobov
Product Marketing Manager

May 2018
After May 25, 2018, many websites already output cookie consent windows, but only a few (less than 20%) honestly disable cookies before consent is given.

If you open a website in "incognito mode" and see a cookie consent popup, in 90% of cases you will also see a bunch of cookies already stored in your browser.

Typical situation: cookie consent is not given, but the website has already placed cookies which could identify a user. According to GDPR, this is the wrong usage of Personal Data.
cookie consent is not given, but the website already placed cookies
Usually that situation happens unintentionally and is due to a lack of knowledge on how to do it properly and quickly. This article will help you configure a website in the best way to comply with GDPR.
Third party GDPR consent solutions cannot control your website's cookies automatically.
You have to make it yourself.
If you don't have a lawyer and didn't manage to get Privacy Shield, the best solution would be to use the Iubenda policy builder.
Landing page of Iubenda policy builder for GDPR
Cookies are usually placed by multiple marketing tools. The best way to control them is to use Google Tag Manager. But the tag trigger should be appropriately configured and not fire by a PageView event.

Here is the example of a wrong configuration of GTM tag triggers, cookies by default are enabled.
Wrong configuration of GTM tag triggers, cookies by default are enabled
The proper practice would be to wait until a user click the Accept button. Here is the right configuration of GMT tag trigger to disable cookies by default.
Wrong configuration of GTM tag triggers, cookies by default enabled
There is a free script that helps to output popups to get user consent.
Free and open source solution for cookie consent popup with a nice UI design
But if you prefer less work, just use the cookie solution from Iubenda. Place it easily with Google Tag Manager for All Pages of your website.
cookie solution from Iubenda placed in Google Tag Manager for All Pages
After we have a popup to opt into cookies, we have to wait until a user performs an action to accept a policy. In our case, that would be a button and the user should click on it.

If you use a script by Insights, check out the documentation on where to catch an opt-in event.

At Metric.ai we use solution from Iubenda, but the logic is the same for any cookie popup script:
1. Page loads
2. Output popup
3. Catch Accept button click
4. Dispatch JavaScript event for GTM with this code
dataLayer.push({'event': 'iubenda_consent_given'}); 
5. Catch the event with GTM
6. Fire a GTM tag with a tracking pixel
Example of consent window script placed via GTM which signals when consent is accepted
Example of a consent window script placed via GTM that signals when consent is accepted
Here is the full Iubenda solution script we used in GTM:
<script type="text/javascript"> var _iub = _iub || []; _iub.csConfiguration = {"lang":"en","siteId":YOURSITE_ID, "cookiePolicyUrl":"YOUR_CUSTOM_POLICY_URL",
"consentOnScroll": false,
"applyStyles":false,
"banner": { "content": "<p><b>Notice</b></p>\n<p>This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the <a style=\"text-decoration:underline; color:#fff; font-size:14px; font-weight:normal; \" href=\"YOUR_CUSTOM_POLICY_URL\" class=\"iubenda-cs-cookie-policy-lnk\">Privacy Policy</a>. By closing this banner, clicking a link or continuing to browse otherwise, you agree to the use of cookies.</p>", "innerHtmlCloseBtn": "<a class=\"iubenda-cs-close-btn\" style=\"margin:0 !important; text-decoration:none !important; font-size: 14px !important; color:#fff !important; position: absolute !important; top: -8px !important; right: 0 !important; border: 1px solid white !important; border-radius: 4px; padding: 4px 8px; letter-spacing:1px;\" href=\"javascript:void(0)\">ACCEPT</a>", "backgroundColor": "#000000" },
"cookiePolicyId":64723368,
  callback: { 
    onConsentGiven: function(){
        console.log("iubenda_consent_given");
        dataLayer.push({'event': 'iubenda_consent_given'});
      	dataLayer.push({'cookie_consent': 'true'});
console.log("iubenda_consent_given");
    }
  }
}; 
</script><script type="text/javascript" src="//cdn.iubenda.com/cookie_solution/safemode/iubenda_cs.js" charset="UTF-8" async></script>
<style type="text/css"> #iubenda-cs-banner{ top: 0px !important; left: 0px !important; position: fixed !important; width: 100% !important; z-index: 99999998 !important; background-color: #000000cc !important;; } .iubenda-cs-content{ display:block; margin:0 auto; padding: 20px; width:auto; font-family: Helvetica,Arial,FreeSans,sans-serif; font-size: 14px; background: #00000000; color: #fff; } .iubenda-banner-content{ } .iubenda-cs-rationale{ max-width: 900px; position:relative; margin: 0 auto; } .iubenda-banner-content > p { font-family: Helvetica,Arial,FreeSans,sans-serif; line-height: 1.5; } </style>
Customize the script by pasting your Website ID, Policy URL, minor styles and the configuration you need. Test the script with the GTM Preview.
Use Google Tag Manager Preview to test the popup script before releasing it.
Use Google Tag Manager Preview to test the popup script before releasing it.
To see if the Accept button works properly output consent-given event in the console with such code:
console.log("consent_given");
Paste it in the same place where you dispatched the event to GTM:
dataLayer.push({'cookie_consent': 'true'});
console.log("iubenda_consent_given");
In preview mode, go to your website. Before clicking on or scrolling through anything, open a browser console. Accept the consent and check if the event is caught.
Google Tag Manager Preview for the consent event
We will react to this event with all our GTM tags. We need to create a new GTM Trigger like this:
GTM Trigger to catch “consent given” event
GTM Trigger to catch "consent given" event
Now we have to change the trigger in all our tags. Instead of All Pages - Page View, choose the recently created trigger like this:
Each GTM tag should be fired on consent_given trigger
Each GTM tag should be fired on consent_given trigger
If everything is done correctly, no scripts and cookies should be placed before consent is given. Test that in Google Tag Manager preview mode (don't forget to refresh and clear cookies for the website before):
GTM Scripts enabled and place their cookies only after consent is given by a user
GTM Scripts enabled and place their cookies only after consent is given by a user.

If you have any question ask us on Facebook, LinkedIn, or Twitter.