Implement Google consent mode v2 manually
If you use HubSpot’s native Google Analytics 4 or Google Tag Manager integrations, learn how to support Google consent mode v2. You will need to manually integrate Google consent mode v2 if either of the following scenarios are true:- You use a HubSpot cookie banner on an externally-hosted website or CMS.
- You use a HubSpot cookie banner on the HubSpot CMS, and you use a code snippet to integrate with either Google Analytics or Google Tag Manager.
Integrate Google consent mode v2 with Google Analytics 4
- In HubSpot, set up a cookie consent banner with an opt-in policy type targeting EEA, EU, and UK visitors.
- On your website, configure on-page consent default, configure consent updates, and install Google Analytics (see below for an example).
- Add your manual implementation immediately after the
<head>
element of your HTML.
- Add your manual implementation immediately after the
Integrate Google consent mode v2 with Google Tag Manager
- In HubSpot, set up a cookie consent banner with an opt-in policy type targeting EEA, EU, and UK visitors.
- On your website, configure on-page consent default, configure consent updates, and install Google Tag Manager (see below for an example).
- Add this code as high in the
<head>
of the page as possible.
- Add this code as high in the
- Add this code immediately after the opening
<body>
tag
G-XXXXXXXXXX
with your Google Measurement ID.
Implement advanced Google consent mode v2 manually
This article provides an overview of how Advanced Google Consent Mode works, and how to implement it for Google Tag Manager or Google Analytics 4 using the HubSpot Cookie Banner. Note that this article assumes you’re familiar with writing HTML and JavaScript. When you implement consent mode on your website or app in advanced mode, Google tags are always loaded. Default consent is set (typically to denied) using the Consent Mode API. While consent is denied, Google tags will send cookieless pings. When the user interacts with the HubSpot cookie banner, the consent state updates. If consent is granted, Google tags send full measurement data. To implement advanced consent mode via the HubSpot cookie banner, you must write a consent mode configuration script and install it along with the base installation code. This script will:- Set up the default consent state.
- Update the consent state when the user interacts with the HubSpot cookie banner.
Integrate Google consent mode v2 with Google Tag Manager
The example code below provides one possible way you could implement advanced consent mode on your website. The code consists of two parts: 1. Setting up the default consent state: this snippet configures the default consent state for consent mode. Each consent category can be set to granted or denied. The default can also be targeted to specific regions (identified by their region code). Learn more about setting up consent mode. Make sure to configure the categories used and the regions based on your specific requirements. 2. Updating consent when the user interacts with your cookie consent banner: this snippet sends consent updates from the HubSpot cookie banner to Google. This code extracts the consent state from the HubSpot cookie banner consent object and updates the corresponding categories in consent mode. These mappings are a suggestion, so make sure to update them to include the categories you require. Learn more about the categories available for the HubSpot cookie banner and consent mode categories.The code below is a recommendation and may not meet your regulatory requirements. Make sure to review and update the code to ensure it meets your needs.
Implement advanced Google consent mode for Google Analytics 4
First, you need to find the installation code for Google Analytics 4 in your Google Analytics account. This code may change as Google updates its product. Typically, you must paste two scripts in the page’s<head>
html (similar to the scripts below). If copying these scripts, replace MEASUREMENT_ID
with your measurement ID.
To implement Advanced Consent Mode, add your consent mode configuration script before the installation code in your <head>
html.
Implement advanced Google consent mode for Google Tag Manager
The base installation code for Google Tag Manager can be found in your Google Tag Manager account. The Google Tag Manager installation code can change as Google updates its products. Typically, you must install Google Tag Manager with two snippets. If copying these scripts, replaceCONTAINER_ID
with your container ID.
1. Head code: Google instructs that this code be pasted into the <head>
tag.
<body>
tag.
Support basic consent mode for tags without built-in consent checks
If a tag does not feature built-in consent checks, it is not compatible with advanced consent mode, and you must use basic consent mode instead. Under basic consent mode, tags only fire when they have consent. If a tag does not have consent, it is blocked. You can implement this functionality using Google Tag Manager’s Additional Consent Checks feature, which allows you to specify consent mode categories that must be granted for the tag to fire. This implementation requires you to:- Send events when consent is updated: To properly configure your tags to work with the Additional Consent Checks feature, you need to fire a custom event when consent updates. In the next step, you will use this event as a trigger for your tags, ensuring that they fire when consent is updated by the user. To send this custom event, you need to add a new line to your consent mode configuration script, in the consent update section (see below for an example).
- Configure additional consent checks: For each of the tags you identified as requiring consent but lacking built-in consent checks, make the following updates to that tag’s settings:
- Configure additional consent checks for that tag. Select all the consent categories that apply to your tag.
- Add a custom event trigger to your tag. Make sure the event name matches the event name in your consent mode configuration script.