Making your website GDPR compliant boils down to three main things: SSL certificate, a good Privacy Policy and not tracking user data without first consent. In this article we'll be focusing on the the Privacy Policy and user consent.

But wait, What's an SSL Certificate?

SSL stands for secure sockets layer and encrypts the data sent to and from the browser and server. All websites these days should have an SSL certificate as Google’s HTTPS Everywhere initiative alone guarantees a slight ranking boost. On top of this, Let's Encrypt offer free SSL certificates, so there's really no excuse! If you have an SSL certificate on your website you should see something simialr to the below in your address bar:

SSL certificate show in address bar of browser

If you haven't got an SSL certificate, you really should. Get in touch and we'll see what we can do to get your website up-to-date! For a more in-depth read about becoming fully GDPR compliant read my The GDPR – new data protection regulations and your website article.

Contents

This article is a little lengthly, so you can skip steps 1 - 3 if you already have a Google Tag Manager and Iubenda account. If not, read on.

  1. Introduction to Google Tag Manager and Iubenda
  2. Get set up with Google Tag Manager
  3. Create a Iubenda account and configure
  4. Configure Google Tag Manager
  5. Implement into your website
If at anypoint during this article you feel overwhelmed or unsure, please do not hesitate to get in touch. I can implement this into most websites and currently offering this at a 50% discount at £49.95+VAT. If you are interested simply get in touch.

1. Introduction to Google Tag Manager and Iubenda

What is Google Tag Manager?

Google Tag Manager is a tag management system that allows you to quickly and easily update tags and code snippets on your website or mobile app. Once the Tag Manager snippet has been added to your website or mobile app, you can configure tags via a web-based user interface without having to alter and deploy additional code. This reduces errors and frees you from having to involve a developer whenever you need to make changes.

https://support.google.com/tagmanager/answer/6102821?hl=en

Essentially, once setup you can add code, like marketing scripts, to any page on your website, without ever needing to interact with a developer. There are of course more advanced and complex implementations, like eCommerce goal tracking, that occasionally need the use of a developer (you're not getting rid us of that easy!), however, for a marketing team that doesn't want to be held up with development delays Google Tag Manager is a great solution.

We'll use it to listen for a unique event trigger by Iubenda once user consent is given to then trigger our analytics scripts.

What is Iubenda?

Iubenda is an attorney-level solution to make your websites and apps compliant with the law across multiple countries and legislations. It can provide a Privacy and Cookie Policy Generator and Cookie Solution. When generating a Privacy Policy you select the "services" like Google Analytics and Iubenda will write all the required legal text for you! And even better, it's continuously updated by their legal team so once you implement their script, your Privicy Policy will always be up-to-date! Great huh!

Get 10% off!
Using the link below you can get 10% off your first years subscription to Iubenda.
Get started with Iubenda

Already a MB Web Studios customer?
I provide, setup and configure an Iubenda license for all my client websites that I build. If you're interested, why not get in touch?

Now, with the introductions out the way, let's get stuck in!

2. Get set up with Google Tag Manager

Firstly, you'll need to create a free Google Tag Manager account. All Google services and products can be logged into with any Google account. Once you've created an account, you'll be asked to create a new account and conainer within Google Tag Manager. Enter your company name and select your country:

Create an account in Google Tag Manager
‍Create an account in Google Tag Manager

When happy click Continue and enter the container information:

Google Tag Manager container setup
‍Google Tag Manager container setup

Click on Create and accept the Terms and Conditions. Once accepted, you'll be sent to your container overview and prompted with the below:

Google Tag Manager code snippet
‍Google Tag Manager code snippet

Now, you may need your developer here, however, if you're using Webflow like I do for most of my client websites, you can go into Project Settings > Custom Code then:

  • copy the code in the top box into the Head Code section
  • copy the code in the bottom box into the Footer Code section

But I have a WordPress website like everyone else, what can I do?
You can read this artice from LunaMetrics on how to install Google Tag Manager on WordPress.

I'm still stuck.
Then get in touch I'd be happy to help out as best I can.

That's it for Google Tag Manager

This might all seem a little overwhelming, however, don't get scared by these code snippet, they really are just a case of copy + paste.

3. Create an Iubenda account and configure

Next we need an Iubenda account. Iubenda offer a completely free tier, however, there are some limitations in this where a lot of the "services" are not available for non-pro plans. For a single app/website you're looking at around $27 a year, that's like under £2 a month, so it's not bank breaker! Remember to grab your 10% discount!

Iubenda is really intuitive, however, they do also have a great getting started guide if you get stuck.

Once you're all setup, be sure to enable the Cookie Solution. It will allow you to customise the style of the notification. You'll then need to grab the embed code that should look a little like below:

~[https://gist.github.com/mbaxter91288/3651b3ed3604536adde6bf76e7247c2a.json?file=Iubenda Cookie Solution - Before.html]~

We now need to modify the code to include this new section. This will allow us to create our trigger in Google Tag Manager and tell it the user has "given consent" for cookies to be dropped.

~[https://gist.github.com/mbaxter91288/3651b3ed3604536adde6bf76e7247c2a.json?file=Iubenda Cookie Solution - After.html]~

You'll need to add this code snippet to every page on your website. Again you may need a developer for this, but if you are using Webflow you can simply paste this into the Project Settings > Custom Code > Footer Code section below the Google Tag Manager script we added in step 2.

4. Configure Google Tag Manager

We now need to head back over to our Google Tag Manager Container and create a new Variable. This can be done by clicking the Variables menu item then New:

Google Tag Manager create new Variable
‍Google Tag Manager create new Variable

We then need to select a 1st Party Cookie and fill in the details like below. You'll need to replace the '_iub_cs-XXXXXX' with your cookiePolicyId that can be found in the script in step 3. When you're happy, click Save in the top right.

Google Tag Manager create new 1st Party Cooke - Iubenda
Google Tag Manager create new 1st Party Cooke - Iubenda

We now need to create our two triggers: Consent Given and Consent Not Given. Select Triggers from the side menu and click New.

Creating the Consent Given trigger

We'll need to select the following information:

  • name: Consent Given (this can be anything but name it something logical)
  • type: Custom Event
  • event name: iubenda_consent_given

This should look like the below:

Consent Given trigger configuration
Consent Given trigger configuration

Creating the Consent Not Given trigger

We'll need to select the following information:

  • name: Consent Not Given (this can be anything but name it something logical)
  • type: Page View
  • fires on: Some Page Views
  • Select the Cookie - Iubenda we created in the previous step from the dropdown
  • Then select Does not contain
  • Then enter "consent":true

This should look like the below:

Consent Not Given trigger configuration
‍Consent Not Given trigger configuration

With both of these triggers created, we can now add our analytics scripts. This is a little out of the scope of this project, however, to get you going let's add your Google Analytics code snippet. Head over to Tags in the side menu and click New.

Universal Analytics tag configuration with consent triggers
Universal Analytics tag configuration with consent triggers

There are a few important things to note here:

  • Triggers - we have GA firing on all pages or when consent is given. However, we've added an exception. If consent has previously been denied, the script will not run and cookies not dropped.
  • Tag firing options - this needs to be set to Once per page as shown otherwise you could have your scripts being added twice - once for All Pages and once for Consent Given

That's it for the configuration of Google Tag Manager. Any scripts you now add that use cookies you can add the above triggers and rest assured they won't log any user information before consent is given.

5. Publish your container

Now finished you'll need to push these changes live! In Google Tag Manager simply click the Submit button in the top right corner:

Submit changes in Google Tag Manager
Submit changes in Google Tag Manager

You'll be met with an overview of the changes and it's good practice to add a version name and description, however, these settings are not required, you can simply press Publish in the top right.

Publish changes in Google Tag Manager
‍Publish changes in Google Tag Manager

Congratulations!

Well done for getting this far. There's some complicated sections in there, but the initial setup is the hardest bit. Once it's setup, adding new scripts with these triggers is really simple. And remember, if you get stuck feel free to get in touch and I can implement this for you.

FAQs