title: Integrating a React SPA with hotjar heatmap tracking
body: <p>I am trying to integrate the Hotjar library to track heatmaps for users in our React SPA.</p>
  
  <p>I have followed the general tutorials but I have not been able to get this working.</p>
  
  <p>I have the standard Hotjar tracking code in the  element of the document.</p>
  
  <p>I am using a Higher Order Component to hook into React router and have attempted to call both window.hj('stateChange', page) and window.hj('vpv', page) but none of this has been logged in Hotjar heatmaps.</p>
  
  <p>Here is the code for the HOC:</p>
  
  <pre><code>import React, { Component } from 'react';
  import GoogleAnalytics from 'react-ga';
  
  GoogleAnalytics.initialize(process.env.REACT_APP_GA_TRACKING_ID);
  
  const withPageViewTracker = (WrappedComponent, options = {}) =&gt; {
    const trackPage = page =&gt; {
      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 &lt;WrappedComponent {...this.props} /&gt;;
      }
    };
  
    return HOC;
  };
  
  export default withPageViewTracker;
  </code></pre>
  
  <p>Here is how I use the HOC:</p>
  
  <pre><code>&lt;Route exact path="/" component={withPageViewTracker(Welcome)} /&gt;
  </code></pre>