Introduction
Google Tag Manager uses tags that fire 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.
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.
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 setting 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 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 chose 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. 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.
The example above will not work because there is 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). 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.
Cookie Control SDK walkthrough video
If you'd prefer to watch a video of how the SDK is applied, you can do so below. If you're wondering why there is no need to create a trigger and variable for the necessary category, it is because by default necessary cookies cannot be declined.
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 setup
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:
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.
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 - do not overwrite your current container.
Using the same container on multiple domains
There aren't any technical limitations on how many domains you can use the same container on, but there are some things to keep in mind when using the same container on multiple domains
If you want a tag to fire on all pages on Domain A, but not on Domain B.
In this case, the All Pages trigger will not work because it will fire on both domains. But you only want it on one domain. What do you do? You need to create a Pageview trigger that fires only on domain A.
As time goes by, you will slowly accumulate the number of assets in your GTM container exponentially: a lot of tags, triggers, and variables that are related only to one domain. However, since you are working on multiple domains at the same time, the number of assets is higher than it should be.
Eventually, the container might even exceed its maximum size of 200kb and you will be forced to either get rid of some items or migrate to separate containers.
Additionally larger container = more resources to download for your browser. This affects page performance as well.
Related articles: