时间戳

首页 > 解决方案 > 如何在 gatsby-plugin-google-tagmanager 插件中传递多个 GTM 标签？

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

问题描述

我正在使用一个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,
    },
},

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

标签： javascriptnode.jsreactjsgatsbygatsby-plugin

解决方案

您最好的机会是使用环境变量为每个文件使用不同的标识符。

如果每个项目触发不同的环境变量，您将能够在每个构建中使用不同的 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.site1and来定义每个 GTM 标识符：.env.site2

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 命令触发的，因此每个文件都将具有每个不可知的配置。

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

推荐阅读