@hotjar/browser

What is @hotjar/browser?

@hotjar/browser is an npm package that allows developers to integrate Hotjar's analytics and feedback tools into their web applications. It provides functionalities for tracking user interactions, collecting feedback, and analyzing user behavior to improve the user experience.

What are @hotjar/browser's main functionalities?

Initialize Hotjar

This feature allows you to initialize Hotjar with your unique Hotjar ID and snippet version. This is the first step to start using Hotjar's functionalities in your application.

const hotjar = require('@hotjar/browser');
hotjar.initialize('YOUR_HOTJAR_ID', 'YOUR_HOTJAR_SNIPPET_VERSION');

Track Page Views

This feature allows you to track page views. It helps in understanding which pages are being visited and how users navigate through your site.

hotjar.trackPageView();

Identify Users

This feature allows you to identify users with a unique ID and additional properties. It helps in tracking user-specific behavior and personalizing the user experience.

hotjar.identify('USER_ID', { userProperty: 'value' });

Trigger Events

This feature allows you to trigger custom events. It helps in tracking specific actions or interactions that are important for your analysis.

hotjar.event('EVENT_NAME');

Feedback Polls

This feature allows you to trigger feedback polls. It helps in collecting user feedback directly from your web application.

hotjar.feedback('FEEDBACK_ID');

Other packages similar to @hotjar/browser

mixpanel-browser

Mixpanel is a powerful analytics tool that helps you track user interactions with web and mobile applications. It provides detailed insights into user behavior, similar to Hotjar, but with a stronger focus on event tracking and user segmentation.

fullstory

FullStory is a digital experience analytics platform that captures and analyzes user interactions on your website. It offers session replay, heatmaps, and advanced analytics, similar to Hotjar, but with a more comprehensive session replay feature.

mouseflow

Mouseflow is a behavior analytics tool that provides session replay, heatmaps, funnels, and form analytics. It is similar to Hotjar but offers more advanced form analytics and funnel tracking features.

README

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

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

Example

You can find a working example on Githup Pages.