2

我有一个 NextJS 站点，最近实现了 CookieBot。CookieBot 似乎在接受 cookie 之前阻止了动态生成的 NextJs 脚本。当我添加data-blockingmode=" manual"到 cookiebot 脚本时，它工作正常。我想将该data-cookieconsent='ignore' 属性添加到动态生成的脚本中，这样它就不会阻止它们。

我不确定如何将该属性传递给动态 Nextjs 脚本。此外，如果可以通过 CookieBot 进行修复，也很高兴了解这一点。

另外，我不确定将 data-blockingmode="auto" 更改为手动的后果。

下面是文件 _document.js


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;
4

0 回答 0