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 for your website.
We assume you already have knowledge of GTM and have created a website container to configure tags for your website.
We have released a Google Tag Manager template which you can use during the setup of this guide, it'll make it easier to implement Cookie First. Our template is not yet visible in the community template gallery, it is under review. You can download the template at Github or add it to your container via the community template gallery:
https://tagmanager.google.com/gallery/#/owners/cookiefirst/templates/gtm-template
1. Install the template (manually by downloading from Github)
1. Open your GTM container
2. On the left side go to "Templates"
3. Click "New" and then click the 3 dots and click 'Import"
4. Select the template file you downloaded from here. Only the .tpl file
5. You will see the template being loaded. Click "Save" to add it to your Library. And click the X to close it.
1. Install over GTM gallery
Go to your container, then under templates click add variable template from gallery. Look up Cookie First and you'll find the template to add to your container. Or go here and add it. https://tagmanager.google.com/gallery/#/owners/cookiefirst/templates/gtm-template
2. Add the Cookie First banner to your site
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 configure other banner options: hiding of console logs, enable the "inherit website language" or enable the stealth mode (see our api docs)
4. Select under 'triggering' Consent Initialization - All Pages read more about this trigger.
5. Save your tag. If you use preview or publish your container the banner will be added to your website.
2.1. Set the Default Consent State (Google Consent Mode)
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.
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.
GTM and Consent Mode supports at this moment 5 different Consent Types which are mapped to the cookie first categories.
| GTM Consent Type | Cookie First Category | Description |
| ad_storage | advertising | Enables storage (such as cookies) related to advertising |
| analytics_storage | performance | Enables storage (such as cookies) related to analytics e.g. visit duration |
| functionality_storage | functional | Enables storage that supports the functionality of the website or app e.g. language settings |
| personalization_storage | functional | 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. Configuring your Tags
Some Google Tags like Google Ads (ads conversion and remarketing), Floodlight and Google Analytics have built-in consent checks. You can execute these tags normally like you would. (If you currently have our legacy GTM enabled you can disable these triggers)
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"
3.1. Additional Consent Checks
- 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
- 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.
- To enable this tag to fire you need to setup the triggering, select here the Trigger you created in step 1.
- 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.
