Documentation index

Cookie solution ›

How to use Google Tag Manager to simplify the adoption of cookie law requirements


Below we will explain how to use Google Tag Manager with the iubenda Cookie Law Solution to turn on any JavaScript that use cookies only after the user has consented to the use of said cookies.

Important:
Using Google Tag Manager is highly recommended given that it drastically simplifies the adoption of the cookie law requirements. However, it’s only effective for scripts that aren’t “positional”. “Non-positional” scripts are all scripts that don’t visualize a specific element at a given place in the page. In short, you can use this solution for all analytics tools, but not for AdSense banners, Youtube videos or social buttons or wigets of any kind.

The example below shows the activation of the Google Analytics script after the user provides consent using the disclosure banner.

Screen-Shot-2015-05-20-15-02-57-1

Google Tag Manager + iubenda step by step

Google Tag Manager

First, you’ll need to create a free Google Tag Manager account.

Create un container

Once your account has been created, it is necessary to create a container by clicking on the red button that reads “New”

new container

What is a container?

Google Tag Manager works thanks to these containers (the script that we will subsequently install) and its job is to replace all the scripts like Google Analytics, Adwords or other third party script types only after certain rules or conditions have been met.

Informations about Google Tag Manager.

Creation of a container

creazione di un container

Once the container has been created we can move on to the creation of the tag.

The tag represents the script that will only be activated according to determined rules, in our case the user’s consent to the use of cookies.
The tag that we will create will be related to Google Analytics:

creazione del tag

google analytics

As you can see on the screenshot we’ve set the tag type to: Univeral Analytics, while below for Tracking ID you’ll need to insert your Google Analytics ID.

Set up rules for the activation of the tag

After having filled in the above parameters, you must click on continue and set up a Firing Rule for the next step, Fire On.

Click on “More”:
more

and then add a new Trigger > Custom Event

custom event

For event name please input the following value: iubenda_consent_given. Save the trigger.

create trigger

By setting up this rule, Google Tag Manager will activate the Google Analytics tag that we’ve created above, only when this rule is true. That means that it fires every time Google Tag Manager receives an event with the value ‘iubenda_consent_given’.

The following Javascript code allows us to do just that:

dataLayer.push({'event': 'iubenda_consent_given'});

Send an event to Google Tag Manager.

then:

Finishing up you’ll see this:

Install Google Tag Manager on your own site

installare Google Tag Manager

To install Google Tag Manager please visit the GTM admin, copy the code that Google provides and insert it into all the pages of your own website.

Nota bene: You’ll need to remove your own Google Analytics code.

Google Analytics will be activated automatically by the Google Tag Manager script only after the the user/visitor consents to the use of cookies.

Install the iubenda script

Go to iubenda.com, activate the beta Cookie Law Solution and retrieve the code to your cookie policy banner.

activate_cookie_policy

<script type="text/javascript">
  var _iub = _iub || [];
  _iub.csConfiguration = {
    cookiePolicyId: XxX,
    siteId: YyY,
    lang: "en"
  };
  (function (w, d) {
    var loader = function () { var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "//cdn.iubenda.com/cookie_solution/iubenda_cs.js"; tag.parentNode.insertBefore(s, tag); };
    if (w.addEventListener) { w.addEventListener("load", loader, false); } else if (w.attachEvent) { w.attachEvent("onload", loader); } else { w.onload = loader; }
  })(window, document);
</script>

This code needs to be adapted as indicated below for the integration with Google Tag Manager, and must be inserted into your pages before the closing of the BODY tag:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
  cookiePolicyId: 254316,
  callback: {
    onConsentGiven: function(){
      dataLayer.push({'event': 'iubenda_consent_given'});
    }
  }
};
(function (w, d) {
var loader = function () { var s = d.createElement("script"), tag = d.getElementsByTagName("script")[0]; s.src = "//cdn.iubenda.com/cookie_solution/iubenda_cs.js"; tag.parentNode.insertBefore(s, tag); };
if (w.addEventListener) { w.addEventListener("load", loader, false); } else if (w.attachEvent) { w.attachEvent("onload", loader); } else { w.onload = loader; }
})(window, document);
</script>

We have therefore added a callback that, at the moment consent is given by the user, calls the code by Google Tag Manager to unlock the event that we’ve set up for the activation of Google Analytics.

Publish a container

After having set up the rules, you’ll want to publish the container to make the modifications LIVE on your website:

image06

This is done by clicking the button called PUBLISH on the upper right side of the container overview page, then confirm.

This example can be reused for any other scripts or Javascipt function:

image00


Still have questions?

Visit our support forum Email us