So I'm making a GDPR, CCPA... compliant Next.js App with cookie consent and preferences and need to implement Google Anayltics with Google Tag Manager with Consent.
_app.js:
...
<Script src={`https://www.googletagmanager.com/gtag/js?id=${googleTagId}`} strategy="afterInteractive" />
<Script
id="gtag"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
'ad_storage': 'denied',
'analytics_storage': 'denied',
});
(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','My Id from gtag code...');
`
}}
/>
But when I go to my app I can see that Google anayltics collects data without prior consent (denied in consent gtag function). See this image
Only after the user consented with this code it should collect data:
gtag('consent', 'update', {
'ad_storage': 'granted',
'analytics_storage': 'granted',
});
Why is it collecting data without prior consent, when everything is set to denied?