仅在 Next.js 中同意后才允许加载谷歌分析答案

【问题标题】：Allow google analytics to load only after consented in Next.js仅在 Next.js 中同意后才允许加载谷歌分析
【发布时间】：2021-04-22 21:28:53
【问题描述】：

我将谷歌分析集成到 next.js - 也就是说，我遵循了这些指南：

这很好用，现在的问题是我只需要在同意 cookie 后才允许加载谷歌分析，我现在将我的 cookie 同意存储在 localStorage 中，格式如下：

checkboxValues = {
  necessary: true,
  statistics: false,
  marketing: false,
};

现在我需要检查localStorage.getItem('acceptCookies'); 并确保仅在statistics: true 时加载谷歌分析。

import Document, { Html, Head, Main, NextScript } from "next/document";

import { GA_TRACKING_ID } from "../utils/gtag";

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${GA_TRACKING_ID}', {
                page_path: window.location.pathname,
              });
          `
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

我无法在 render() 之前检查 localStorage，因为 localStorage 仅在 componentDidMount 之后可用。卡住了，有什么方向吗？

【问题讨论】：

标签： javascript reactjs google-analytics next.js

【解决方案1】：

有内置的同意功能：https://developers.google.com/gtagjs/devguide/consent

所以你在你的情况下添加

gtag('consent', 'default', {
  'analytics_storage': 'denied'
});

所以它看起来像：

    <script
        dangerouslySetInnerHTML={{
          __html: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
//this defaults to denying
    gtag('consent', 'default', {
      'analytics_storage': 'denied'
    });
          gtag('js', new Date());
//check for consent, you'll need to write your own function here, but you get the idea
if(consentGranted){
    gtag('consent', 'update', {
      'analytics_storage': 'granted'
    });
  }
        gtag('config', '${GA_TRACKING_ID}', {
            page_path: window.location.pathname,
          });

          `
            }}
          />

或者，您可以将“配置”包装到类似的同意行中，但这可能不是一个“完整”的解决方案，因为它只会停止网页浏览：

if(consent){    
gtag('config', '${GA_TRACKING_ID}', {
            page_path: window.location.pathname,
          });
    }

【讨论】：

我认为这不符合 GDPR，欧洲法律甚至不允许加载脚本，即使它不会被跟踪？我会尝试找到我的声明的来源。
以下是 Google 提供的建议：support.google.com/analytics/answer/9019185?hl=en
@roko 我认为你说的没有道理。您可以在语句中添加资源吗？