Installing the Hotjar Tracking Code on your site allows Hotjar to collect behavioral data about how users interact with your site through analytics tools and triggering feedback widgets.
The Hotjar script offers a range of JavaScript functions that allow you to target specific data to be collected.
Using the hj() Object
By placing the Hotjar tracking code on your site, the hj object becomes globally accessible by scripts on your pages. This allows you to pass in the name of the function or API to Hotjar that you want to access as the first argument to a call to hj().
For example, triggering analytics reports or feedback tools is done through calling hj('trigger', ['trigger-name']).
The hj() object gives you access to the Identify API, as well as a series of other functions that pass data to Hotjar, offer more fine-grained control over how tools are targeted or track data. The functions are:
'stateChange'
stateChange is used exclusively when your site has been developed as a single page web app (SPA) where page changes are not reflected in the URL toolbar. A manual set up of what Hotjar reads as a page change is needed.
hj('stateChange', relativePath);The relative path should take a form such as 'some/relative/path'. For example, 'product/red-trainer'.
For a thorough walkthrough of this setup, read the detailed guide to URL change settings.
'tagRecording' (only available on Plus and Business plans)
With Recordings, it may be useful to automatically tag sessions with information. For example, you might want to tag a Recording every time someone clicked on a call to action (CTA) button.
Once a tag is passed to Hotjar, the current user’s session will be tagged with a Recording, allowing you to Filter and Segment Recordings by tags present (or not) in the Recording.
hj('tagRecording', arrayOfStrings);Example:
Often, it’s useful to tag users who’ve clicked on a CTA button. Perhaps you’re interested in diagnosing why people are not clicking on it. By passing the following tag, you can filter your recordings by those who have not clicked on your call to action:
document.querySelector('#my-button')
.addEventListener('click', () => hj('tagRecording', ['clicked_cta']));'trigger' (available on Plus and Business Plans)
Triggers tell Hotjar to activate a specific tool when it is activated. The following tools can be triggered:
hj('trigger', 'name_of_trigger');Example:
Let’s say you only wanted to start Recording someone who has clicked on your CTA button. The code added to your site would be:
document.querySelector('#my-button')
.addEventListener('click', () => hj('trigger', 'clicked_cta'));