At Avatria, we’re big believers in Google Tag Manager. When it comes to configuring your tracking scripts and pixels, few tools can match the flexibility and control GTM provides.

That’s why, even when a client comes to us using a tool that offers GA4, Google Ads, or Facebook Ads pixel integrations out of the box, such as Hubspot, we always recommend that they continue to use GTM for their tracking needs. Doing so offers the following benefits:

• Ability to implement tracking for custom events and dimensions

• Easy installation of other third-party software, such as heat mapping, chatbots, and more

• Greater transparency and simpler troubleshooting of issues

• GTM consent mode functionality, including cookieless pings from Google tags

We love that Hubspot offers cookie consent functionality built in to their software. If you’re not familiar, this feature allows Hubspot users to set default consent states based on geography, display custom cookie consent messaging, and more. This is a huge boon for Hubspot users, especially those who receive significant traffic from areas governed by GDPR regulations. Whereas before you would have been required to acquire a third-party software to manage this functionality, Hubspot’s feature will allow you to conform quickly, easily, and cost-effectively.

That said, Hubspot’s feature does provide a challenge for those sites relying on Google Tag Manager, and their documentation does leave something to be desired for these users. As such, below we’ll walk you through everything you need to know to integrate Hubspot’s cookie consent banner with your GTM setup.

Google Tag Manager Configuration for Hubspot Cookie Consent

If you don’t know how to set up a consent banner in Hubspot, we’ll leave the guide to that to the experts.Within GTM, we’ll be configuring a series of tags, triggers, and variables. Let’s start with the variables you’ll need.

Variables

Hubspot Consent Cookie

• Description: This variable will allow you to read the cookie Hubspot sets once consent settings have been established. We’ll use this to help set our default consent state and see if consent settings have actually changed.

• Variable Type: 1st-party Cookie

• Cookie Name: __hs_cookie_cat_pref

• URI-decode cookie: Enabled

Hubspot Consent Default - Advertising and Analytics

• Description: These are actually two separate variables you’ll want to set up, one for each of the core consent types. These variables use the same code (with one minor change you’ll need to make between them).

• Variable Type: Custom Javascript

• Format Value:

  • Convert true to: granted

  • Convert false to: denied

• Custom Javascript:

function() {
var cookieValue = document.cookie.match('(^|;)\\s*' + '__hs_cookie_cat_pref' + '\\s*=\\s*([^;]+)');
 if (cookieValue) {
 var consentString = cookieValue.pop();
 var consents = {};
 consentString.split('_').forEach(function(item) {
 var parts = item.split(':');
 var key = parts[0].trim();
 var value = parts[1].trim();
 if (value === 'true') {
 consents[key] = true;
 } else if (value === 'false') {
 consents[key] = false;
 }
 });
  var analytics     =  consents['1'] || false;
  var advertisement =  consents['2'] || false;
  var functionality =  consents['3'] || false;

  return (advertisement);  
} else {
 return (false);
 }
}

• Notes:

  • Make sure you enable the Convert true/false settings, otherwise these variables will not be read properly.

  • Please note that the above code sample is for the Advertisement version of the variable. To create the Analytics version, copy/paste the same code, but change the last return (advertisement); statement to return (analytics); .

  • Credit to Elad Levy and his blog on the same topic, where this code originated from.

Hubspot Consent Change - Advertising and Analytics

• Description: These are actually two separate variables you’ll want to set up, one for each of the core consent types. These variables read the consent status Hubspot sends on its consent updates, which in turn is used to determine whether consent settings actually changed, and if so, to what.

• Variable Type: Data Layer Variable

• Data Layer Variable:

  • Advertising: settings.ad_storage

  • Analytics: settings.analytics_storage

Consent Mode Settings - Analytics Storage

• Description: This reads the currently set analytics storage consent setting, which is then used to compare against the Consent Change value to determine if the settings have been updated.

• Variable Type: Data Layer Variable

• Data Layer Variable: analytics_storage

consent_change - New Value?

• Description: This variable determines whether the consent update provided by Hubspot is actually a change from the current settings. This is then used in our update trigger to ensure that we’re not firing consent updates (and duplicate tags) for false updates.

• Variable Type: Custom Javascript

• Custom Javascript:

function () {
 var currentConsent = {{Consent Mode Settings - Analytics Storage}};
 var newConsent = {{Hubspot Consent Change - Analytics}};
 var consentChange;
if (newConsent == currentConsent){
 consentChange = false;
 } else {
 consentChange = true;
 }
return consentChange
}

Triggers

Consent Change

• Description: This is where our consent_change - New Value? variable is used. By checking to see if the consent settings have actually been updated, we can ensure that we’re not updating consent settings unnecessarily, and accidentally re-triggering tags that have already been sent.

• Trigger Type: Custom Event

• Event Name: consent_change

• Trigger Conditions:

  • Some Events

  • consent_change - New Value? equals true

gtm_consent_update

• Description: This trigger is used to fire tags that may not have been sent due to a denied consent status. For example, if a pageview-based tag didn’t fire due a default consent status of denied, this trigger can be added to the tag to ensure that it will fire as soon as consent is granted.

• Trigger Type: Custom Event

• Event Name: gtm_consent_update

• Notes:

  • Keep in mind that you only need to use this trigger on events that would otherwise fire on page load. The consent settings should be properly set by the time other actions on the page take place.

Tags

Hubspot Embed Code

• Description: If you’re not seeing your Hubspot cookie banner, and have confirmed that the Hubspot consent tracking cookie isn’t already set, make sure you have the Hubspot embed code installed. That can be installed via a Custom HTML tag in GTM, if preferred.

Hubspot Consent Listener

• Description: This tag utilizes Hubspot’s consent listener code to push updates to the dataLayer whenever the visitor’s consent mode changes. Our Hubspot Consent Change variables we created up above are reliant on this code to function properly.

• Tag Type: Custom HTML

• HTML:

<script>
var _hsp = window._hsp = window._hsp || [];
var consentCookie = {{Hubspot Consent Cookie}};
_hsp.push(['addPrivacyConsentListener', function(consent) {
 var consentMode = {
 analytics_storage: consent.categories.analytics ? 'granted' : 'denied',
 ad_storage: consent.categories.advertisement ? 'granted' : 'denied',
 functionality_storage: consent.categories.functionality ? 'granted' : 'denied'
 };
dataLayer.push({
  'event': 'consent_change',
  'settings': consentMode
});
localStorage.setItem('consentMode', JSON.stringify(consentMode));
}]);
</script>

• Trigger: Initialization - All Pages

  • It’s best to fire this code as early as possible to ensure that the code is running by the time the user accepts the consent banner.

Cookie Consent Default

• Description: This tag establishes the default consent state, which ensures that consent will be denied until it has been granted via the Hubspot cookie banner.

• Tag Type: Consent Mode (Google tags)

  • This is a custom tag template provided by Simo Ahava, and as such, you’ll need to add it from the gallery. For more information, we highly recommend his blog post on the topic.

• Consent Command: Default

• Regions: All

  • If you want to get more sophisticated, you can use this setting to define the actual regions in which you want to set the default consent. Just keep in mind that Hubspot may also have regional settings configured regarding cookie consent, so be sure the two are in alignment.

• Consent Settings:

  • ad_storage: {{Hubspot Consent Default - Advertising}}

  • analytics_storage: {{Hubspot Consent Default - Analytics}}

  • ad_user_storage: {{Hubspot Consent Default - Advertising}}

  • ad_personalization: {{Hubspot Consent Default - Advertising}}

  • functionality_storage: granted

  • security_storage: granted

• Other Settings:

  • Redact Ads Data: Enabled

    • This setting enables cookieless pings for Google Ads hits

  • Push dataLayer Event: Enabled

• Firing Triggers:

  • Consent Initialization - All Pages

Cookie Consent Update

• Description: This tag updates the consent state after a user changes their consent settings, either by accepting cookies or denying previously accepted cookies.

• Tag Type: Consent Mode (Google tags)

• Consent Command: Update

• Regions: All

  • See note above. This should match whatever settings are configured in the Default tag.

• Consent Settings:

  • ad_storage: {{Hubspot Consent Change - Advertising}}

  • analytics_storage: {{Hubspot Consent Change - Analytics}}

  • ad_user_storage: {{Hubspot Consent Change - Advertising}}

  • ad_personalization: {{Hubspot Consent Change - Advertising}}

  • functionality_storage: granted

  • security_storage: granted

• Other Settings:

  • Redact Ads Data: Enabled

    • This setting enables cookieless pings for Google Ads hits

  • Push dataLayer Event: Enabled

• Firing Triggers:

  • Consent Change

Existing Tag Changes

Once you have consent mode set up, you’ll want to check your existing analytics and marketing tags to confirm that they’re configured properly to take advantage of Consent Mode.

Google Tags

• One of the key benefits of GTM consent mode is that Google tags feature built-in consent checks, enabling them to send cookieless pings when consent has not been granted.

• As such, these tags do not need any additional configuration to take advantage of this functionality. Just ensure that under Advanced Settings > Consent Settings, Additional Consent Checks is set to “Not Set”.

• This feature impacts tags for the following products:

  • Google tag

  • Google Analytics

  • Google Ads

  • Floodlight

  • Conversion Linker

Marketing Tags

• Unlike Google tags, any third-party tags used for marketing/advertising products must be updated to ensure that they only fire once consent has been granted.

  • This may include tags for products such as Facebook Ads, Microsoft Ads, and more.

• For each of these tags, ensure that under Advanced Settings > Consent Settings, Additional Consent Checks is set to “Require additional consent for tag to fire”, with a type of ad_storage.

Analytics Tags

• Tags for third-party analytics tools (such as Hotjar, Adobe Analytics, and more) must also be updated to ensure that they fire only once consent has been granted.

• For each of these tags, ensure that under Advanced Settings > Consent Settings, Additional Consent Checks is set to “Require additional consent for tag to fire”, with a type of analytics_storage.

Other Notes - Hubspot Cookie Blocking Code

In the case of at least one client, we found a tag in their GTM that installed a script called HubSpot Cookie Blocking Code. Documentation on this script was hard to come by, but our research showed that this code is related to a beta feature from a few years ago. In testing, we found that this code actually interferes with the proper functioning of the new cookie consent feature, so if you have this script installed on your site, we recommend pausing or removing it. Our testing found no adverse impact of doing so—cookies continued to be blocked pending consent as expected.

Conclusion

We hope this guide has been helpful! If you have any questions or need additional assistance, please reach out to us directly via the contact link below!

Additional Resources

• Hubspot Cookie Consent with Google Tag Manager

  • Elad Levy’s blog post was a great help to us as we developed our approach, and you may notice that many parts of our solution are the same as theirs. The primary change we’ve introduced is the Consent Change trigger and related variable, which improve upon the original solution by ensuring that duplicate events do not fire in cases where consent has not actually changed.

• Consent Mode (Google Tags) - Custom Tag Template

  • Simo Ahava’s development of the Consent Mode (Google tags) tag template was invaluable to the solution. This blog post is his original guide to its usage.

• Cookie consent banner API

  • Hubspot’s documenation on API calls related to the cookie consent banner. The listener code was taken from here.

• Set up a consent banner with the new editor

  • Hubspot’s documentation on configuring your consent banner.