javascript - React-gtm-module 未发布事件参数

Question

我正在使用 Google 跟踪代码管理器 来处理 Facebook Pixel。

该像素应该通过具有自定义参数的自定义事件触发:{ make, model } 和自定义条件:{ make equals 福特，模型等于焦点}。

我有两个基本实现(每个都在自己的项目中)。

在项目 1 中，我使用 JS Vanilla 代码并按照他们的建议集成 GTM 代码(更新 head/body)。

然后，当我打电话时:

dataLayer.push({
  event: 'PageViewEvent',
  make: 'ford',
  model: 'focus',
});

当条件匹配时，触发器会正确激活 → 成功。

在项目 2 上我正在使用 NPM 包:react-gtm-module。

为了使用它，我首先用以下方法初始化它:

import TagManager from "react-gtm-module";

// ...

const tagManagerArgs = {
  'gtmId': gtmId,
  dataLayer: {
    'js': new Date(),
    'event': 'Initialize'
  },
  dataLayerName: 'MyCarDataLayer'
}

TagManager.initialize(tagManagerArgs);

然后我尝试使用以下命令激活触发器:

import TagManager from "react-gtm-module";

// ...

const tagManagerArgs = {
  'gtmId': gtmId ,
  dataLayer: {
      'js': new Date(), // current date time,
      event: 'PageViewEvent',
      make: 'ford',
      model: 'focus',
  },
  dataLayerName: 'MyCarDataLayer' // must match the name specified in the TagManager.initialize() call
}

TagManager.dataLayer(tagManagerArgs);

但这一次触发器没有被激活。

当我检查应激活的触发器的状态时，我得到以下信息:

我可以看到，甚至事件名称也不匹配。它获取当前路线作为事件名称，但我指定为事件:PageViewEvent。

在这两个示例中，我使用了相同的参数。然后，我认为我没有正确使用 NPM 包:react-gtm-module。

你能帮我解决这个问题吗？

提前致谢!

Answer 1

试试这个

import TagManager from "react-gtm-module";

// ...
TagManager.initialize({'gtmId': gtmId})

const tagManagerArgs = {
  dataLayer: {
      'js': new Date(), // current date time,
      event: 'PageViewEvent',
      make: 'ford',
      model: 'focus',
  }
}

TagManager.dataLayer(tagManagerArgs);

这个答案引用自github问题https://github.com/alinemorelli/react-gtm/issues/28

滚动到按钮，认为他们做了一些更新，所以顶部的答案不再起作用