Back to blog

Integrating Hubspot cookie banner with Google Tag Manager (consent mode v2)

This comprehensive guide will walk you through setting up the HubSpot Cookie Banner (CMP), leveraging Google Consent Mode for precise tracking control, and seamlessly connecting HubSpot with Google Tag Manager (GTM).

Introduction

HubSpot CMP simplifies consent management by providing intuitive cookie banners, saving user preferences, and offering geolocation-based options. However, it's essential to note a critical limitation: HubSpot's CMP doesn't inherently stop marketing scripts (other than it's own) when a user opts out of tracking. This gap can lead to non-compliance with regulations.

To address this issue, we'll explore integrating Google Consent Mode with HubSpot CMP, ensuring that user preferences are accurately reflected in script execution.

Setting up HubSpot CMP

The initial steps for setting up HubSpot's consent management are straightforward:

  1. Access your HubSpot account and navigate to "Preferences" (cog icon).
  2. In the sidebar, select "Privacy & Consent."
  3. Choose your domain and create a consent banner, specifying its name, display criteria, and applicable countries.
  4. Enable "Display cookies by category" to activate additional settings.
  5. Customize the banner text and publish it.

For further customization options, refer to HubSpot's guide on customizing cookie tracking settings.

However, note that while HubSpot CMP collects user preferences, it doesn't automatically halt script execution. This is where Google Consent Mode comes into play.

Google Tag Manager's (GTM) Consent Mode feature is instrumental in aligning script execution with user preferences. Here's how to activate it:

  1. In Google Tag Manager, access "Admin" and select "Container Settings" for your chosen container.
  2. Enable "Consent Overview" and save the changes.

This action unlocks the "Consent Settings" section in tag configurations, allowing tags to respect user consent preferences.

However, Google Consent Mode requires existing consent when GTM initializes, making it unsuitable for first-time visitors. To bridge this gap, we need:

  1. A GTM trigger for consent changes.
  2. HubSpot CMP to facilitate preference changes.
  3. Integration between HubSpot CMP and Google Consent Mode.

Connecting HubSpot with GTM

Step 1: Adding the HubSpot CMP Tag

  1. In GTM, create a new tag, find "Hubspot CMP" in the gallery, and choose it as the tag type. If you can't find the template, here is the direct link to it in the template gallery.
  2. Set the tag to trigger on "Consent Initialization."

Ensure HubSpot fires before the CMP tag using GTM's "Tag Sequencing" feature.

Step 2: Customizing the Tag

Customize tracking settings by region using the "Default consent settings" section in the tag settings.

The most common way is to create one for the countries covered by the GDPR policy and one for the rest of the world. To do this, do the following:

  • Add a setting without specifying the country code - this will make it a default state for all of the countries.
  • Add a second one for the countries covered by GDPR. Here is a list of country codes for that: AT, BE, BG, HR, CY, CZ, DK, EE, FI, FR, DE, GR, HU, IS, IE, IT, LV, LI, LT, LU, MT, NL, NO, PL, PT, RO, SK, SI, ES, SE, UK

Create a GTM trigger for the `cookie_consent_update` event, indicating consent changes.

All of your tags except Hubspot and the Hubspot CMP integration should use this trigger. Here is how this works:

1. The template waits for the Hubspot cookie banner to change the consent state.

2. Once it gets changed, the template updates the consent API AND gives you a custom event (`cookie_consent_update`) for firing all the other tags.

3. When this happens, the default consent state is already updated with the values from the banner, so the tags can now fire according to their consent settings in the tag manager. You do not need to change it for the tags with built-in consent (unless you want to).

Step 4. Testing the changes

Use tag assistant to confirm the scripts fire correctly. You should see the `cookie_consent_change` event in the left sidebar and the consent summary should have the updated values you've set through the banner.

Seeing a consent error?

You might get a message in your tag assistant that looks like this:

This is expected behaviour, here is why:

In this case, Hubspot is used as a Consent Management Platform, so it needs to load before consent is set. This would be an issue with some other tag, but since it's a CMP, it will manage its own cookies and tracking when consent is changed. Once that happens, Google will manage the rest of the tags in the Tag Manager.

The reason why you see that warning is because tag manager is not smart enough to know that this is happening. Its kind of annoying that they dont have a workaround for it but it is what it is.

Additional debugging

If you are having difficulties running the template, check the following:

  • Ensure the HubSpot banner sets a cookie called `__hs_cookie_cat_pref`
  • Check that the `cookie_consent_change` event is firing.
  • Ensure that the Hubspot CMP integration fires on Consent initialization and that Hubspot fires before Hubspot CMP.
  • Check that you don't have any console errors that might prevent the code from working.

Conclusion

Integrating HubSpot CMP with Google Consent Mode and GTM is a strategic approach to maximizing compliance and user privacy. If you have any questions regarding this guide or the template, feel free to reach out!