Reactjs 将React SPA与hotjar热图跟踪集成

我正在尝试集成Hotjar库，以便为React SPA中的用户跟踪热图

我已经按照一般教程，但我一直无法得到这项工作

我在文档的元素中有标准的Hotjar跟踪代码

我正在使用一个高阶组件连接到React路由器，并尝试调用window.hj（'stateChange'，page）和window.hj（'vpv'，page），但这些都没有记录在Hotjar热图中

以下是HOC的代码：

import React, { Component } from 'react';
import GoogleAnalytics from 'react-ga';

GoogleAnalytics.initialize(process.env.REACT_APP_GA_TRACKING_ID);

const withPageViewTracker = (WrappedComponent, options = {}) => {
  const trackPage = page => {
    console.log('window.hj', window.hj);
    console.log('page', page);
    // window.hj('stateChange', page);
    window.hj('vpv', page);
  };

  const HOC = class extends Component {
    componentDidMount() {
      const page = this.props.location.pathname;
      trackPage(page);
    }

    componentWillReceiveProps(nextProps) {
      const currentPage = this.props.location.pathname;
      const nextPage = nextProps.location.pathname;

      if (currentPage !== nextPage) {
        trackPage(nextPage);
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };

  return HOC;
};

export default withPageViewTracker;

import React，{Component}来自'React'；
从“react ga”导入GoogleAnalytics；
GoogleAnalytics.initialize（process.env.REACT\u APP\u GA\u TRACKING\u ID）；
常量withPageViewTracker=（WrappedComponent，options={}）=>{
const trackPage=page=>{
log（'window.hj'，window.hj）；
console.log（'page'，page）；
//window.hj（'stateChange'，第页）；
window.hj（'vpv'，第页）；
};
const HOC=类扩展组件{
componentDidMount（）{
const page=this.props.location.pathname；
trackPage（第页）；
}
组件将接收道具（下一步）{
const currentPage=this.props.location.pathname；
const nextPage=nextrops.location.pathname；
如果（当前页！==下一页）{
跟踪页面（下一页）；
}
}
render（）{
返回；
}
};
返回HOC；
};
使用PageViewTracker导出默认值；

以下是我如何使用HOC：

<Route exact path="/" component={withPageViewTracker(Welcome)} />

---

默认情况下，Hotjar在SPA上工作。默认情况下，如果是url更改，而不是hashchange，它们会跟踪url中的更改

如果您想让Hotjar跟踪hashchanges，那么需要在设置中配置它

在站点和组织中，您可以访问站点设置。在这里，您可以指定如果默认设置不起作用，Hotjar应该如何跟踪URL更改。下面是所有选项的说明

---

您可以使用react hotjar

您可以在组件中任何需要的地方注入hotjar

确保在安装部件后使用

componentDidMount() {
    hotjar.initialize('xxxxxxx', x);
  }

如果您使用的是钩子，那么可以在useffect中执行，而不需要任何依赖项数组

const SampleComponent = () => {
  useEffect(() => {
    hotjar.initialize('xxxxxxx', x);
  }, [])

确保在所有异步工作完成后加载hotjar，这样它将记录您想要的所有活动

async componentDidMount() {
        await load1();
        await load2();
        hotjar.initialize('xxxxxxx', x);
}

---

你试过什么？你能分享一些代码吗？我已经编辑了我的帖子，你使用的是哪个版本的React路由器？@davegeo你找到这个了吗？