NextJS/CookieBot: CookieBot script with data-blockingmode=“auto” is preventing the dynamically generated scripts to load
I have a NextJS site and recently implemented CookieBot. The CookieBot seems to be blocking the dynamically generated NextJs scripts before the cookies are accepted. When I add data-blockingmode=" manual" to the cookiebot script, it works fine. I want to add the data-cookieconsent='ignore' attribute to dynamically generated scripts so it doesn't block them.
I am not exactly sure how can I pass that attribute to dynamically Nextjs scripts. Also, if there is a fix that can be made from a CookieBot, happy to learn about that as well.
Also, I am not sure about the consequences of changing data-blockingmode="auto" to manual.
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
class appDoc extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
<script
id='Cookiebot'
src='https://consent.cookiebot.com/uc.js'
data-cbid='id'
data-blockingmode='auto'
type='text/javascript'
></script>
<script
data-cookieconsent='ignore'
dangerouslySetInnerHTML={{
__html: `window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments)
}
gtag("consent", "default", {
ad_storage: "denied",
analytics_storage: "denied",
wait_for_update: 500,
});
gtag("set", "ads_data_redaction", true);`
}}
></script>
<script
data-cookieconsent='ignore'
dangerouslySetInnerHTML={{
__html: `(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-XXXXX');`
}}
></script>
<meta name='google-site-verification' content='XXXXXX' />
</Head>
<body>
<Main />
<NextScript />
{/* !-- Google Tag Manager (noscript) --> */}
<noscript>
<iframe
src='https://www.googletagmanager.com/ns.html?id=GTM-xxxxxx'
height='0'
width='0'
style={{ display: 'none', visibility: 'hidden' }}
></iframe>
</noscript>
{/* <!-- End Google Tag Manager (noscript) --> */}
</body>
</Html>
);
}
}
export default appDoc;
-
Hello,
I'm having the same issue with my NextJS website, and it's driving me nuts. I'm not sure either about how turning it manual would affect the efficiency of Cookiebot, so I haven't tried that.
Did you manage to figure out a way around it, Danyal?
Any news, Cookiebot team?
Thank you :)
0 -
Hi Ahlem
yes reply from cookiebot
Filipe Lourenco (Cookiebot Support)
Mar 24, 2021, 9:45 GMT+1
Dear Danyal,
Thank you for your message.
What you mention in the ticket seems that the issue is when you enable the automatic blocking, the reason for this happening is that when a script sets a cookie besides its intended purpose, the entire script will be blocked until consent is given. The same is true for external js-files. If the file contains code that sets cookies, the entire file will be prevented from loading. As a result, certain features might stop working.
However, there are 4 things you can do to prevent the Cookie blocker from blocking scripts:
- Mark up a script that mustn't be blocked as "ignore". To do this, simply add the following attribute:
data-cookieconsent="ignore" - Go to the manager and categorize the cookie that goes with the now blocked script as "necessary".
- Revert to the "manual" Cookiebot script where you have to mark up tags to enable prior consent, which we will continue to support.
Be aware though that by preventing scripts from being blocked that set cookies, you will likely be setting a cookie without the users consent! Also if you've not experienced issue before implementing the new Cookiebot script, you like hadn't marked scripts up for prior consent.--------------------------------------------Beside that if the mode change to manual , we need to manually set third-party scripts which firing with gtags as one of this groups: cookie_consent_preferences, cookie_consent_statistics, cookie_consent_marketing,
for more information refer to below doc
hope that helps
0 - Mark up a script that mustn't be blocked as "ignore". To do this, simply add the following attribute:
-
Hi, we've been having the same problem here, but with our sliders: Cookibot seems to block them, only on firefox, until cookies are accepted, then if the page gets refreshed they work.
The console error we get is 'Jquery is not defined', therefore cookiebot is preventing the Jquery to load.It is not a issue of the implementation, as we are using the plugin. We have also tried to put the data-cookieconsent="ignore" tag on the Jquery script, but nothing seems to work.
Any idea how to solve this problem? Seems to work fine on Chrome.0
Please sign in to leave a comment.
Comments
3 comments