💡 If you want to learn about what Google Consent Mode is and why it’s important, you can find more information including a video here.

1 . Ensure Google Tag Manager and the Google Services appear on your Cookie Banner

Our cookie banner is created by the Cookies section which relies on your Personal Data Inventory. You can view this by going into Cookie Banner > Cookies.

2. Enabled Google Consent Mode on the Privasee Platform

Go to Cookie Banner > Settings > Google Consent Mode, ensure the toggle is on and press Save Changes.

3. Configuring your Cookie Banner

The following code must be added to the top of the <head> section of your website.

3.1. Add the CMP Script

<!-- Add the Privasee Cookie Banner, insert your company id in "XXXXXXXXX" -->
<script id="privasee-cb" src="https://app.privasee.io/cdn/XXXXXXXXX/cookie-banner.js"></script>

3.2. Add Smart Data Protector snippet (optional)

If Smart Data Protector is enabled. Add the Smart Data Protector snippet, this will be the next script to place inline just after the CMP script.

<!-- If Smart Cookie Blocker is enabled, add the script to load it -->
<link rel="preload" href="//privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js" as="script" />

<script
	type="application/javascript" 
	id="uc-block" 
	src="https://privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js">
</script>

3.3. Add data layer

Add the data layer and configure Gtag as per Google Developers consent mode documentation.

<script type="text/javascript">
	// create dataLayer
	window.dataLayer = window.dataLayer || []; function gtag() {
	  dataLayer.push(arguments);
	}

	// set "denied" as default for both ad and analytics storage.
	gtag("consent", "default", {
		ad_user_data: "denied",
		ad_personalization: "denied",
		ad_storage: "denied",
		analytics_storage: "denied",
		wait_for_update: 2000 // milliseconds to wait for update
	});

	// Enable ads data redaction by default
	gtag("set", "ads_data_redaction", true); 

	// Disable url passthrough so information is not sent without consent.
	gtag('set', 'url_passthrough', false);
</script>

The wait_for_update parameter sets a delay in milliseconds in which GTM waits for updated consent settings from a CMP before applying the default states above.
If you've chosen to rename the dataLayer, please ensure that you modify the script to use the new name of the dataLayer. For example, if you renamed the dataLayer to "gtmDataLayer", the first line needs to be amended to resemble this: window.gtmDataLayer = window.gtmDataLayer || []; function gtag(){gtmDataLayer.push(arguments);}

3.4. Unblock Google Tag Manager (optional)

If the Smart Cookie Blocker is enabled. Unblock Google Tag Manager (with templateId BJ59EidsWQ from the Smart Cookie Blocker. We need to prevent the CMP from blocking the Google Tag Manager to ensure Google Consent Mode signals are sent.

<!-- If Smart Cookie Blocker is enabled, unblock Google Tag Manager before user consent. -->
<script>
	uc.deactivateBlocking([
		'BJ59EidsWQ', // GTM templateId is not blocked
   ]);
</script>

3.5. Add the rest of the Google Tag Manager Script

⚠ Remember to replace “GTM-XXXXXXX” with your Google Tag Manager ID below.

<!-- Add Google Tag Manager (GTM Script) -->
<script type="text/javascript"> 
	// Google Tag Manager 
	(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-XXXXXXX'); //replace GTM-XXXX with Google Tag Manager ID
</script>

6. Then add any other scripts that you’d like to add.

Add any other HTML scripts or tags you want to add to your website.

7. Configure Scripts to be blocked

Remember that if you are implementing other scripts that aren’t covered by the Smart Cookie Blocker (or if Smart Cookie Blocker is disabled), you will need to manually configure other scripts and tags to ensure they are blocked before the user gives consent.

Full code example

The full code should look like the full example below. The order of the scripts is important and these snippets should be added to the <head> of your HTML. The CMP Banner script should always be the first script.

⚠ Make sure to replace the XXXXXXXXX with your company ID below. You can find this when you go to Cookie Banner > Add to website.

Make sure to replace your Google Tag Manager id below as well.

<!-- Add the Privasee Cookie Banner, insert your company id in "XXXXXXXXX" -->
<script id="privasee-cb" src="https://app.privasee.io/cdn/XXXXXXXXX/cookie-banner.js"></script>
   
<!-- If Smart Cookie Blocker is enabled, add the script to load it -->
<link rel="preload" href="//privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js" as="script" />

<script
	type="application/javascript" 
	id="uc-block" 
	src="https://privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js">
</script>

<!-- Add the data layer and configure Gtag as per Google Developers consent mode documentation and in a compliant configuration -->
<script type="text/javascript">
	// create dataLayer
	window.dataLayer = window.dataLayer || []; function gtag() {
	  dataLayer.push(arguments);
	}

	// set "denied" as default for both ad and analytics storage.
	gtag("consent", "default", {
		ad_user_data: "denied",
		ad_personalization: "denied",
		ad_storage: "denied",
		analytics_storage: "denied",
		wait_for_update: 2000 // milliseconds to wait for update
	});

	// Enable ads data redaction by default
	gtag("set", "ads_data_redaction", true); 

	// Disable url passthrough so information is not sent without consent.
	gtag('set', 'url_passthrough', false);
</script>
   
<!-- If Smart Cookie Blocker is enabled, unblock Google Tag Manager before user consent -->
<script>
	uc.deactivateBlocking([
		'BJ59EidsWQ', // GTM templateId is not blocked
   ]);
</script>

<!-- Add Google Tag Manager (GTM Script) -->
<script type="text/javascript"> 
	// Google Tag Manager 
	(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-XXXXXXX'); //replace GTM-XXXX with Google Tag Manager ID
</script>

<!-- Add other service scripts under this section. Remember to also edit scripts to ensure cookies are blocked if relevant -->

4. Configuring Google Tag Manager

1. Go to Tag Manager and click on the Settings Icon

2. Click on Import Container. This will allow us to upload a pre-configured Container that will make it easy to configure your Google Services, while using Google Consent Mode and the Privasee Cookie Banner.

3. You will now want to upload one of the following documents:

Go to this folder and download the Google Tag Manager container for the configuration that you want.

We recommend configuring Google Consent Mode in basic as it’s currently unclear if Advanced mode is compliant.

If you want to read about the differences between Advanced and Basic Mode you can find more information here.

4. If you already have Google Tag Manager set up, you likely already have some Tags, Triggers, Variables and Templates in your Workspace. If that’s the case, select Choose Workspace > Existing and Choose an import option > Merge. To be extra safe you can also choose Rename conflicting tags, triggers and variables and test them later.

If you’re creating a new workspace you can select New and Overwrite. Press confirm when done.

5. You can now navigate to the Tags Section in your Workspace and see that a number have been added and are paused. These relate to the services Google Consent Mode supports.

You will see we have added:

Conversion Link Tracker Tag
Google Ads Conversion Tracking Tag

Google Analytics 4 Tag

Usercentrics CMP

6. You can now unpause the services that you use and add the extra configuration if needed. For example for Google Analytics 4 and Google Ads Conversion Tracking Tags, you need to add your Tag Id. Don’t change anything else.

7. Once configured you can unpause the Tag.

Switching from Basic to Advanced Mode

If you've already imported the Container into Google Tag Manager you can switch between Basic and Advanced mode easily without re-importing it.

Go to the Tag you want to use Advanced Mode with > Advanced Settings > Consent Settings and set it to Not Set for Advanced Mode.

How to add my cookie banner to my site?

How to configure cookies placed via a HTML script tag?

How to configure cookies placed via Google Tag Manager?

What tools are blocked by Smart Cookie Blocker?

Configuring cookies to be blocked before a user gives consent