Hotjar Settings for URL Changes

Depending on how your site's URL routing works you may need to choose a different URL change setting in Hotjar. Selecting the wrong setting may affect whether page targeting tools match the correct URL.

• What are the available URL change options?
• How do you change your URL change settings?

What are the available URL change options? 

There are three options available for handling URL changes:

• Track changes automatically, excluding fragments (default)
• Track changes automatically, including fragments
• Track changes manually

Track changes automatically, excluding fragments (default)

With this setting, Hotjar will monitor the URL address bar for changes to the page URL except for fragments or query strings.

For example, if a user went from www.example.com > www.example.com/about  Hotjar would count this as a page change. If the user went from www.example.com to www.example.com#heading1 Hotjar would not track this as a change. 

Track changes automatically, including fragments

Many sites use fragments (represented by a # character) to display page state changes. This is common with Single-Page Applications (SPAs).

For example, let's say you had an app that represented different pages with a fragment. The URL may look something like app.example.com#profile. By default, Hotjar wouldn't recognize moving to #profile as a URL change. In this case, you would want to select Track changes automatically, including fragments.

Both of the following changes would be tracked using this setting:

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

Track changes manually

Some Single-Page Apps do not change the URL address bar at all but still have distinct pages. In this case, you will need to manually instruct Hotjar when a route change has happened using events you pass to Hotjar using JavaScript.

With this option selected, Hotjar will register these JavaScript events as page changes. It will also still continue to track URL changes from page reloads

The code needed to generate a manual page change looks like this:

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

The code will need to be added to any page that is considered a new page in your application's routing code. The second argument can be a relative or full URL.

Manual state changes should be compatible with any front-end JavaScript library. Here is an example of the code in AngularJS (1.X) 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

How do you change your URL tracking settings?

Click on Sites & Organizations within the Settings menu.

Click the settings cog to open the Site Settings for the Site you would like to change.

In Site Settings, open the Session targeting tracking section.

Select from the options available under Tracking URL changes.

By default, Track changes automatically, excluding fragments is selected.

Back to top