HubSpot & CookieTractor
The popular CRM tool HubSpot offers many useful features for your website. However, to meet legal requirements, you need to ensure that the integration respects the visitors' consent choices.
When using a CMP like CookieTractor, it is ideal if the choices made in the cookie banner can be used in conjunction with HubSpot’s built-in cookie banner.
Configure HubSpot for cookie management
There are several ways to integrate HubSpot on your website, the most common being to include the HubSpot script in your HTML, as shown in the following example:
<!-- 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 is also common to use a CMS plugin, such as HubSpot’s official plugin for WordPress, which generates a script similar to this 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&ver=11.1.75" id="leadin-script-loader-js-js"></script>HubSpot’s embedded code sets cookies without consent
By default, the script sets cookies as soon as the visitor enters the website. For a correct integration with CookieTractor, you need to activate HubSpot’s built-in cookie banner.
Log in to your HubSpot account and navigate to the Data Privacy & Consent settings section:
- Click the gear icon
- Click Privacy & Consent in the side menu
- Go to the Cookies tab
Here, you need to set up a cookie banner for your public domain (and possibly for test domains as well).
When configuring the banner, it is important to ensure that the Banner Type is set to Opt-in, and that the option Allow opt-in by category is enabled.
Once the cookie banner is published, both CookieTractor’s dialog and HubSpot’s cookie banner will be shown on your website.
At this stage, some cookies from HubSpot’s banner will still be set before the visitor has given consent – for example, cookies like __cf_bm and _cfuvid. These cookies belong to the infrastructure and are set by Cloudflare (used by HubSpot), and are considered strictly necessary. Therefore, they can be set without the visitor first giving consent. These cookies are not used by HubSpot to track your visitors in any way.
The next step is to hide HubSpot’s banner and use JavaScript to automatically adjust HubSpot’s settings when the visitor interacts with CookieTractor’s popup.
Place this script just before the closing </body> tag in the HTML of your website:
<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 this script in place, HubSpot’s cookies will be set in accordance with the consent given via CookieTractor’s cookie banner.