Search code examples
javascripthotjar

Integrating HotJar in SPA with same URL

I'm trying to integrate Hotjar with an admin panel.

The way it currently works is some sort of SPA without page loads and neither URL changes. It all happens under /index.php and then when we need to change a page, just send an AJAX request to load it's content.

From checking the documentation, Hotjar seems compatible with SPA's but only when there's a change in the URL (either query string or hash).

Is there a way to trigger in JS a page change to a page name (i.e. Main Page) ? I've tried

hj('vpv', 'Main Page')

But the output seems weird

url: "http://mydomain.comTest Page"

Thanks.

Solution

  • You can track your changes manually by adding additional JavaScript after your AJAX calls.

    Documentation:

    To Manually Issue a State Change

    hj('stateChange', 'some/relative/path');

    Example:

    Imaging that you have a SPA with base URL http://example.com/ and you want to track the main page and a page that gets dynamically loaded with AJAX once you click some button. In order to do that, you would need to:

    1) In your Hotjar account, create two heatmaps. For the main page, you can use the base URL http://example.com/. For the page that is going to be loaded dynamically, you can put a virtual URL, e.g. http://example.com/my-dynamic-page, which will be used only for recording and will not need to exist in your SPA.

    2) In the JavaScript of your application, add the state change code after the AJAX call that will dynamically load the page. You need to use the virtual URL that you defined in the previous step to let Hotjar know that this is a new page and you want to track it separately:

    hj('stateChange', 'http://example.com/my-dynamic-page');