Setting up CookieOfficer with Google Tag Manager
Importing the template, configuring tags and why Google tags are treated differently from the rest.
Setting up the banner through Google Tag Manager doesn't require direct access to your site's code. It works well where modifying the website is difficult or takes longer because it means working with developers. In this case you add the banner as a tag in GTM, using a ready-made template.
Below you'll find step-by-step instructions for adding the template, configuring the CookieOfficer tag, and controlling when the other tools (tags) fire, depending on the visitor's consent.
Prerequisites
- Permission to publish in the Google Tag Manager container.
- Project ID. You'll find it in the CookieOfficer panel, on the “Installation” page, in the Google Tag Manager tab.
- A site with an SSL certificate. Our script loads from an encrypted address, and the browser will block it on a site without a certificate.
How do I add the CookieOfficer template to the container?
You can add the CookieOfficer template in Google Tag Manager in two ways.
Importing the template file
- Find the
co-cmp.tplfile in the setup package. - In Google Tag Manager, go to Templates > Tag Templates > New.
- From the menu in the top right corner, choose Import and select the file.
- Save the template.
A template imported from a file doesn't update automatically. After a new version is released, you need to import it again.
Community Template Gallery
- In Google Tag Manager, go to Templates > Tag Templates > Search Gallery.
- Type “CookieOfficer CMP” and select the template from the list.
- Click “Add to workspace” and confirm the permissions.
A template added from the gallery will update automatically.
The template uses four permissions: access to the consent state, access to specific cookies, access to local storage by key pattern, and permission to inject a script from our address.
How do I create a new CookieOfficer tag?
- Go to Tags > select New and choose the CookieOfficer CMP template as the tag type.
- In the project ID field (Site ID), paste the ID from the “Installation” page. Leave the remaining fields at their defaults.
- Set “Consent Initialization - All Pages” as the firing trigger.
- Save the tag and publish the container.
Verification: turn on Preview mode in Google Tag Manager and open your site. The tag should fire in the Consent Initialization section, the banner should appear, and once a decision has been made on the banner, you'll see the consent signals update in the data layer. Then go back to the “Installation” page and run the scan verification of your site.
How do I make tools that use cookies depend on the visitor's consent?
You control when tags fire, depending on the visitor's consent state, in GTM.
Google tags, that is GA4, Google Ads and Floodlight. Leave them without additional consent. They handle Google Consent Mode themselves and, when visitors refuse consent, switch to cookieless mode. Leave Advanced Settings > Consent Settings on “Not set”. Adding your own requirement will switch them off completely and break conversion modelling.
Tags from outside the Google ecosystem, for example Meta, HubSpot or LinkedIn. These aren't supported by Google Consent Mode. In each of them, go to Advanced Settings > Consent Settings and select ad_storage for marketing tags or analytics_storage for analytics tags. You can additionally set a trigger on one of the events we send to the data layer.
Data layer events
| Event | When it fires |
|---|---|
cookie_consent_update | whenever the consent state is determined, on every change and on every new pageview. |
cookie_consent_statistics | when the visitor has consented to the use of cookies in the “Analytics” category |
cookie_consent_marketing | when the visitor has consented to the use of cookies in the “Marketing” category |
cookie_consent_preferences | when the visitor has consented to the use of cookies in the “Functional” category |
In Google Tag Manager, create a trigger of the “Custom Event” type whose event name matches the chosen event. We send it on every pageview, including when the visitor gave consent earlier, so the trigger will fire on subsequent subpages.
Key points:
- The events work independently of Google Consent Mode, because this is a general Google Tag Manager mechanism. You can use them to trigger any tags, even those that don't use Consent Mode.
- If the event doesn't occur, the corresponding tag won't fire.
Watch out for the event names. The names can be misleading, just like the data-co-cat keys. The analytics category gives statistics, and the functional category gives preferences. A trigger based on cookie_consent_analytics will never fire, and Google Tag Manager won't report an error.
Blocking scripts in the page code. Scripts placed directly in the page code, outside the container, can be blocked with the data-co-cat attribute combined with type="text/plain". You'll find the details in the article Automatic and manual blocking.
Common mistakes to avoid
- Don't use the “All Pages” trigger instead of Consent Initialization. The tag will fire too late, so some scripts will start before the visitor's decision.
- Don't add additional consent to Google tags. If consent is refused, they'll stop working instead of switching to cookieless mode.
- Remove the CookieOfficer installation script from the page code if you set it up through the container. The second copy of the code will switch itself off automatically, but you'll be left with two places to update.
- Remember to publish the container. A tag saved in the workspace won't work on the site.