For sites that use Google Analytics 4 and Google Tag Manager, Cookie Control can be integrated with Google Consent Mode v2 with minimum or no code using our GTM Template.

If you would prefer to manually integrate Cookie Control with Google Consent Mode v2 for easier customisation opportunities, please see our Guide on Optional Categories where it is used as the main example.

Anchor point for Add the Cookie Control Consent Template to Google Tag Manager

1. 1. Download our GTM Consent template
2. 2. Within GTM open your container.
3. 3. From the left hand menu, select 'Templates'.
4. 4. From the 'Tag Templates' panel, select 'New'.
5. 5. Press the three dots icon in the top right corner and select 'Import' from the dropdown menu.
6. 6. Select the template.tpl file you downloaded in step 1.
7. 7. Select 'Save'.

Anchor point for Integrate Cookie Control with Google Tag Manager on your website

1. 1. Within GTM open your container.
2. 2. From the left hand menu, select 'Tags'.
3. 3. From the 'Tags' panel, select 'New'.
4. 4. From the 'Tags Configuration' panel, select the edit icon.
5. 5. Select the 'Cookie Control Template' tag which will be listed under 'Custom'.
6. 6. Enter your Cookie Control apiKey and select the relevant product from your Cookie Control subscription.
7. 7. Select your default consent mode settings ('granted' or 'denied') for Analytical and Marketing cookies.
8. 7. Select your default consent mode settings ('granted' or 'denied') for each consent type.
9. 8. From the 'Triggering' panel, select the 'Consent Initialization - All Pages' option.
10. 9. Select 'Save'.

Anchor point for Customising our Google Tag Manager (GTM) Template

Within GTM, after importing in our template, you can modify the templates code to customise the Cookie Control implementation. This allows you to change the optional cookie categories to fit your bespoke needs or to customise branding or text options.

To modify the template;

1. 1. From the left hand menu in the GTM Dashboard select 'Templates'.
2. 2. Select the Cookie Control template you imported previously and open the 'Code' tab.
3. 3. Within the code editor, find the configuration object, which by default is between lines 168 and 210
4. 4. Extend the configuration for your needs using any of the other properties Cookie Control supports, such as branding or text.

Anchor point for Custom Events within Google Tag Manager

Extending the Google Tag Manager template with custom events can help to assess how consent changes impact the overall performance of your website or app. Custom events can also be used as a trigger for loading other Google Tag Manager Tags, which already assume consent has been established.

To create a custom event;

1. 1. In GTM, navigate to the 'Triggers' section and create a new Custom Event trigger.
2. 2. Set the event name based on the conset change we are looking to track (e.g., analytics_accept).
3. 3. Set the trigger to fire on All Custom Events.
4. 4. Give the trigger an appropriate name (e.g., Analytics Accept).
5. 5. Save the trigger after defining the custom event settings.
6. 6. Repeat this for each consent state. (e.g. Analtics / Marketing, Accept / Revoke).

To modify the GTM template;

1. 1. Open the Google Tag Manager (GTM) template editor and select the 'Code' tab.
2. 2. Add the following modules at the beginning of the code block to support consent tracking:

const queryPermission = require('queryPermission');
const createQueue = require('createQueue');

3. 3. Create a 'dataLayerPush' variable to send events to the GTM dataLayer:

let dataLayerPush = null;

if (queryPermission('access_globals', 'readwrite', 'dataLayer')) {
	dataLayerPush = createQueue('dataLayer');
}

4. 4. Within the configuration for onAccept and onRevoke functions, push the events to the dataLayer:

onAccept: function() {
	updateConsentState({
			'analytics_storage': 'granted',
	});
	dataLayerPush({
			'event': 'analytics_accept',
			'category': 'analytics'
	});
},

5. 5. After updating the code, save the changes.
6. 6. Within the Cookie Control template editor go to the 'Permissions' tab and add the following keys to the 'Accesses Global Variables' dropdown: CookieControl, dataLayer.
7. 7. Set Read, Write, and Execute permissions to true for both.

Using the custom event with Tags;

1. 1. Go to the 'Tags' section in GTM and create a new Tag, for example a Custom HTML Tag with the following HTML:

<script>
	console.log('dataLayer pushed');
</script>

2. 2. Assign the previously created custom event trigger (e.g., Analytics Accept) to this tag.
3. 3. Once the event fires, check the browser's console for the message "dataLayer pushed" to confirm the event has been successfully recorded.