HubSpot: Integrating other cookie scripts into the HubSpot Cookie consent tool

The new 🍪 consent tool in HubSpot will only prevent HubSpot cookies from being set by default.

I couldn’t find a good ‘cookie control’ solution that would work well with HubSpot and 3rd party cookies, so I had to evolve the default HubSpot cookie tool so that it would make it work for my situation. Hopefully you will get some mileage out of this code. I’m not a developer by trade, so constructive feedback is welcome.

The code uses the following HubSpot API callback function:

_hsq.push(['addPrivacyConsentListener', function(consent) {
console.log(consent.allowed); 
}]);

The callback function will run scripts contained within if the user has given consent already. The neat thing is that it will also run when a button in the Cookie Banner is clicked – so no need to reload the page to after consent is given in order to record the current page visit within analytics.

I added the following code to the ‘site header html’ section (for the relevant domains) in the ‘web pages’ settings page found via settings > marketing > web pages.

The two tracking scripts we use that place the key tracking cookies are Google Analytics and HotJar – if you use these services then remember to change your GA and HotJar ID’s in the code.

How it works, in short, is by waiting for the page to load and then checking to see if consent already exists. If it does it runs the relevant scripts that place cookies if the consent value that is returned by the callback function is ‘true’ (e.g consent has been given).

If consent hasn’t already been granted then the code listens for an interaction with one of the HubSpot cookie banner buttons. At which point it runs the relevant scripts that place cookies only if the user has clicked the consent button. If the user has opted out then other scripts will run if required.

// First load latest jquery library in no-conflict mode:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
<script>var $j = jQuery.noConflict(true);</script>

<script>
//set some key variables that we will use later:
var gaIDx = 'UA-XXXXXXXXX-X'; //replace the Xs with your google analytics ID
var cookDebug = 'on'; //set this to anything else to stop debug output to console

//pre-load the GA tracking script without calling it yet:
if (cookDebug =='on') { console.log('Pre-Load the GA tracking code')};
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

// use query document ready to make sure the document has finished loading before we call the tracking function (otherwise the dependent Hubspot tracking script might not be available):
$j( document ).ready(function() {
if (cookDebug =='on') {console.log('Document has loaded - call the HS Consent Callback function.')};
//call the HubSpot cookie consent callback code:
_hsq.push(['addPrivacyConsentListener', function(consent) {
//code inside this will be run straight away if previously interacted with the consent banner, or upon clicking a consent button.
if (consent.allowed == true) {
//if consent to cookies exists, this code will run
if (cookDebug =='on') {console.log('HS Consent Callback - consent is TRUE. Run ALL cookies.')};

//hotjar
if (cookDebug =='on') { console.log( "hotjar code executing ..." )};
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:NNNNNN,hjsv:6}; // set NNs to your hot jar ID.
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');

//Google Analytics
ga('create', gaIDx, 'auto');
ga('send', 'pageview');

} else {
//run code that only sets non-persistent cookies
if (cookDebug =='on') {console.log('HS Consent Callback - consent is FALSE. Run only ESSENTIAL cookies.')};
//Put your code here to run if consent has not been given.

};
}]);
});
if (cookDebug =='on') { console.log('Cookie code should have already run and finished by this point.')};
</script>