This feature is only available on the Plus and Business plan.
JavaScript will need to be added to your site's source code or through Google Tag manager by your web development team.
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, Incoming Feedback or Recruiter, 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)};