Documentation

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

Below we’ll explain how to use Google Tag Manager with the iubenda Cookie Law Solution to “turn on” any JavaScript that uses 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 widgets of any kind.

Google Tag Manager - Container, tag and trigger
Some quick definitions

Since the whole point of using the Cookie Solution is to comply with legal requirements and therefore block scripts from running prior to receiving user consent, the trigger used in this tutorial will be fired when user consent is given.

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

iubenda cookie demo

See the official Google documentation for more information on Google Tag Manager. With that said, let’s start the tutorial!

Create an account

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

Create a 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

New container

Once the container has been created we can move on to the creation of the tag.
Once again, 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:

Creating a tag

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

creating a tag

Select the “Universal Analytics” tag type. Next, select “New Variable” under Google Analytics settings and enter your Google Analytics tracking ID and save.

Google Analytics

Now, you can set your tracking type. In this example, we want to track page views, so we’re leaving the track type as “Page view”.

Google Analytics

Set up rules for the activation of the tag

After having filled in the above parameters, we must set the trigger (the rules that will allow the scripts to fire).

Click on the “Triggering” section below:
Setting a trigger

and then click on the little plus sign on the top right to add a new Trigger. Now, in the trigger configuration window, select “Custom Trigger”. (Quick note here: Please be sure NOT to select “All Pages” as a trigger).

Custom event

For event name please input the following value: iubenda_consent_given. This will activate the trigger on “all custom events” labeled “Consent Given”. Save the trigger.

Create trigger

Now save the tag:

Save tag

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”.

Note

  • The previous example assumes that you’re firing the tag on all pages of your site, if you’d like to have a tag fire on just one page (eg. Shopping Cart page) see the advanced section here.
  • On Adding multiple containers on the same page: Adding multiple containers on the same page is supported by Google but not recommended, if you do use it, ensure that you use the same dataLayer name on all containers as explained here.
  • Remember, if you’d like to track more than one event on the same page (eg. Tracking page views as well as a form submission), you’ll need to create the additional tags and specify the tracking type. See the specifics in the advanced section here.

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 as per the instructions provided – if you’re using a CMS that pulls the page header from one header template file (eg. header.php), then simply pasting it in that file should be enough.

Google Analytics

Google Analytics

Note

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 user/visitor consents to the use of cookies.

Install the iubenda script

Go to your iubenda dashboard > [your website] > Cookie Solution and click on the <>Embed button to get to the embed section:

Cookie Solution Embed section

and retrieve the code to your cookie policy banner (if you haven’t already activated the Cookie Solution, then simply click on “Activate”, set up then head to the embed section to retrieve the code as described).

Now, your code will look something like the following:


<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "lang": "en",
        "siteId": xxxxxxxx,
        "cookiePolicyId": yyyyyyyy
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cookie_solution/safemode/iubenda_cs.js" charset="UTF-8" async></script>

This code needs to be adapted as indicated below (adding in the reference to the onConsentGiven function) 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 = {
        "lang": "en",
        "siteId": xxxxxxxx,
        "cookiePolicyId": yyyyyyyy,
        "callback": {
            onConsentGiven: function() {
                dataLayer.push({
                    'event': 'iubenda_consent_given'
                });
            }
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cookie_solution/safemode/iubenda_cs.js" charset="UTF-8" async></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.

If you’re all done, jump directly to Publish otherwise, read on for Advanced Configuration (these settings allow you to accelerate the activation of the tags, fire tags only on specific pages and set multiple tracking types on the same page by adding additional parameters to your GTM configuration).

Advanced Configurations

In this section, we’ll be using “Variables” and “Trigger Exceptions” to get even more specific. Google Tag Manager allows variables to be created and for exceptions to be set into the trigger conditions of the tag.

You can think of exceptions as “blocking triggers”. For example, if you’d only like your Google Analytics tag to fire on your shopping cart page, you can set an exception to the firing rule that states that the tag does not fire on any page that is not your shopping cart page; setting this exception, blocks the tag from firing on pages other than the shopping cart page. Similarly, you can set a trigger to only fire if conditions related to a particular variable are met.

In this way, both variables and exceptions allow for greater flexibility in your tag management (you can read what Google has to say about exceptions here and variables here).

Fire Tags on One Page only

As mentioned above, if you’d only like your Google Analytics tag to fire on your shopping cart page, you can set an exception to the firing rule that states that the tag does not fire on any page that is not your shopping cart page. Here’s how to do this:

Create a Page URL variable (click on “Variables” in the left panel, then “New Variable”). Next click within the variable configuration box to choose the variable type, then select URL.

Select built-in page url variable

Now click save and name the variable something related to the page you want the tag to fire on. In our example, we’ve named the variable “Shopping Cart”.

Next, create the new blocking trigger or Exception you’d like to add (click on “Triggers” in the left panel, then “New”). Try to name your exception something relevant. In this example we’ve named ours: “is NOT shopping cart”

Next click within the trigger configuration box to choose the trigger type, in this case “Page View”.

  • Now select the “Some Pages” option.
  • Indicate the variable (in this case the “Shopping Cart” variable we just created) as the associated variable and configure: “does not equal”* and type in your page url as an activation condition (eg. https://shoppingcart.yourwebsite.com)
    *One other option here is to select “starts with” (instead of “does not equal”) if you want the tag to fire on pages that start with the shopping cart url etc. You can configure the settings here in the way that best fits your particular site.

Exception configuration

Click Save.

Lastly, go back to your tag and in addition to the “iubenda consent given” activator, you also need to associate the exception that we just created. You can do this by clicking on the pencil in the “Triggering” section,

add form trigger to tag

then click on the “Add Exception” link that appears.

Next select the exception we just created, save and you’re done! Now the tag will still only fire after consent to cookies is attained (as legally required) but will not fire on pages that are not your “Shopping Cart” page.

is not shopping cart exception

Multiple Track types on the Same Page

If you’d like to track more than one event on the same page (eg. tracking page views as well as a purchase form submission), you’ll need to create the additional tags and specify the varied tracking type. While setting multiple tracking types is simple to do in Tag Manager, in order to comply with the law, you must make sure that the other triggering events only occur after consent has been received. Here’s how to do this:

For this example, let’s assume that in addition to tracking page views in Google Analytics (as set in the tag we created in the first section), you’d like to track transactions as well.

In order to do that, we’ll need to create another Google Analytics tag, set the Track type as “Transaction”, and click save (you can name this something descriptive like “Universal Analytics Transactions”).

Google Analytics transaction Tag GTM

Next, create a first-party cookie variable (click on “Variables” in the left panel and add a new custom variable)

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

Create the variable

Hit the “Save” button and name this something like “Cookieiubenda”

Name the variable

Next, create the new trigger you’d like to add: eg. “Purchase Made”; type “Form submission”.

  • Now select the option that starts “Some” – so in the case of “Form submission” example above, we’ll need to select “Some Forms” (as see picture below).
  • Indicate the iubenda cookie (the variable you just created) as the associated variable and configure: “contains” and “consent”:true as an activation condition

Trigger configuration

Lastly, go back to your “Universal Analytics Transaction” tag and associate the trigger that we just created. You can do this by clicking in the “Triggering” section and simply selecting the “Purchase Made” trigger that we just created.

add trigger to tag

Save and you’re done!

multiple triggers single tag

Note: if you’d like the transaction tracking to only occur on one page (eg. shopping cart page), see the tutorial on how to do this in the tutorial in the first tab of this section.

Activate Tags more Quickly

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

  • Create a first-party cookie variable (click on “Variables” in the left panel and add a new custom 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: “URI-Decode cookie”.

create variable GTM

  • Next, create a new trigger: “Cookie Law not accepted”; type “Page View”, this new trigger will allow for the presence of iubenda’s cookie to be treated as an exception:
    • select “Some Page Views”
    • Indicate the iubenda cookie (the variable you just created) as the associated variable and configure: “does not contain” and “consent”:true as an activation condition (see picture below):

Trigger configuration GTM cookie exception

Lastly, go back to your tag and in addition to the “iubenda consent given” activator, you also need to associate the exception that we just created. You can do this by clicking on the pencil in the “Triggering” section,

Trigger configuration GTM cookie exception

then click on the “Add Exception” link that appears. Now select the trigger we just created and simply save.

GTM tag with Cookie Law not accepted exception

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: https://www.tagmanageritalia.it/guida-base-gestire-la-cookie-law-di-iubenda-con-google-tag-manager

Publish a container

Important

If you previously jumped to the Advanced Section direction right after creating and configuring your Tag and Triggers, please be sure to install Google Tag Manager on your own site and install the iubenda script BEFORE continuing to the Publish section below.

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

Publish GTM container

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

These examples can be reused for any other scripts or JavaScript function.

Still have questions?

Visit our support forum Email us