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) -->

Fix blury apps in Windows 10

For a while I have been having a rather annoying issue on my main PC, where Chrome, Edge (Chromium version), Opera, Microsoft Teams, Atom, Postman and GitKraken would all go blury if out of focus.

After some Googling, and loads of answers blaming the Windows 10 setting to auto fix blury apps (it wasn't this by the way), I found the solution...

It turns out it was my Nvidia graphics driver configuration, the fix is below:

Nvidia Video Cards

  1. Open the Nvidia Control Panel window by clicking the Nvidia icon in the system tray or the Start menu.
  2. Click the "Manage 3D Settings" link in the 3D Settings section.
  3. Click the "Antialiasing - Mode" option to select it, and then select "Off" in the box next to it.
  4. Click "Apply" to apply the new settings, and then close the Nvidia Control Panel window.

Apparently there is also a fix for ATI cards.... although I cannot confirm this as I do not have one...

ATI Video Cards

  1. Open the Catalyst Control Center window by clicking the Catalyst icon in the system tray or in the Start menu.
  2. Click the "3D" node in the left pane, and then click the "Anti-Aliasing" link to view the antialiasing settings in the right pane.
  3. Select the "Use application settings" option in the "Smoothvision HD: Anti-Aliasing" section. Each application uses its own antialiasing options, so you just need to turn off the antialiasing option in the application's settings.

Part 6 - Making it all come together

The original source for the following tutorial on how to setup a Plex Media Server with GSuite has gone offline, so I thought i would re-post it so it's not lost.

Everything below is simply lifted from their website (with minor tweaks) (Tech Perplexed / techperplexed.ga)

Well done, after finishing Part 5 - Mounting the drive(s) you are ready to roll! But, wait, isn't there a lot more to do? No... not really. You can now visit https://app.plex.tv/web - your brand new Plex server will be there. Bet you didn't know it would be this easy, did you?

Now I'm not going to teach you how to set up Plex, there is ample information on the Plex website for that. What you do need to know though is where to find your content.

So let's add a library and click "Browse for Media Folder".

You will see the services you created on the left hand side of your selection. If you just want to use Rclone, all you need to do is click Plex and add the folder(s) of your choice to your library.

That's all... You can stop sweating and start watching as soon as Plex has finished scanning your content!

Part 5 - Mounting the drive(s)

The original source for the following tutorial on how to setup a Plex Media Server with GSuite has gone offline, so I thought i would re-post it so it's not lost.

Everything below is simply lifted from their website (with minor tweaks) (Tech Perplexed / techperplexed.ga)

You made it up to here, you finished Part 4 - Setting up Rclone and/or Plexdrive and are still with it, congratulations! The hardest parts are done, it'll be downhill from now on. Promise! We now need to mount our drive so that Plex can access it as if it is just one giant external drive.

Mounting the Google drive (Rclone)

You are probably still logged in with your plexuser account, which is exactly what we want.

Let's create the required folders first:

mkdir -p /home/plexuser/logs
mkdir -p /home/plexuser/uploads

Creating the mount script:

sudo nano /etc/systemd/system/rclone.service

Then paste (right click):

[Unit]
Description=Mount and cache Google drive to /media/Plex
After=syslog.target local-fs.target network.target
[Service]
Environment=RCLONEHOME=/home/plexuser/.config/rclone
Environment=MOUNTTO=/media/Plex
Environment=LOGS=/home/plexuser/logs
Environment=UPLOADS=/home/plexuser/uploads
Type=simple
User=root
ExecStartPre=/bin/mkdir -p ${MOUNTTO}
ExecStartPre=/bin/mkdir -p ${LOGS}
ExecStartPre=/bin/mkdir -p ${UPLOADS}
ExecStart=/usr/bin/rclone mount \
  --rc \
  --log-file ${LOGS}/rclone.log \
  --log-level INFO \
  --umask 022 \
  --allow-non-empty \
  --allow-other \
  --fuse-flag sync_read \
  --tpslimit 10 \
  --tpslimit-burst 10 \
  --dir-cache-time=160h \
  --buffer-size=64M \
  --attr-timeout=1s \
  --vfs-read-chunk-size=2M \
  --vfs-read-chunk-size-limit=2G \
  --vfs-cache-max-age=5m \
  --vfs-cache-mode=writes \
  --cache-dir ${UPLOADS} \
  --config ${RCLONEHOME}/rclone.conf \
  Gdrive: ${MOUNTTO}
ExecStop=/bin/fusermount -u -z ${MOUNTTO}
ExecStop=/bin/rmdir ${MOUNTTO}
Restart=always
[Install]
WantedBy=multi-user.target

Of course you will need to replace all instances of plexuser with your own username.

When you are done, save the file by typing Ctrl-O, Enter to save, then Ctrl-X to exit.

You will need to enable the service. Type

sudo systemctl enable rclone.service

Reload the service so it'll work:

sudo systemctl daemon-reload

You will need to reboot your server now. Type

sudo reboot

You may need to wait a few seconds for the server to be back online again... just enough time to grab another cup of coffee. You deserve a break.

Click away the PuTTY session (it has become unresponsive anyway). You are done now and you can proceed to Part 6 - Making it all come together.