Интеграция React SPA с отслеживанием тепловых карт Hotjar

Question

Я пытаюсь интегрировать библиотеку 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)} />

Answer 1

Вы можете использовать response 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);
}

Answer 2

По умолчанию Hotjar работает на SPA. И по умолчанию они отслеживают изменения в URL, если это изменения URL, а не hashchange.

Если вы хотите, чтобы Hotjar отслеживал хэш-изменения, вам необходимо настроить это в настройках.

В разделе " Сайты и организации" вы можете открыть настройки своего сайта. Здесь вы можете указать, как Hotjar должен отслеживать изменения URL, если настройки по умолчанию не работают. Ниже приводится объяснение всех вариантов.