Skip to content

Using HubSpot with our CookieTractor

The popular CRM tool HubSpot brings a lot of useful features to your website, however, to stay compliant you need to ensure that your integration respects the choices made by your visitors.

When using a CMP like CookieTractor it would be optimal if the choices made in the CMP can be reused with the built-in cookie consent banner in HubSpot.

Setting up Hubspot for cookie consent

There are several ways to integrate HubSpot on your website, the most common being by including the HubSpot script in your HTML, like this:

<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js-eu1.hs-scripts.com/xxxxxxxx.js"></script>
<!-- End of HubSpot Embed Code -->

It's also common to use a CMS plugin, like the official HubSpot plugin for WordPress, which would generate a code snippet similar to this one on the website:

<script type="text/javascript" id="leadin-script-loader-js-js-extra">
/* <![CDATA[ */
var leadin_wordpress = {"userRole":"visitor","pageType":"archive","leadinPluginVersion":"11.1.75"};
/* ]]> */
</script>
<script type="text/javascript" src="https://js-eu1.hs-scripts.com/xxxxxxxx.js?integration=WordPress&amp;ver=11.1.75" id="leadin-script-loader-js-js"></script>

 

HubSpot embed code sets cookies without consent

Out of the box, the script will set cookies when loaded, to make the website compliant we need to activate the built-in cookie banner in Hubspot.

Login to your HubSpot account and go to the settings section for Data Privacy and Consent

  1. Click the cog-wheel
  2. Click Privacy & Consent in the side menu
  3. Go to the Cookies tab

Here you need to set up a cookie banner for your public domain (and potentially also any testing domains).

When configuring the banner, it's important to ensure that the "Banner Type" is set to "Opt-in" with "Allow opt-in by category" enabled.

When the cookie banner is published, both the CookieTractor cookie banner and the Hubspot cookie banner will be shown on your website.

At this point some cookies from the HubSpot banner will still be set before visitor consent has been given, e.g. the __cf_bm and _cfuvid cookies. These cookies are infrastructure cookies set by Cloudflare (used by HubSpot) which are considered strictly necessary and hence can be set without prior consent from visitors. These cookies are not used by Hubspot in any way to track your visitors.

The next step is to hide the HubSpot banner and use JavaScript to automatically adjust the HubSpot settings when visitors interact with the CookieTractor popup.

Put this script before the closing body of your website HTML:

<style>
/* Hide the Hubspot cookie banner */    
#hs-banner-parent {display:none;}
/* Hide any Hubspot chat until after consent has been given */
html.cc-active #hubspot-messages-iframe-container {display:none !important;}
</style>
<script>
    window.addEventListener('CookieConsent', function (event) {
                
        if(event.detail.trigger!=='initial')
            return;

        var hasMarketingConsent = event.detail.current.includes('marketing');
        var hasStatisticalConsent = event.detail.current.includes('statistical');
        var hasFunctionalConsent = hasMarketingConsent || hasStatisticalConsent;

        if(cookieTractor.consent.available.includes('functional')) {
            hasFunctionalConsent = event.detail.current.includes('functional');
        }
        
        var isAcceptAll = hasMarketingConsent && hasStatisticalConsent && hasFunctionalConsent;

        if(isAcceptAll) {
            document.querySelector('#hs-eu-confirmation-button').click();
            return;
        }

        // Open Hubspot cookie settings dialog
        document.querySelector('#hs-eu-cookie-settings-button').click();
        setTimeout(function(){

            if(hasFunctionalConsent){
                var elmFunctional = document.querySelector('#hs-category-toggle-functionality').click();                
            }

            if(hasStatisticalConsent){
                document.querySelector('#hs-category-toggle-analytics').click();
            }

            if(hasMarketingConsent){
                document.querySelector('#hs-category-toggle-advertisement').click();
            }

            setTimeout(function(){                
                document.querySelector('#hs-modal-save-settings').click();
            },50)
            
        },50);
                    
    });
</script>

With the code snippet in place, the HubSpot cookie will be set according to the consent given in the CookieTractor cookie banner.