将 React SPA 与 hotjar 热图跟踪集成答案

【问题标题】：Integrating a React SPA with hotjar heatmap tracking将 React SPA 与 hotjar 热图跟踪集成
【发布时间】：2017-09-29 07:49:48
【问题描述】：

我正在尝试集成 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;

这是我使用 HOC 的方式：

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

【问题讨论】：

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

标签： reactjs react-router single-page-application heatmap hotjar

【解决方案1】：

你可以使用 react hotjar
https://www.npmjs.com/package/react-hotjar

您可以在组件中的任何位置注入 hotjar

一定要在组件挂载后使用

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

如果你使用钩子，你可以在 useEffect 中做，而不需要任何依赖数组

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

确保在所有异步内容完成后加载hotjar，这样它就会记录你想要的所有活动

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

【讨论】：

【解决方案2】：

默认情况下，Hotjar 适用于 SPA。默认情况下，如果是 url 更改，而不是 hashchange，他们会跟踪 url 中的更改。

如果您希望 Hotjar 跟踪 hashchanges，那么您需要在设置中进行配置。

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

【讨论】：