Single Page Applications (SPAs) allow your visitors to browse 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.
Hotjar cannot track Forms within SPAs
SPA support is not available for Forms analysis within Hotjar. Keep an eye on our Product Roadmap to see the upcoming features that we are working on.
Click on Settings, then Sites & Organizations from the Hotjar Dashboard.
Click the settings cog to open the Site Settings for the Site you would like to change.
Under URL CHANGES, you can select the tracking option that works best for your site.
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.
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.
Examples of page changes that will be automatically tracked with this setting
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 the 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());
});
...
}
]);