Hotjar Settings for URL Changes

Depending on how your site functions, your Hotjar settings may need to be adjusted. To see which settings work best for your site, find which statement fits your site the best: 

• If the URL path consistently changes when the UI or state changes, you should be good to go with our default settings.
• If the URL has fragments or queries appended to it as the state changes, you can use our Single Page Application settings (or Tracking changes automatically, including fragments) to track these types of URL changes to allow us to pick up the associated state changes.
• If the URL does not change, but the state of the site does, you can manually track the state changes with the Tracking changes manually setting.

Track changes automatically, excluding fragments

This is the default setting. Hotjar will automatically track all URL path changes, meaning changes to the 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.

Manually Issuing a State Change

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

The code will need to be added to any page that is considered a new page. The second argument can be a relative or full URL.

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

Back to top