Hotjar on Single Page Apps

In most cases, Hotjar should automatically work with websites built using single page app technology. Hotjar also has advanced settings which allow you to specify how Hotjar should detect URL changes on your site if the default settings do not work. Please review the options below to determine whether you can use the default setting or whether you may need to switch to an alternative.

Tracking URL changes

With single page app technology, your website visitors may be able 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 that appears in the browser, even though the page itself is not being reloaded. By default, Hotjar is able to detect and track these URL changes automatically. Your Site settings allow you to specify how Hotjar should track URL changes. Below is an explanation of all the options.

These settings are available in "Sites & Organizations" by clicking on the "Site settings" button next to a site's name.

These settings are available in "Sites & Organizations" by clicking on the "Site settings" button next to a site's name.

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 websites which make use of a modern SPA framework which automatically changes the URL which appears in your browser window without actually reloading the page.

Examples of page changes that will be automatically tracked

www.site.com/page/ -> www.site.com/another-page/

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

Examples of page changes that will NOT be automatically tracked

www.site.com/#page -> www.site.com/#anotherpage

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.

Examples of page changes that will be automatically tracked

www.site.com/page/ -> www.site.com/another-page/
www.site.com/#page -> www.site.com/#anotherpage

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, or wish, to set up tracking of page changes 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.

Usage example

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());
        });
        
        ...
    }
]);

Note: SPA support is still not available for forms analysis.

Have any questions? Send us a message on Hotjar's in-app support chat and we will get back to you as soon as possible.

Hotjar on Single Page Apps