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 it's 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 don't work. Below is an explanation of all the options.
