如何在Gatsby.js中正确部署Google Consent Mode相关代码

所有Consent Mode相关配置的核心要求是：默认同意状态的声明脚本必须在所有统计、广告、Cookie弹窗SDK之前加载，且必须直接写入静态HTML的<head>节点，不能等客户端JS渲染后再注入，否则会出现统计脚本先执行、默认授权状态不符合合规要求的问题。

方案1：无额外依赖，Gatsby原生API实现（推荐） #

不需要安装第三方库，直接用Gatsby内置的SSR API注入脚本，加载顺序完全可控，兼容所有Gatsby v4/v5版本，不会出现依赖冲突。
操作步骤：

• 在项目根目录找到gatsby-ssr.js文件，不存在则直接新建
• 在文件中通过onRenderBody钩子，按顺序把三段脚本注入到页面头部，代码如下：

// gatsby-ssr.js
import React from "react";

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    // 第一优先级：Consent Mode 默认状态配置
    <script
      key="consent-default-config"
      dangerouslySetInnerHTML={{
        __html: `
          window.dataLayer = window.dataLayer || [];
          function gtag() {
            dataLayer.push(arguments);
          }
          gtag('consent', 'default', {
            ad_storage: 'denied',
            analytics_storage: 'denied',
            wait_for_update: 1500,
          });
          gtag('set', 'ads_data_redaction', true);
        `,
      }}
    />,
    // 第二优先级：Cookie合规弹窗SDK
    <script
      key="cookie-consent-sdk"
      id="CookieConsent"
      src="https://policy.app.cookieinformation.com/uc.js"
      data-culture="EN"
      type="text/javascript"
    />,
    // 第三优先级：Google gtag 统计脚本
    <script
      key="gtag-src"
      async
      src="https://www.googletagmanager.com/gtag/js?id=替换为你的GA跟踪ID"
    />,
    <script
      key="gtag-init"
      dangerouslySetInnerHTML={{
        __html: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '替换为你的GA跟踪ID');
        `,
      }}
    />,
  ]);
};

注意：不要用gatsby-browser.js、react-helmet或者Gatsby Head API插入这段脚本，这几种方式的脚本注入时机都晚于静态HTML渲染，会导致配置失效。gatsby-ssr.js注入的内容会在构建阶段直接写入生成的静态HTML文件，加载顺序完全符合要求。

方案2：借助官方插件简化配置 #

如果不想手写gtag初始化逻辑，可以用Gatsby官方维护的gtag插件配合自定义注入实现：

• 安装插件依赖：执行命令npm install gatsby-plugin-google-gtag
• 在项目根目录的gatsby-config.js中添加插件配置：

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: ["替换为你的GA跟踪ID"],
        pluginConfig: {
          head: true, // 强制脚本在head节点加载
          respectDNT: false, // 启用Consent Mode时需关闭该选项，避免统计被直接拦截
        },
      },
    },
  ],
}

• 最后在gatsby-ssr.js中只需要注入Consent默认配置和Cookie弹窗SDK即可，注意要给这两个脚本设置比插件脚本更靠前的注入优先级，保证默认拒绝规则在gtag加载前生效。

配置有效性验证 #

部署上线前可以本地执行gatsby build && gatsby serve验证：

• 打开浏览器开发者工具，切换到Network面板，确认脚本加载顺序为：Consent内联配置 → uc.js弹窗SDK → gtag.js
• 清空站点缓存后首次访问，在未点击Cookie同意按钮前，检查Application面板的Cookie列表，确认没有_ga等广告、分析类Cookie写入，即配置符合合规要求。

内容的提问来源于stack exchange，提问作者Jaacoubi