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

new container

We can now proceed with the creation of the trigger which will make it possible to activate an event. Click on the “triggers” menu:

creazione del tag

and then click in the “trigger configuration” window.

google analytics

Now click on “Custom event”:

google analytics

Label the custom event “iubenda_consent_given“. This will activate the trigger on “all custom events” labeled “Consent Given”:

google analytics

You can now begin creating the tag.

google analytics

Click on the “tag configuration” window as seen in the image below:

google analytics

Select the “Universal Analytics” tag type:

google analytics

Set the tracking ID and select the type of tracking as “page visualisation”. Then click on the “triggering” section to select the triggering event.

google analytics

Select the “Consent Given” trigger calling the “Universal Analytics” tag.

google analytics

Install Google Tag Manager on your own site

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.

google analytics

google analytics

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.

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

google analytics

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.

Advanced Configuration

It’s possible to activate the TAGs more quickly by modifying two additional parameters in GTM as such:

  • Create a first-party cookie variable
    1. Specify the variable’s name in the following format: “_iub_cs-XXXXXX” (XXXXXX will have to be substituted with your own cookiePolicyId).
    2. Select the following option: “Decode the cookie in URI format”.

google analytics

  • Add the following additional activator: “Cookie Law not accepted”; type “Page Visualisation”, this new trigger will allow for the presence of iubenda’s cookie to be treated as an exception:
    1. select “Certain page visualisations”
    2. Indicate the iubenda cookie as the variable and that it should not contain“consent:true” as an activation condition.

google analytics

  • In addition to the “iubenda consent given” activator, you also need to associate the exception we just added:

google analytics

NOTE: When implementing this advanced configuration remember that were the cookiePolicyId to be modified, the modification would also have to be applied in the configuration. For a correct configuration, it is not necessary nor advantageous to include iubenda code through GTM

Source: http://www.tagmanageritalia.it/guida-base-gestire-la-cookie-law-di-iubenda-con-google-tag-manager/


Still have questions?

Visit our support forum Email us