Hotjar on Single Page Apps

With SPA technology, your website visitors can 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. 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.

Click the gear icon within your Sites & Organizations page to get to Site Settings.

Track changes automatically, excluding fragments (default)

This is the default setting. Hotjar will automatically track all URL path changes, meaning changes to a fragment, the part of the URL which starts with a # symbol, will be ignored. This setting will work perfectly for websites which do not use SPA technology as well as those that do and automatically change the URL in your browser window without reloading the page.

This setting will not track a change in URL if the fragment is changed.

Track changes automatically, including fragments

Hotjar will automatically 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.

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.

An Example of Manually issuing 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());
        });
       
        ...
    }
]);