EU Cookie Consent With Google Tag Manager

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 provided and use pieces or just take it as inspiration.

Technical Marketing Guide back in 2018, created and shared there way to use Google Tag Manager to manage external cookies and the cookie bar, I have taken the important parts from their page and re-posted below, you can find the original post here.

If you want to use some of the 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 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 Google Tag Manager Recipe Here

I would then suggest taking a read of my Google Tag Manager - Bypass AdBlock Plus post, to make sure this doesn't get blocked.

Google Tag Manager - Bypass AdBlock Plus

I managed to find a way to bypass AdBlock Plus so that Google Tag Manager loads on my IIS 10 Website, i use Google Tag Manager to manage the cookies, and display the cookie bar on several websites.

If you would like to find out how to use Google Tag Manager in this way, please read my EU Cookie Consent With Google Tag Manager post.

Install URL Rewrite

The first step is to install the add-on module for URL Rewrite. With Windows Server 2019, you can use the Microsoft Web Platform Installer (WebPI) to download and install the URL Rewrite Module. Just search for 'URL Rewrite' in the search options and click 'Add'. You can also download the extension from IIS.net - http://www.iis.net/downloads/microsoft/url-rewrite.

Once the module is installed in IIS, you will see a new Icon in the IIS Administration Console, called URL Rewrite. This icon is present at the level or each site and web-application you have in the server, and will allow you to configure re-write rules that will apply from that level downwards.


Configure HTTP Headers

We now need to allow the processing of compressed files, we do that by removal and reinstatement of the HTTP header. To do this, we will first need to create two HTTP Variables in URL Rewrite. After selecting the URL Rewrite Icon and double clicking it in the IIS Manager Console, you will have a 'View Server Variables' action button on the right hand side pane. Click this button to be able to add new server variables.

Click the 'Add' button on the right hand side pane to add a new server variable. We will need to add two variables named HTTP_ACCEPT_ENCODING and HTTP_X_ORIGINAL_ACCEPT_ENCODING as shown here:

 

Configure Web.Config 

Next we need to add the following lines to the Web.Config, being sure to replace YOURDOMAIN.COM.

        <rewrite>
<outboundRules>
<rule name="ReverseProxyOutboundRule1" preCondition="ResponseIsHtml1">
<match filterByTags="Frame, Script" pattern="^http(s)?://www.googletagmanager.com/(.*)" />
<action type="Rewrite" value="http://YOURDOMAIN.COM/{R:2}" />
</rule>
<rule name="RestoreAcceptEncoding" preCondition="NeedsRestoringAcceptEncoding">
<match serverVariable="HTTP_ACCEPT_ENCODING" pattern="(.+)" />
<action type="Rewrite" value="{HTTP_X_ORIGINAL_ACCEPT_ENCODING}" />
</rule>
<preConditions>
<preCondition name="ResponseIsHtml1">
<add input="{HTTP_X_ORIGINAL_ACCEPT_ENCODING}" pattern=".+" />
</preCondition>
<preCondition name="NeedsRestoringAcceptEncoding">
<add input="{HTTP_X_ORIGINAL_ACCEPT_ENCODING}" pattern=".+" />
</preCondition>
</preConditions>
</outboundRules>
<rules>
<rule name="ReverseProxyInboundRule1" stopProcessing="true">
<match url="^proxy\/(.*)" />
<conditions>
<add input="{CACHE_URL}" pattern="^(https?)://" />
</conditions>
<action type="Rewrite" url="https://www.googletagmanager.com/{R:1}" />
<serverVariables>
<set name="HTTP_X_ORIGINAL_ACCEPT_ENCODING" value="{HTTP_ACCEPT_ENCODING}" />
<set name="HTTP_ACCEPT_ENCODING" value=""/>
</serverVariables>
</rule>
</rules>
</rewrite>

Then in your HTML replace the Google Tag Manager header code with the following, being sure to replace YOURCONTAINERID:

    <!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = false; j.src =
'/proxy/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'YOURCONTAINERID');</script>
<!-- End Google Tag Manager -->

And replace the Google Tag Manager body code with the following, being sure to replace YOURCONTAINERID:

    <!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="/proxy/ns.html?id=YOURCONTAINERID"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->