To effectively use Google Tag Manager and Cookie First you can use the following guide to implement the banner and to configure Google Consent Mode v2 for your website. More information about consent mode can also be found on the Google support pages.
We assume you already have knowledge of GTM and have created a website container to configure tags for your website.
Enable Google Consent Mode v2 for your cookie banner
Open your Domain settings and go to the tab "Google consent mode settings". Enable the option Google Consent mode and save your configuration. (so only enable the first toggle when using the GTM template)
1. Install over GTM gallery
1. Click New Tag, then click " Discover more tag types in the community Template gallery
2. Click the search icon in the right top corner and type CookieFirst
3 add the tag to your GTM and select it.
Another link here with options to install.
https://tagmanager.google.com/gallery/#/owners/cookiefirst/templates/gtm-template
2. Add the Cookie First banner to your site
There are two options here. Either you load the cookie banner over GTM or you load it directly in your website. If you load the banner already in your website code you can skip this step.
2.1 Load cookie banner over GTM
Login to Cookie First and obtain the API key under the "Embed scripts" section for the domain you're editing.
- Add a new Tag to your GTM - give it a name eg. CookieFirst Config
- Click "Tag Configuration" and on the panel select under "Custom" the Cookie First template.
- Add the api key you copied from your Cookie First backend and paste it in the API key section.
You can also enable additional settings:
Pass Ad click information through URLs: When a visitor lands on an advertiser’s website after clicking an ad, information about the ad might be appended to the landing page URLs as a query parameter.
Redact Ads Data: When ad_storage is denied, new cookies will not be set for advertising purposes. Additionally, third-party cookies previously set on google.com and doubleclick.net will not be used. Data sent to Google will still include the full page URL, including any ad click information in the URL parameters.
3. Set the Default Consent State (Google Consent Mode v2)
In the next section of the template you can configure the default google Consent Mode settings for your tags. If you want to use them. You can also still use our legacy GTM configuration for your tags.
In this section you configure which Categories of Cookies and Scripts will be granted or denied before a user submits his/her consent. You can set defaults for specific regions. For a list of supported region codes check this wiki page.
Important: the default setting for these categories is Denied. This is the most strict setting, most of the data protection legislations require and Opt-In basis called 'prior consent'. Which means only necessary cookies/scripts can be set before a user consents.
Click the New region setting and select the defaults for this region. By leaving the region empty this setting is for every user no matter the region.
To set the default consent for the EU + UK you can copy this comma separated list below and put it inside the region input field:
AT, BE, BG, CY, CZ, DK, EE, FI, FR, DE, GR, HU, HR, IS, IE, IT, LV, LI, LT, LU, MT, NL, NO, PL, PT, RO, SK, SI, ES, SE, CH, GB
Click Save to save your tag.
GTM and Consent Mode supports at this moment 7 different Consent Types which are mapped to the cookie first categories.
Consent Type | CookieFirst Category | Description |
ad_storage | advertising | Enables storage, such as cookies (web) or device identifiers (apps), related to advertising. |
ad_user_data | advertising | Sets consent for sending user data to Google for online advertising purposes. |
ad_personalization | advertising | Sets consent for personalized advertising. |
analytics_storage | performance (analytics) | Enables storage, such as cookies (web) or device identifiers (apps), related to analytics, for example, visit duration. |
functionality_storage | functionality | Enables storage that supports the functionality of the website or app e.g. language settings |
personalization_storage | functionality | Enables storage related to personalization e.g. video recommendations |
security_storage | necessary | Enables storage related to security such as authentication functionality, fraud prevention, and other user protection. *No consent required although users are informed in the cookie policy about these scripts and cookies |
3.1 Set the correct Trigger
1. Select under 'triggering' Consent Initialization - All Pages read more about this trigger.
2. Save your tag. If you use preview or publish your container the banner will be added to your website.
3. For Google tags use the normal triggers
Google tags like ga4 and adwords support built-in consent checks, meaning they will change behaviour according to the consent mode acceptance.
4. Configuring your Tags (NON-Google Tags)
Some Google Tags like Google Ads (ads conversion and re marketing), Floodlight and Google Analytics have built-in consent checks. You can execute these tags normally like you would. Unless you want to block Google tags before consent, in that case follow the steps from 4.1 (If you currently have our legacy GTM enabled you can disable these triggers)
How to check whether a tag has Built-in consent checks?
- Open the tag and click Tag Configuration
- Click Advanced Settings
- On the bottom click "Consent Settings'
For tags that do not have built-in consent checks you will need to add the Consent Types yourself. These are called "Additional Consent Checks"
4.1 Additional Consent Checks & Basic Consent Mode
Your tags that do not support the Built-in consent checks now need to be configured to work with the Consent Types. This is also the case if you want to block Google tags from firing before consent.
Open a tag click Advanced settings -> Consent Settings and fill in the Consent Type required for this tag. In the tag below I added the advertising type. You can use the following types: ad_storage, analytics_storage, functionality_storage, personalization_storage or security_storage
- Create a new trigger in your container. Select "Custom Event" give it a name eg "cf_after_consent_update"
Parameters:
Event name: cf_after_consent_update
Fires on: All custom events
This makes sure that as soon as someone accepts the cookies the tag is fired. If you would add the "All Pages" trigger to these tags then the tag will fired upon reloading the page.
- Your tags that do not support the Built-in consent checks now need to be configured to work with the Consent Types. Open a tag click Advanced settings -> Consent Settings and fill in the Consent Type required for this tag. In the tag below I added the advertising type. You can use the following types: ad_storage, analytics_storage, functionality_storage, personalization_storage or security_storage
- To enable this tag to fire you need to setup the triggering, select here the Trigger you created in step 1. !Important: this is only for tags that need to run on for example the "All pages" event. For Tags that run on user actions you can just leave the triggers as they are.
Basic Consent Mode v2 with GTM
Basic Consent Mode means you actively block Google tags from loading on your website and then unblock them on consent. If all your tags are in Google Tag Manager it is best to block GTM from Loading and then let Consent Mode change the tag behaviour for the tags in gtm. !important: because we're blocking GTM from loading you need to load the cookie banner directly inside the website code above gtm.
First we add the Consent mode defaults inside theof the website. Then you add the banner embed code and then you can choose to either load the gtm container by adding it to the scripts section in your domain settings OR you can add it also to your website.
In the setup below I have added regions as well where the defaults apply to, you can set this up to your liking.
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
// Set default consent to 'denied' as a placeholder
// Determine actual values based on your own requirements
gtag('consent', 'default', {
'ad_storage': 'denied',
'ad_user_data': 'denied',
'ad_personalization': 'denied',
'analytics_storage': 'denied',
'functionality_storage': 'denied',
'personalization_storage': 'denied',
'security_storage': 'denied',
'region': ['AT', 'BE', 'BG', 'CY', 'CZ', 'DK', 'EE', 'FI', 'FR', 'DE', 'GR', 'HU', 'HR', 'IS', 'IE', 'IT', 'LV', 'LI', 'LT', 'LU', 'MT', 'NL', 'NO', 'PL', 'PT', 'RO', 'SK', 'SI', 'ES', 'SE', 'CH', 'GB'
],
'wait_for_update': 2000
});
gtag('consent', 'default', {
'ad_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
'analytics_storage': 'granted',
'functionality_storage': 'granted',
'personalization_storage': 'denied',
'security_storage': 'granted'
});
dataLayer.push({'gtm.start': new Date().getTime(), 'event': 'gtm.js'});
</script>
<!-- Add your cookie banner embed code -->
<script src="https://consent.cookiefirst.com/sites/your-cookie-embed/consent.js"><script>
<!-- Google Tag Manager -->
<script type="text/plain" data-cookiefirst-category="functional">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXX');</script>
Setup your tags inside Google by using the regular triggers you would always use like "All Pages" or the Initialization Trigger (All pages)
To have a better overview of the settings for your tags and if Consent Mode is enabled you can enable the Consent Overview. Read more about how to enable this here.