如何在 gatsby-plugin-google-tagmanager 插件中传递多个 GTM 标签？

Question

我正在使用 gatsby-plugin-google-tagmanager 插件来分析我的网站，但后来我从相同的代码库创建了另一个网站（根据特定路线区分其品牌），为此，我需要在我的网站中添加另一个 GTM 标签插入。现在我相信我不能在gatsby-config文件中添加任何条件（如果我错了请纠正我），那么如何处理这种情况？是否需要使用 gatsby-SSR 函数手动添加插入脚本，还是有其他方法可以解决？

{
    resolve: "gatsby-plugin-google-tagmanager",
    options: {
        id: config.gtm,
        includeInDevelopment: false,
        defaultDataLayer: { platform: "gatsby" },
        enableWebVitalsTracking: true,
    },
},

我通过process.env根据我的构建环境传递gtm标签

Answer 1

您最好的机会是使用 environment variables 为每个文件使用不同的标识符。

如果每个项目触发不同的环境变量，您将能够在每个构建中使用不同的 GTM 实例。

添加后：

require("dotenv").config({
  path: `.env.${process.env.GATSBY_ACTIVE_ENV}`,
})

您的脚本可能如下所示：

  "scripts": {
    "build-site-1": "GATSBY_ACTIVE_ENV=site1 gatsby build",
    "build-site-2": "GATSBY_ACTIVE_ENV=site2 gatsby build",
  },

然后，由于.env.${process.env.GATSBY_ACTIVE_ENV}，您可以在项目的根目录中定义.env.site1 和.env.site2 来定义每个GTM 标识符：

GTM_ID= 1234

最后，在你的gatsby-config.js：

{
    resolve: "gatsby-plugin-google-tagmanager",
    options: {
        id: process.env.GTM_ID,
        includeInDevelopment: false,
        defaultDataLayer: { platform: "gatsby" },
        enableWebVitalsTracking: true,
    },
},

GTM_ID 将由 build 命令触发，因此每个文件都将具有每个不可知的配置。

调整方法以符合您的规范，但要了解逻辑分离的概念。