Cookie consent banner API problem

Hi there,
I have a problem with the cookie consent banner.

Regarding this documentation - Consent banner API - HubSpot docs

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

_hsp.push(['addPrivacyConsentListener', function(consent) {
 console.log(`analytics: ${consent.categories.analytics}`); 
 console.log(`advertisement: ${consent.categories.advertisement}`); 
 console.log(`functionality: ${consent.categories.functionality}`); 
}]);

I added this code, but it’s calling whenever the page loads instead of when cookie banner properties change, and every time returns only true values.
Here is all my code in the head

<script nowrocket charset="utf-8" type="text/javascript" id="hs-script-loader-main" src="//js.hsforms.net/forms/embed/v2.js"></script><script nowrocket type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/XXXXXXX.js"></script><script nowrocket> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } // Determine actual values based on your own requirements, gtag('consent', 'default', { 'analytics_storage': 'denied', 'ad_storage': 'denied', 'ad_user_data': 'denied', 'ad_personalization': 'denied', 'region': ['ES', 'US-AK'] }); gtag('consent', 'default', { 'analytics_storage': 'granted', 'ad_storage': 'granted', 'ad_user_data': 'granted', 'ad_personalization': 'granted', }); var _hsp = window._hsp = window._hsp || []; _hsp.push(['addPrivacyConsentListener', function(consent) { var hasAnalyticsConsent = consent && (consent.allowed || (consent.categories && consent.categories.analytics)); var hasAdsConsent = consent && (consent.allowed || (consent.categories && consent.categories.advertisement)); console.log(analytics: ${consent.categories.analytics}); console.log(advertisement: ${consent.categories.advertisement}); console.log(functionality: ${consent.categories.functionality}); if(hasAnalyticsConsent){ const script = document.createElement('script'); script.src = "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"; script.async = 'true' document.head.appendChild(script); } gtag('consent', 'update', { 'analytics_storage': hasAnalyticsConsent ? 'granted' : 'denied', 'ad_storage': hasAdsConsent ? 'granted' : 'denied', 'ad_user_data': hasAdsConsent ? 'granted' : 'denied', 'ad_personalization': hasAdsConsent ? 'granted' : 'denied', 'region': ['ES', 'US-AK'] }); gtag('consent', 'update', { 'analytics_storage': 'granted', 'ad_storage': 'granted', 'ad_user_data': 'granted', 'ad_personalization': 'granted', }); }]);</script><script nowrocket> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXXX');</script><!-- Google Tag Manager --><script nowrocket>(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-XXXXXX');</script>

How can I fix it?
Looking forward,
Nazar

Hi @ZaAz,

It sounds like you’re encountering an issue where the cookie consent listener is being triggered on every page load.
Some solutions -

1. Double-check that the consent listener is only initialized once and not on every script execution.
2. Try moving the _hsp.push([‘addPrivacyConsentListener’, …]); code block to ensure it’s executed after the banner script is fully initialized.
3. Since you’re always getting true values, it’s possible that the consent listener is reading the default consent state. You can try adding some logging or breakpoints to see what’s happening with the consent object when the listener runs.
4. It looks like you’re updating consent values and re-initializing gtag multiple times. This might be causing the listener to fire unnecessarily. Consider simplifying the logic to only update the consent and load the gtag script once, based on the final consent state.
Here’s a simplified version of your code that might help:

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

var _hsp = window._hsp = window._hsp || [];
_hsp.push([‘addPrivacyConsentListener’, function(consent) {
var hasAnalyticsConsent = consent && (consent.allowed || (consent.categories && consent.categories.analytics));
var hasAdsConsent = consent && (consent.allowed || (consent.categories && consent.categories.advertisement));

console.log(`analytics: ${hasAnalyticsConsent}`);
console.log(`advertisement: ${hasAdsConsent}`);

if (hasAnalyticsConsent) {
const script = document.createElement(‘script’);
script.src=“https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX”;
script.async = true;
document.head.appendChild(script);

gtag(‘consent’, ‘update’, {
‘analytics_storage’: ‘granted’,
‘ad_storage’: hasAdsConsent ? ‘granted’ : ‘denied’,
});

gtag(‘js’, new Date());
gtag(‘config’, ‘G-XXXXXXXX’);
} else {
gtag(‘consent’, ‘update’, {
‘analytics_storage’: ‘denied’,
‘ad_storage’: ‘denied’,
});
}
}]);
</script>

I hope it helps, let me know if you need to talk!

Khushboo Pokhriyal

Growth & Operations

GroRapid Labs

LinkedIn | 9315044754 | Email | Website