Introduction

Google Tag Manager uses tags that fires from triggers. These triggers are the events occurring on the website, like clicking a button or visiting a specific URL. The most common trigger in GTM is Page View. When set to all pages, this trigger will fire the tag on all pages of the website.

When a website user accepts cookies, our cookie control SDK adds each cookie category to the GTM dataLayer.

We can use this data and check against it in the trigger as a Custom Event.

mceclip0.png

By default, there are three cookie categories which the users can consent to:

  • cookie_cat_functional

  • cookie_cat_statistic

  • cookie_cat_marketing

These will also serve as event names for the triggers.

Initial set-up

The GTM SDK implementation starts with creating a set of custom triggers and custom JS variables. These triggers and variables will have to be assigned to your existing tags to block them from firing when the user first visits the site. The tags will be "unlocked" once the user submits the consent.

Setting up triggers

  • Navigate to the main dashboard, click the "Triggers" section, and select "New"

  • Select Custom Event trigger from the list

  • Fill in the required inputs:

Use one of the existing cookie categories listed above as the trigger's event name, e.g. "cookie_cat_statistic". The trigger itself, however, does not need to use the category name.

mceclip0.png
  • Repeat the steps above for all individual cookie categories to cover all the possible choices of the end-user.

You only need three custom triggers because the necessary category always fires. Creating a custom trigger for "Necessary" is therefore not required.

Setting up Custom JS Variables

You will also need three custom JS variables. Do this by creating a new user-defined variable, and set the type to "Custom Javascript".

Below is the JS code for a custom variable. Remember to change the cookie category accordingly for each of the cookie categories.

function() {
return window.CookieInformation.getConsentGivenFor('cookie_cat_marketing');
}

Applying triggers to your tags

Assign the custom triggers we have just created to your tags. If the triggers are not assigned, they will not affect the tags.

Use custom event triggers.

For example, let's add the newly created trigger to a Facebook tag. Currently, the tag fires on a PageView trigger, which means that the tag will fire every time a page is loaded.

We need to change this to fire the Facebook tag when the user has agreed to the marketing category. We will need to remove the Pageview trigger (marked with a red dot).

Next, we will add the marketing trigger we have created in the first step. Remember, we only need to add one custom event trigger since we are replacing the pageView trigger. From the list of triggers, select the appropriate trigger for the tag. Facebook uses the information for marketing, so we choose the custom event marketing trigger (marked with the red dot)

Now the marketing trigger is assigned to the Facebook tag. The tag will not fire unless the user has agreed to the marketing category. And once the user has agreed to the category, the custom trigger will act the same way as the PageView trigger. Press "Save". The consent pop-up now controls the Facebook tag.

Additional information

  • Call a tag by using multiple triggers. If you add more than one trigger, Google Tag Manager will require at least one to fire to execute the tag. (OR Statment).

  • Additionally, you can decide how many times a tag triggers per a client's visit.

  • Remember to publish your changes, or the tag will not work as expected.

When you can't use a Custom Event (Important!)

Some Tags can't take Custom Events as a trigger. E.g. click elements or click links. Also, you can't have a trigger with more than one Custom Event.

If a Custom Event fires the tag, you will need to use a Custom JS variable.

Use only one Custom JS variable per tag.

multiple-event-in-one-trigger.jpg

The example above will not work because there are more than one Custom Event defined: eventNumber1 and cookie_cat_statistic

When to use a Custom JS variable as a trigger

For example, you would like to fire this Google Analytics (GA) tag if the user has consented to the "statistic" cookie category. Then we will need to modify the trigger that is associated with this tag. So you will click on the trigger (marked with the red dot).

Now you can see that the trigger will fire the GA tag if a user clicks on an element that contains "XYZ". Every time that these conditions are met, the trigger will fire the tag.

We need to add another condition so the trigger fires if the element contains "XYZ" and the user has consented to the statistic category. To add the condition for the cookie category, click on the plus sign (marked with a red dot).

From the dropdown, you will need to select one of the Custom JS variables you have created. Google Analytics is used for statistic purposes, so you should choose the statistic Custom JS variable (1). Then you will need to match the Custom JS variable with an outcome. To do so, select "equals" in the second field (2). And the variable should equal to true to fire. Type "true" in the third field (3).

Once that is done, the click trigger will look like in the image below. Click "Save" to save the changes you have made.

Custom JS variables can then also be used in combination with triggers based on Custom Events.

multiple-event-in-one-trigger2.jpg

Common Mistakes

  • When you have implemented the pop-up script after GTM, the triggers will fire before consent. The pop-up script must be in the source code before the GTM-script.

  • When you have more than one trigger on the same tag. E.g. All Pages and a Custom Event. Only one of these triggers must be true before the tag fires, which means that the Custom Event is invalid.

  • When using Custom Events instead of Custom javascript, Google Tag Manager can not fire a tag based on more than one Custom Event. It would be best if you instead used Custom Javascript as your condition.

  • When you have type errors, because the data layer is case-sensitive, be aware to type categories correctly.

Default Container

If it all seems a bit much (or if you're starting from scratch), then we offer a "default container" that you can import into your own Google Tag Manager container. Or, if you've set up a container already, you can import the Triggers and Variables of the SDK.

I don't have a Tag Manager account or a container set up

If you have not already created a Google Tag Manager account, please do so by visiting tagmanager.google.com and signing in with your Google account details.

To add this container to your Google Tag Manager account, you will need to download the JSON file in the following repository: Cookie Information Tag Manager SDK Default Container.

Unzip the downloaded folder to a location of your choice, then go to the Admin panel of your Google Tag Manager account:

On the right-hand side of the page, you will now see settings for your container. Please select the Import Container option.

Click Choose Container File and select the JSON file from the unzipped folder that you downloaded. Please also choose whether you would like to have this container imported into your existing workspace or a new workspace.

You can also select whether you would like to overwrite everything in your existing workspace or merge the contents of the default container into it instead.

If you choose a new workspace, you'll be presented with the option to give it a name and add a description:

If you decide that you're importing it into an existing workspace, you will be presented with a menu where you can select which workspace it should be added to:

Once you have picked, a little further down you should see the changes that are about to be made if you import the container (I have chosen the existing workspace and said that it should be overwritten in the below example):

Finally, add a description to your container.

Making changes to default tags

Because this is a base container with everything that you will need in place from the beginning, the only thing you have to do is:

  1. Ensure that your measurement IDs for different services are added to the tags. All that the tags contain are the scripts for each service - if you do not add your specific ID for the service, it will not know which account it should be tracking results to.

  2. Add any other conditions that a tag is allowed to fire on. As an example, if you have a sign-up form and use HubSpot to gather information about these sign-ups, it would be a good idea to add an extra condition that the tag can only fire the page yourwebsite.com/sign-up

Removing tags for services that you do not use

If you do not use some services for some of the tags already included then you will need to delete them so that they do not set cookies for services that you do not use on your website.

Select the Tag or Tags you would like to delete using the checkbox next to the tag name, then click the bin icon just above "Last Edited"

I have a Tag Manager container set up with tags in it

If you already have a Tag Manager Container set up with all your tags in it, then please download this JSON file that only contains the Cookie Control SDK Triggers and Variables.

Once you have imported these you will need to go through each tag and apply the appropriate category. Make sure to merge them with your container - not overwrite your current container.

Did this answer your question?