APIs & Integrations

Ed-Jones
Member

Passing HubSpot Cookie Consent to Google Tag Manager

SOLVE

Hi, 

 

Wondering if anyone can help solve my challenge.

 

I want to start using HubSpot tracking and the cookie consent mechanism. But it doesn't support the management of third party cookies.

I've been told the Event API can be used to pass on consent outcome to trigger the Google Tag Manager script - which is what I use to deploy my third party cookies.
 
Has anyone successfully done this?
 
So far, my attempts to configure this have been unsuccessful. I'm relying on these resources, and while they each present solutions, none of the configurations I tried have allowed the GTM script to successfully fire:
 

Any help would be greatly appreciated.

Best regards

Ed

0 Upvotes
1 Accepted solution
Ed-Jones
Solution
Member

Passing HubSpot Cookie Consent to Google Tag Manager

SOLVE

Hi Linda, 

 

Thanks for responding.

 

I think it was just my lack of implementation knowledge that was holding me back. I took that exact same code from the HubSpot knowledge base.

 

However, I only got this to function as expected after separating it from other codes and adding <script> tags.

 

This is what the code looks like (though i've added holding text for the GTM account number.

 

<script>
      var _hsp = (window._hsp = window._hsp || []);
      _hsp.push(['addPrivacyConsentListener', function (consent) {
      if (consent.allowed) { (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-CODE-GOES-HERE');
      console.log('GTM Cookie Consent')
          }
      }]);
</script>   

 

View solution in original post

0 Upvotes
3 Replies 3
VBunjevac
Member

Passing HubSpot Cookie Consent to Google Tag Manager

SOLVE

Hi, here is a solution to use HubSpot's new cookie consent banners (https://developers.hubspot.com/docs/api/events/cookie-banner) with Google Tag Managers consent settings API (https://developers.google.com/tag-platform/security/guides/consent) for much easier category consent triggering in GTM.

 

First, enable Consent Overview in your container. Go To your GTM account, navigate to Admin -> Container Settings, and tick the Enable consent overview. With this, you will be able to test event consent states in the preview testing of your GTM account.

Screenshot 2023-09-14 at 23.54.06.png

Second, add this code for the Initialization of GTM Consent Mode above your GTM script. This code checks if a saved consent mode exists in localStorage and sets the default consent mode for GTM accordingly. We check if savedConsent exists, if it does, an immediately-invoked function expression is used to try parsing the saved consent and validate its properties. If the parsing or validation fails, the defaultConsent is returned, and if savedConsent doesn't exist, the defaultConsent is used directly.

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

var savedConsent = localStorage.getItem('consentMode');
var defaultConsent = {
    'ad_storage': 'denied',
    'analytics_storage': 'denied',
    'functionality_storage': 'denied',
};

var consentMode = savedConsent ? 
    (function() {
        try {
            var parsedConsent = JSON.parse(savedConsent);
            return (parsedConsent.ad_storage && parsedConsent.analytics_storage && parsedConsent.functionality_storage) ? 
                parsedConsent : defaultConsent;
        } catch (e) {
            return defaultConsent;
        }
    })() : 
    defaultConsent;

gtag('consent', 'default', consentMode);

 

And then you add this HubSpot Cookie Consent Listener after your GTM script which waits for any changes in user consent. When a change is detected, it updates the GTM consent mode and saves the updated mode to localStorage.

 

var _hsp = window._hsp = window._hsp || [];

_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'
    };

    gtag('consent', 'update', consentMode);
    localStorage.setItem('consentMode', JSON.stringify(consentMode));
}]);

 

So now, inside GTM, on a tag level I can control which tags are fired when:

Screenshot 2023-09-15 at 00.00.07.png

0 Upvotes
Ed-Jones
Solution
Member

Passing HubSpot Cookie Consent to Google Tag Manager

SOLVE

Hi Linda, 

 

Thanks for responding.

 

I think it was just my lack of implementation knowledge that was holding me back. I took that exact same code from the HubSpot knowledge base.

 

However, I only got this to function as expected after separating it from other codes and adding <script> tags.

 

This is what the code looks like (though i've added holding text for the GTM account number.

 

<script>
      var _hsp = (window._hsp = window._hsp || []);
      _hsp.push(['addPrivacyConsentListener', function (consent) {
      if (consent.allowed) { (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-CODE-GOES-HERE');
      console.log('GTM Cookie Consent')
          }
      }]);
</script>   

 

0 Upvotes
lindahl
Contributor | Diamond Partner
Contributor | Diamond Partner

Passing HubSpot Cookie Consent to Google Tag Manager

SOLVE

Hi @Ed-Jones ,

 

Let me get things clear, correct me if I'm wrong, so what you're trying to do is by using HubSpot cookie banner, if consent is allowed, then trigger or fire a tag in Google Tag Manager?

If that's the case, you can take a look at either Get privacy consent status or Cookies not by category section. You can try to fire the following code in your website with cookie banner/tracking code installed.

 

var _hsp = (window._hsp = window._hsp || []);
_hsp.push(["addPrivacyConsentListener", function (consent) {
    if (consent.allowed) {
        //add your code here that fires GTM certain tag.
        console.log('something')
    }
}])