Hotjar on Single Page Apps

With Single Page Application (SPA) technology, your website visitors have the ability to browse through different pages on your site without having to reload the page completely. In most cases, an SPA website will still change the URL in the browser, even though the page is not being reloaded.

By default, Hotjar is able to detect and track these URL changes automatically.

Within Sites & Organizations, you can reach your Site Settings where you can specify how Hotjar should track URL changes if the default settings don't work.

Options for Tracking URL Changes

Track changes automatically, excluding fragments

Track changes automatically, including fragments

Track changes manually

Track changes automatically, excluding fragments

This is the default setting. Hotjar will automatically track all URL path changes, meaning changes to part of the URL which starts with a # symbol, will be ignored.

This setting will work perfectly for websites which automatically change the URL in your browser window without reloading the page.

Back to Top

Track changes automatically, including fragments

This will allow Hotjar to track all URL changes including fragments. A smaller portion of SPA frameworks only change the fragment of the URL in the browser when switching to a new page.

The fragment is the part of the URL that starts with a #. Switch to this setting if your website uses this method.

Back to Top

Track changes manually

If this option is chosen, Hotjar will only track URL changes if the page is completely reloaded or if you use the JavaScript code below. This option is available in case you need to set up page change tracking manually within your app's router.

To Manually Issue a State Change

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

The second argument can be a relative or full URL.

To Manually Issue State Changes for AngularJS ui-router

angular.module('yourApp', []).run([
    '$rootScope',
   function ($rootScope, ...) {
       ...

   // Sets up the router to report state changes to the Hotjar script. 
       $rootScope.$on('$stateChangeSuccess',function () {
            hj('stateChange', $location.url());
        });
       
        ...
    }
]);

Back to Top