在 React 项目中添加堆分析代码

Question

我正在尝试在我的 React 项目中添加堆分析脚本，但它一直抛出此错误“'heap' 未定义”。由于这个错误，我无法编译项目。

据我所知，heap 希望他们的代码在 <head></head> 标签中运行。但我无法弄清楚如何在 <head></head> 中制作代码运行以做出反应。 GTM 和 FB 像素代码等其他脚本运行没问题。

感谢任何帮助。

Answer 1

您应该能够在 head 标签下包含堆脚本，如下所示（设置正确的脚本路径代替您的 HeapScriptPath）

<script type="text/javascript" src="yourHeapScriptPath.js"></script>

Answer 2

如果您使用的是 webpack，您有两个选择：

A) 将你的脚本放入 index.html 并在你的 React-Scripts 中询问是否定义了变量 B) 将脚本放入您的 webpack 条目中，如下所示：

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

有关详细信息，请参阅 webpack-entries。

Answer 3

取消它：

window.heap.identify('random@myemail.com', 'email');

Answer 4

出于某种原因，这在他们的网站上并不清楚，但如果您查看他们的文档 here，您会发现您只需要调用 window.heap.track() 而不仅仅是 heap.track().

此外，您需要脚本，正如他们在 index.html 文件中提到的那样，该脚本位于 <head> 元素底部，也就是 </head>

之前

Adding Heap Analytics code in React Project