@hotjar/browser

@hotjar/browser

Bring Hotjar directly to your application

Installation

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';

Initialize Hotjar

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);

// Initializing with `debug` option:
Hotjar.init(siteId, hotjarVersion, {
  debug: true
});

Identify API

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,
});

Events API

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);

Manual URL changes

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);

CSP

If the project uses CSP, you can add a special string to your server response headers so that the HotJar script loads without problems

// Initializing with `nonce` option:
Hotjar.init(siteId, hotjarVersion, {
  nonce: 'rAnDoM'
});

Content-Security-Policy: 
  script-src *.hotjar.com 'nonce-rAnDoM'; 
  frame-src *.hotjar.com;

Example

You can find a working example on GitHub Pages.