Integrate Usercentrics in your Google Tag Manager
The Usercentrics Consent Management Platform (CMP) can be quickly and easily implemented into your Google Tag Manager (GTM) so that you will only be able to fire your tags in the future if you have the consent of your visitor.
In this step-by-step guide, we'll show you how to:
- Implement the Usercentrics script in Google Tag Manager
- Fire your Tags only after consent
Step 0: Requirements
Before we start with the tutorial, there are a few requirements you need to make sure.
For this guide, we assume that you already meet the following requirements:
- You own a Google Tag Manager Account
- You have created a container for your website
- The Google Tag Manager script is embedded on your website
- You want to integrate the Usercentrics CMP into your Google Tag Manager
Step 1: Integrate Usercentrics script into GTM
In the following, we will explain step by step how to integrate the Usercentrics CMP into Google Tag Manager and fire your tags according to the consent status of your visitors or not fire them.
Create a new tag for Usercentrics script
First you create a new tag, in which the code for the Usercentrics script is deposited.
To do this, click on the button "New" under the menu item "Tags".
Tag Type: Custom HTML
Then you give a name (in our example "Usercentrics CMP") and select as tag type "Custom HTML".
Here you add the script, which you can find in your Usercentrics settings-dashboard under the menu item "General" > "Script" and that looks like this:
Note: In the above example you should replace "XXXXXXXXX" with your Settings-ID. The Settings-ID can also be found in your Settings-Backend.
Put a tick on "support document.write" before you implement the triggers.
Trigger: All pages
It is very important that the Usercentrics script on each subpage is fired on page view. This is the only way to ensure that the consent status for your other tags can be retrieved correctly.
Therefore, you choose as a trigger "page view", there are no exceptions in the tag.
You can now save your newly created tag for the Usercentrics script.
Note: Make sure that the correct domain is stored in your settings backend, otherwise the Usercentrics script will not be fired on your website.
Step 2: Set up DataLayer Variables & Triggers
In order to find and control your visitors' consent status for your tags, you must first define DataLayer variables and then configure triggers.
The Usercentrics script communicates with GTM via the DataLayer. So it is still necessary to define the corresponding variables which should be considered by GTM.
Important: The following example uses negative consent states and thus trigger exceptions. In general, for GTM, this means: Because the consent status is
false, technologies will only be fired if option-trigger are activated.
There are several reasons why we recommend this approach:
- Easier implementation into an existing GTM, with only exceptions to be added
Create DataLayer variables for each tag
To create a new variable, navigate to the menu item "Variables". There you will find under the section "Custom Variables" the button "New", where you can create a new variable.
Variable Type: Data Layer Variable
As variable type you choose "data layer variable“.
The name of the variable is exactly the same, as well as the corresponding consent in your settings..
So you want, for example, to customize your Google Analytics tag, you must first deposit a consent in your settings and then create the „consentslug" as a variable in GTM.
In the settings dashboard you will find the consentslug listed in each consent when you open the corresponding consent.
In the example of our Google Analytics tag, the consentslug would be "Google Analytics" (case-sensitive and space-sensitive!).
You repeat the creation of the data layer variables for each tag, which should be fired only after an active consent of your visitors.
Depending on your setup, this can be a few. Here is an excerpt from our GTM with all required variables.
Step 3: Defining triggers
Once the variables have been created, they need the corresponding triggers, which retrieve the status and control your tags based on it. Similar to the variables you need a corresponding trigger for each of your tags.
Two triggers - request opt-in and opt-out status
We recommend that you define two triggers for each tag: The first trigger checks the page view to see if there is a corresponding consent on the part of your visitor. If not, the tag will not be fired. This trigger is an exception to the tags.
The second trigger is responsible for detecting changes in the consent of a visitor during a visit to tag and, in the case of an opt-in (visitor agrees a tag) to reload your tags. This usecase occurs e.g. on the very first visit to the website, if your tags are disabled by default and they should be fired immediately after successful consent by the banner (visitors click on "Accept").
In the menu item "Trigger" you can create new triggers with the button "New".
Trigger type 1: window loaded
First of all, you should use a meaningful name for your triggers, which are understood internally in your company. In our example, all triggers begin with the addition "opt-out", since we query the status of the respective data layer variable and, if
false, resemble an opt-out.
As trigger type it is important to select "window loaded". The triggers should only become active when the Usercentrics script has been completely executed - the corresponding Usercentrics tag was fired in step 1 when the page was viewed. The event "page view" happens in GTM before the event "window loaded".
Trigger only on certain events
Directly below the trigger type, you can choose which events fire the trigger. Here you choose the option "Some events that are triggered when loading a window".
Then you have to select the corresponding variable (in our example "consentGoogleAnalytics") and set the condition to "equals - false“.
Trigger Type 2: custom event
For the second trigger, we internally use the "opt-in" prefix, because we listen to the
specific_consent_changed event, which occurs as soon as the visitor grants or withdraws consent.
The trigger type used here is the "Custom Event" and the Event Name is Usercentrics Event
consent_changed [Name], where [Name] is the name of the specific Service you want to listen to. So in our example we want to configure the Google Analytics service and our event to listen to is called
consent_changed Google Analytics.
Again, we only trigger this trigger on "some custom events" when the data layer variable for our consent is
Note: This trigger is fired as mentioned above only if there is no consent of the visitor for the page and the visitor changes his consent status. In this case, the corresponding tags should be reloaded directly and not only on the next page view of the visitor.
In most cases, this is the visitor's very first page visit, which has not yet been tagged.
Step 4: Merge Everything: Customize Your Tags
You have now successfully created variables for each of your consents and configured your triggers based on that. What is still missing is the adjustment of your tags, so that they are fired only with the active consent of your visitors.
Fire tags at event "window loaded"
Each of your tags needs to be customized so they are fired by default at the "window loaded" event. The Usercentrics script should be the only tag firing on the "pageview".
That's why it's important for our script to be loaded first to query the consent states responsible for firing your other tags.
There are two triggering triggers for your tags:
- Window loaded
- Opt-In trigger for the corresponding tag (see Step 3 - "Trigger Type 2: Custom Event"")
Your previously created opt-out trigger (see Step 3 - "Trigger type 1: window loaded") is the exception for your tags and should be stored as a trigger exception for the respective tag.
Since it can be a bit complicated to understand how Usercentrics integrates with Google Tag Manager, here is a brief summary of the logic behind our approach.
Fire tags only with consent
Your tags should only be fired if you have the consent of the visitor. This consent can already be given when the page is called (returning visitor) or given during the visit (first time visitor).
Case 1: first time visitor
If a visitor comes to your website for the first time or if you have recently configured Usercentrics, then we do not have any information about the consent status of this visitor.
In a restrictive setting, only tags that are essential to the operation of the website are fired and thus assigned to you in the settings of the category "Essential". These tags are fired regardless of the consent of your visitor.
An example of such a tag is the Usercentrics script. We always have to load because we allow you to fire your tags based on the preferences of your visitors.
As a result, a first-time visitor would see the opt-in banner when they visit your website, allowing them to approve your tags.
If he agrees with your tags, your tags should be reloaded immediately. If they were not reloaded immediately, important metrics like the home page could be distorted in your analysis tools.
In this case, there is the trigger at the "custom event" level, which will listen to the
consent_changed event from the Usercentrics script, and once a consent has been given (consent status
true), the corresponding tag will reload.
So your tags are also fired on the very first website visit and directly after the consent of the visitor.
Case 2: Recurring visitor
If a visitor comes to your website again and again, we already have information (in most cases) about your consent. We check this consent status with our data layer variable and the exception trigger in the respective tags.
If the consent status has the value
false, the corresponding tag is not fired because in this case the exception trigger takes effect. If
true the consent status fires your tag, because in this case, the exception trigger does not take effect.
Fire every tag unless there is no consent
In summary, the trigger logic in Google Tag Manager works like this:
Fire every tag (Trigger "window loaded") unless the visitor has given his consent (exception trigger "opt-out" - consent status
false). If the visitor changes the consent status during his visit and gives his consent, fire the corresponding tag immediately (trigger "Opt-In" - consent status
Finally: Testing via preview function
Your tags should now be adjusted and will only be fired if your visitors consent. But before you put the adjustments in Google Tag Manager live, you should thoroughly test them.
To test the changes in GTM, you activate the preview mode. You will find this on the top right as a gray button with the inscription "Preview".
Then you navigate to your website and check if the tags are fired without your permission. You can do that, for example in the browser via the DevTools and the "Network" tab.