This feature is only available on the Plus, Business and Scale plans.
To see which plan is right for your site, check out a side-by-side comparison in our Hotjar Plans article.
Starting Recordings with Events are useful for when you want Recordings to start capturing after your user has reached a specific part of the page you are targeting.
This feature is also available for Feedback Tools and Heatmaps.
Open up your Site Settings
For more information, read our guide to configuring Site settings.
Choose the specific page or Event option in Session targeting and tracking.
Add the unique name of the Event you want to use.
You can select the '+' icon if you would like to add another targeting rule. Only alphanumeric characters (a-z, A-Z, 0-9), underscores (_), and dashes (-) can be used in the event name.
Events and other targeting rules
If an event is present on a page, it will take priority over any targeting rules present. Events take precedence over URL targeting rules.
Click Done.
Add the event code to your website.
In the example above, you've created an event called started_checkout. Next, you will need to add the event code to your website:
hj('event', 'started_checkout');
The Event 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 yourSignupFunction() {
... your code here ...
hj('event', 'clicked-survey-signup');
}
//Remember that this function needs to be called for the event to be
executed i.e. yourSignupFunction();
Important
If there is a chance that the event code will be run before the Hotjar script has fired on the page, you must add the following line of code just before the event code:
window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
You can also set up Events through Google Tag Manager.
If you use Google Tag Manager to load the Hotjar script on your site, you can also write the code for the Event as part of a Custom HTML tag in GTM. Check out this guide for more information on how to set up Triggers in GTM.