azure-application-insights - 无法获取 `data-*-id` 属性以通过 ClickAnalytics 插件正确记录自定义事件名称

Question

我有一个客户端 React 应用程序，正在 appinsights 中进行检测，并且我正在使用 React 插件和新的 ClickAnalytics插入。一切正常，遥测工作正常，但是我无法使 data-*-id 自定义事件功能正常工作。

文档说:

The id provided in the data-*-id will be used as the customEvent name. For example, if the clicked HTML element has the attribute "data-sample-id"="button1", then "button1" will be the customEvent name.

我按如下方式检测元素(使用 Semantic UI React ):

<Button
  data-custom-id="AddDealButton"
  as={Link}
  color="blue"
  icon
  labelPosition="right"
  size="huge"
>

单击该按钮会导致记录自定义事件，但名称“AddDealButton”不会流过。我总是将 not_specified 作为事件名称:

阅读文档，有关于插件配置的警告:

If useDefaultContentNameOrId is false, then the customEvent name will be "not_specified".

所以我用这种方式初始化插件:

...
extensions: [reactPlugin, clickPlugin],
extensionConfig: {
  [reactPlugin.identifier]: { history: browserHistory },
  [clickPlugin.identifier]: { autoCapture: true, useDefaultContentNameOrId: true }
}

...但是这个名字没有通过。我配置错误吗？知道我做错了什么吗？

Answer 1

事实证明问题出在我上面显示的初始化配置中。应按如下方式设置:

...
extensions: [reactPlugin, clickPlugin],
extensionConfig: {
 [reactPlugin.identifier]: { history: browserHistory },
 [clickPlugin.identifier]: { autoCapture: true, dataTags: { useDefaultContentNameOrId: true } }
}

生成的事件名称不是从我的 data-custom-id 中提取，而是从 Button 组件的 Icon 元素的内容中提取，因此事件名称变为“Create new deal” ，但我能弄清楚。

Microsoft 的文档显示了 npm 安装方法与“snippet”方法的不同示例，因此我错过了 dataTags 示例。