Bring Hotjar directly to your application
Add this package as a dependency in your project, then import the library in your code.
yarn add @hotjar/browser
import Hotjar from '@hotjar/browser';
In order for Hotjar to run, it needs to be initialized with your site ID. You can find your site ID on this page just before your site name.
const siteId = 123;
const hotjarVersion = 6;
Hotjar.init(siteId, hotjarVersion);
One of the main interest of this library is to be able to use Hotjar Identify API.
const userId = 'abc_123';
const firstName = 'John';
const favoriteColor = 'blue';
Hotjar.identify(userId, {
first_name: firstName,
color: favoriteColor,
});
You can also track specific actions taken by your users and send that data to Hotjar via the Hotjar Events API.
const actionName = 'error';
Hotjar.event(actionName);
Depending on how your website routing works, you might need to manually instruct Hotjar when a route change has happened. More details about URL changes.
const newPage = '/new';
Hotjar.stateChange(newPage);
You can find a working example on Githup Pages.