reactjs – Integrating a React SPA with hotjar heatmap tracking

reactjs – Integrating a React SPA with hotjar heatmap tracking

You can use react hotjar
https://www.npmjs.com/package/react-hotjar

You can inject the hotjar where ever you want within the component

Make sure to use it after the component is mounted

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

If you are using hooks you can do in useEffect with out any dependency array

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

Make sure to load hotjar after all async stuffs are done , so it will record all activities you want

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

By default Hotjar works on SPA. And by default they track the changes in url if its url changes, not hashchange.

If you want Hotjar to track hashchanges then you need to configure that in the settings.

Within Sites & Organizations, you can reach your Site Settings. Here, you can specify how Hotjar should track URL changes if the default settings dont work. Below is an explanation of all the options.

Hotjar

reactjs – Integrating a React SPA with hotjar heatmap tracking

Leave a Reply

Your email address will not be published.