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

【问题标题】：Adding Heap Analytics code in React Project在 React 项目中添加堆分析代码
【发布时间】：2018-01-08 11:07:04
【问题描述】：

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

据我所知，heap 希望他们的代码在<head></head> 标签中运行。但我不知道如何让代码在 <head></head> 中运行。其余脚本如 GTM 和 FB 像素代码运行良好。

感谢任何帮助。

【问题讨论】：

【解决方案1】：

直接取消吧：

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

【讨论】：

【解决方案2】：

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

另外，您需要在<head> 元素底部的index.html 文件中提到的脚本，也就是在</head> 之前

【讨论】：

【解决方案3】：

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

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

【讨论】：

但是head标签在哪个文件中？ index.js 或 index.html 还是我必须创建一个新组件，将该脚本插入到 head 标签中。
你有没有根html元素是index.html？如果是这样，您应该能够在 index.html 的 head 中添加脚本标记
是的，此解决方案有效，但如果我尝试将其直接添加到页脚组件中，则它不起作用。无论如何，这个工作有效，我在公共文件夹的 index.html 文件中添加了 taht 脚本作为外部 js 文件。

【解决方案4】：

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

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

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

更多信息请参见webpack-entries。

【讨论】：