{"id":5770,"date":"2024-01-29T15:24:19","date_gmt":"2024-01-29T12:24:19","guid":{"rendered":"https:\/\/trackingchef.com\/?p=5770"},"modified":"2024-01-29T15:28:58","modified_gmt":"2024-01-29T12:28:58","slug":"hubspot-cookie-consent-with-google-tag-manager","status":"publish","type":"post","link":"https:\/\/trackingchef.com\/google-tag-manager\/hubspot-cookie-consent-with-google-tag-manager\/","title":{"rendered":"Hubspot Cookie Consent with Google Tag Manager"},"content":{"rendered":"\n

Hubspot is an all-encompassing solution for marketers. You can handle in one place all your marketing needs, from emails to pixels to ad spend tracking.<\/p>\n\n\n\n

But as with all-encompassing solutions, you get a mediocre experience at best. Your ad spend tracking can include only Google, Facebook and LinkedIn Ads. Other platforms aren’t welcome. Your pixels can easily be loaded on the site, but custom events can’t really be handled via Hubspot.<\/p>\n\n\n\n

Don’t get me wrong, I’m still a Hubspot fan. But I acknowledge that it can’t handle everything marketing at the level I expect it to do out of the box. <\/p>\n\n\n\n

One example for this is marketing pixels.<\/p>\n\n\n\n

Working with Hubspot for years now, my best practice has always been to handle all the pixels separately from the Hubspot tag and directly via GTM. It improves the site’s performance and gives me granular control over tags and triggers.<\/p>\n\n\n\n

The Hubspot Cookie Banner<\/h2>\n\n\n\n

A similar issue occurs when handling cookie consent using the Hubspot cookie banner. When loading the Google Tag Manager or Google Analytics scripts (or any other script for that matter) via the Hubspot tag, you get a simple integration out of the box with the consent banner. <\/p>\n\n\n\n

Consent granted? GTM & GA will run. No consent? no code will run.<\/p>\n\n\n\n

This simplistic solution blocks off any third-party code (e.g. chat widget) you have in GTM. It also ignores the built in Consent Mode<\/a> that Google offers for differential tracking based on the user’s consent.<\/p>\n\n\n\n

So the alternative is to have GTM implemented standalone on the page, and have it inherit the consent state from Hubspot’s cookie banner. Simple, right?<\/p>\n\n\n\n

Hubspot’s cookie banner has multiple options for integration, that differ based on the regulation of various global regions, i.e. the consent required in the EU is different than the one required in the US.<\/p>\n\n\n\n

The standard EU (opt-out by default) is easy to set up. When the consent banner loads, it saves a cookie of the name __hs_cookie_cat_pref<\/code>. This cookie takes the values of the consent categories granted (or denied) as boolean values 1:true_2:true_3:true<\/code>.<\/p>\n\n\n

\n
\"\"
Opt out by default and show a consent banner<\/figcaption><\/figure><\/div>\n\n\n

This consent state can be read by GTM using a small JS that extracts the value of the consent categories from the cookie. This is great for the Default Consent event. It can also track any subsequent changes to the consent state (e.g. a user approving tracking) to trigger a new Consent Update tag. So far so good.<\/p>\n\n\n\n

In a certain client’s case, I was also asked to add a default state for users outside of the EU that consents to all tracking. The setup in Hubspot is again very simple.<\/p>\n\n\n

\n
\"\"
Allow all cookies by default w\/o showing a banner<\/figcaption><\/figure><\/div>\n\n\n

The tricky part about this setup was that this doesn’t load any banner and doesn’t save these values to the same cookie. So we can’t use these values for the Default Consent tag.<\/p>\n\n\n\n

Let’s get practical<\/h2>\n\n\n\n

Default Consent tag<\/p>\n\n\n\n

The first tag we’ll create is the Default Consent tag which uses Simo Ahava’s Consent Mode Custom Template.<\/p>\n\n\n\n

The consent command should be set to Default and the trigger is Consent Initialization.<\/p>\n\n\n\n

The consent settings should read from the Hubspot cookie set by the banner. In absence of such a cookie, it will default to ‘denied’.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Each variable here is a Custom JS, fetching the specific value from the cookie.<\/p>\n\n\n\n

function() {\n\nvar cookieValue = document.cookie.match('(^|;)\\\\s*' + '__hs_cookie_cat_pref' + '\\\\s*=\\\\s*([^;]+)');\n  if (cookieValue) {\n    var consentString = cookieValue.pop();\n    var consents = {};\n    consentString.split('_').forEach(function(item) {\n      var parts = item.split(':');\n      var key = parts[0].trim();\n      var value = parts[1].trim();\n      if (value === 'true') {\n        consents[key] = true;\n      } else if (value === 'false') {\n        consents[key] = false;\n      }\n    });\n  \n      var analytics     =  consents['1'] || false;\n      var advertisement =  consents['2'] || false;\n      var functionality =  consents['3'] || false;\n\n      return (analytics);  \n  \n  } else {\n    return (false);\n  }\n\n}<\/code><\/pre>\n\n\n\n
A final important touch to the variable is to convert true\/false values to granted\/denied using the Format value option.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Consent state listener<\/h3>\n\n\n\n
Now we need to track changes in the consent state, so that we can update the tags on page.<\/p>\n\n\n\n
This requires a Custom HTML tag that loads on every page.<\/p>\n\n\n\n
This tag register to consent change events and when such happens, triggers a Data Layer event with the changes and saves the changes to a cookie.<\/p>\n\n\n\n
<script>\nvar _hsp = (window._hsp = window._hsp || []);\n  \n_hsp.push([\"addPrivacyConsentListener\", function (consent) {\n    dataLayer.push({\n      'event': 'consent_change',\n       ad_storage: consent.categories.advertisement ? \"granted\" : \"denied\",\n       analytics_storage: consent.categories.analytics ? \"granted\" : \"denied\",\n       personalization_storage: \"denied\",\n       functionality_storage: consent.categories.functionality ? \"granted\" : \"denied\",\n       security_storage: \"granted\"\n    });    \n      \/\/ Check if the cookie already exists\n      if (!getCookie(\"__hs_cookie_cat_pref\")) {\n        \/\/ Save 180 days cookie\n        var cookieValue = '1:' + (consent.categories.analytics ? 'true' : 'false') + '_2:' + (consent.categories.advertisement ? 'true' : 'false') + '_3:' + (consent.categories.functionality ? 'true' : 'false');\n        var expiryDate = new Date();\n        expiryDate.setDate(expiryDate.getDate() + 180); \/\/ 180 days from now\n        document.cookie = '__hs_cookie_cat_pref=' + cookieValue + '; expires=' + expiryDate.toUTCString() + '; path=\/; domain=.env0.com';\n      }\n\n}]); \/\/ hsp listner\n  function getCookie(name) {\n  var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));\n  if (match) return match[2];\n}\n <\/script><\/code><\/pre>\n\n\n\n
Consent Update tag<\/h3>\n\n\n\n
This tag, using the same Custom Tag Template for Consent Mode, triggers on the consent_change<\/code> event initiated by the Custom HTML above.<\/p>\n\n\n\n
Unlike the Default tag, it sets the categories consent state based on the Data Layer Variables sent with the event. It can potentially feed on the same cookie, but for sake of efficiency data layer was chosen.<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
I also set the Push dataLayer Event to checked, so that this issues a trigger for pageview pixels that were restricted from firing up until the consent changed (to avoid losing UTM and Click ID data etc.)<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
The end game looking something like this:<\/p>\n\n\n
\n
\"\"<\/figure><\/div>","protected":false},"excerpt":{"rendered":"
Hubspot is an all-encompassing solution for marketers. You can handle in one place all your marketing needs, from emails to pixels to ad spend tracking. But as with all-encompassing solutions, you get a mediocre experience at best. Your ad spend tracking can include only Google, Facebook and LinkedIn Ads. Other platforms aren’t welcome. Your pixels […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39,42],"tags":[],"_links":{"self":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/5770"}],"collection":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/comments?post=5770"}],"version-history":[{"count":5,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/5770\/revisions"}],"predecessor-version":[{"id":5784,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/5770\/revisions\/5784"}],"wp:attachment":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/media?parent=5770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/categories?post=5770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/tags?post=5770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}