This feature is only available on the Plus and Business plan.
To see if one of our paid plans suits your site better, check out everything our Plus and Business plans have to offer in Hotjar Plans.
Starting Recordings with JavaScript triggers are useful for when you want Recordings to start capturing after your visitor has reached a specific part of the page you are targeting.
This feature is also available for Feedback Widgets and Heatmaps.
Using Triggers with Hotjar installed via GTM
If you are using GTM to load Hotjar on your page and you're planning to use Javascript Triggers to start Recordings, you should avoid using the Hotjar Tracking Code tag type to load Hotjar in GTM. Instead, we recommend installing Hotjar through GTM manually as a Custom HTML tag.
Click on Visit a specific page or a JavaScript trigger fires.
Select JavaScript trigger from your page targeting panel.
Triggers and other targeting rules
If a trigger is present on a page, it will cause a widget, a Poll, Survey or Incoming Feedback to show regardless of any other rules present. Triggers take precedence over other targeting rules.
Enter a name you would like to use as your trigger.
You can select the '+' icon if you would like to add another targeting rule. Only alphanumeric characters, dashes and underscores can be used in the trigger name.
Click Done.
Add the trigger code to your website.
In the example above, you've created a trigger called checkout_out. Next, you will need to add the trigger code to your website:
hj('trigger', 'checkout_out');
The trigger needs to be added after the Hotjar Tracking Code
If it is added before, a JavaScript error will occur.
If you wanted the Recording to trigger when the user completed a specific action, you would add this line of code to one of your JavaScript functions:
function newsletterSignup() {
...
hj('trigger', 'signup-poll');
}
Important
If there is a chance that the code will be run before the Hotjar script has loaded, you must add the following line of code just before the trigger function:
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};