Cookie Consent Banner with Webflo

Marketing & Content GDPR
1

My website https://www.upvise.co/ is hosted by webflow, but I use Hubspot forms and tracking. I want all the cookie consents to be managed by the Hubspot cookie banner.

I haven’t entered any further code that could place cookies on my webflow installation except Google Tag Manager.

What would be the next step now? I also integrated GTM and GA4 with Hubspot but these integration options look like they only apply to Hubspot hosted pages. I looked into the documentation, does that mean I need to add the provided javascript code to my webflow site? Has anyone done that before and could help out? All I want is that the categories from the consent banner match Google Tag managers and GAs consent settings.

2

Hi @Upvise ,

As long as you have the HubSpot tracking code on every page, your cookie consent banner should also be able to be displayed on every page.

You can also customize your banner or add a cookie settings button to your site so visitors can modify/revoke consent as desired. Here is the complete guide to managing those settings.

3

that wasnt my question

4

Sorry @Upvise if I misuderstood.

If your actual question is around aligning HubSpot consent and GTM, I think @JordanJulio can help with that.

5

Theres 2 ways to look at this in my opinion, theres a more technical way which will be option 2 in this thread, then theres a more streamlined way that ive seen consent mode success with.

Streamlined:

1) The first part is ensuring youre conesnt banner in HubSpot is active, whether external or not. For example, I have a client with 3 consnent banners on 3 different domians, external and hubspot hosted:

JordanJulio_1-1709585810760.png
JordanJulio_1-1709585810760.png2240×291 28.7 KB

Implement your html onto your website via the tracking code - you can do this via GTM or in Webflow:

JordanJulio_2-1709585962403.png
JordanJulio_2-1709585962403.png1449×625 41.7 KB

Once Google Tag Manager is stitched up with your site and your site has the HubSpot consent banner code also on there - you will be good to go consent banner wise.

Very important: in GA4, once you stitch up your consent banner, you should see 2 green checkmarks ensuring you’re consent mode v2 complaint; you can see this in “Data Stream” in your GA4 Admin settings:

JordanJulio_4-1709586301540.png
JordanJulio_4-1709586301540.png1511×497 73.7 KB

If these signals are active, you’re compliant.

Now there are more specific items that live in consent mode v2 such as Enhanced Conversions in Paid Ads world. For example, on HubSpot form submits, you can have user 1st party data - e.g., email, also go to Google Ads & GA4, on top of HubSpot:

JordanJulio_3-1709586178478.png

More technical:

2) Integrating HubSpot’s cookie consent management with GTM and GA4 on a Webflow site involves several steps and (potentially) custom JS code.
I’m assuming youve stitched up your HubSpot Consent banner with Webflow via the tracking code, right?

On the off chance you have not, here’s the how to for convenience:

  1. In HubSpot, go to your account settings to find the tracking code.
  2. In Webflow, navigate to your project settings.
  3. Go to the Custom Code section and paste the HubSpot tracking code in the head or footer code sections. This ensures the HubSpot cookie banner and tracking functionality is loaded on all pages of your site.

After this is set up, given that GTM and GA4 integration options in HubSpot mainly apply to HubSpot-hosted pages, you’ll need to now manually configure GTM and GA4 to respect the consent settings managed by HubSpot’s cookie banner. This includes:

  1. Using GTM’s Consent Management features (akin to consent mode v2) to configure the consent initialization event.
  2. Create trigger(s) based on the HubSpot cookie consent state.
  3. Modify your GA4 configuration tag in GTM to fire based upon the consent triggers you’ve set up.

You want to ensure that the consent categories in HubSpot match those used by GTM and GA4.

Also, you may need to add a custom JavaScript snippit under the custom code tag to listen for consent changes from the HubSpot cookie banner and then pass those consents to GTM. This script should map the HubSpot consent categories to the consent settings used in GTM and GA4, ensuring that analytics tracking is only enabled when consent is given.

Below is an example JavaScript snippet that demonstrates how you might listen for consent changes from the HubSpot cookie banner and then communicate those consent states to GTM. This script assumes you’ve already configured GTM to handle consent states appropriately, which might involve setting up custom events or variables in GTM based on user consent.

This example script is for illustrative purposes. You might need to adjust it based on your specific consent categories, the details of your HubSpot setup, and how you’ve configured GTM.

JordanJulio_0-1709585355159.png
JordanJulio_0-1709585355159.png730×749 59.7 KB

Notes:

  • HubSpot Event Type: This script listens for messages from the HubSpot cookie consent banner using window.addEventListener. The specific event type ‘hsCookieConsent’ and data structure (event.data.data.categories.analytics) are based on a simplified interpretation of how HubSpot might communicate consent. You’ll need to verify the actual event type and data structure based on HubSpot’s implementation.
  • GTM Custom Events: The script uses dataLayer.push() to communicate consent states to GTM through custom events (‘analyticsConsentGiven’ and ‘analyticsConsentRevoked’). You will need to create these custom events in GTM and configure your tags to trigger based on these events.
  • Consent Categories: This example focuses on a single consent category (analytics). If your website uses multiple categories (e.g., marketing, functional), you’ll need to expand the script to handle each category separately.
6

Hi Jordan. Thanks for the detailed and competent answer. I have a few questions and will go through them one after the other.

Solution 1:

I have done exactly that. The GTM script is placed directly via Webflow, same with the Hubspot tracking code. I have added upvise.co as an external domain. The consent banner pops up (v2) and I have also the GDPR-compliant categories set up.

Questions:

  1. How does Hubspot sync with GTM to match the cookie categories and deny cookies if the user disallows the usage of cookie categories? Wouldnt I have to use Hubspots custom javascript code and manually enter it to any other script that is being used via GTM to block the cookies matching to the cookie categories?
  2. The green checkmarks in GA4 that check for consent mode 2 are not green. Will I have to do something manually?

Since 2) above is not green, I assume I would have to go with Solution 2, right?

Solution 2:

  • “I’m assuming youve stitched up your HubSpot Consent banner with Webflow via the tracking code, right?” - Yes, that is accurate

Solution 2 is a huge project for me. It feels overwhelming and a bit unbelievable that website owners have to set this up in that way. Are you aware of simpler solutions/services?

7

Pleasures mine.

Let’s stick with solution 1. Solution 2 is technical and only relevant if you have a software dev at your disposal.

Since your HubSpot and GTM pixels are firing on your site, yes, you can implement HubSpots custom JS via GTM if this is not already hardcoded and included on your site. How many other tags do you have that are consent / cookie related? if you add the HubSpot custom JS to your site via GTM, just include it on All Pages for your trigger.

For the green chcks in GA4, forgive me, when i was going through the consent checklist in my head, I didn’t realize the GA4 consent section is for digital advertising solely - if you were running a paid ads effort and leading users to a landing page with a HubSpot form fill, you’d want the 2 green checks firing to ensure ad personalization and ad data storage for the a; algorithm. Ads & consent are the hot button topics.

8

Hi Jordan,

thanks for clarifying. Would you be able to share an example of how to add the HubSpot custom JS to my site via GTM per trigger? I have about 6 tags on the site.

Also, in case i need to advance with solution 2 (technical), would you be able to share the code you had in the container in your preview?

9

I know it’s been a few months, but you can look into other cookie banner solutions that work with webflow too. As you scale and grow your website, and with new legislations being passed in the US and around the globe, you will need a more robust solution to respect your users consent everywhere, called consent management platform (CMP). You can start with free CMP solutions first too that work great for webflow. Hope this helps!