Hotjar

Hotjar is a product experience insights tool that provides behavioral analytics and feedback data with users.

Setup

Hotjar plugin setup

A variant of an Amplitude Destination Plugin is required to forward events to Hotjar. Below is a template of a Destination Plugin tailored for Hotjar. It creates an instance of the
Hotjar browser tracking code and forwards tracked events from Amplitude's SDK. This template is customizable for any needs.

 1import { BrowserConfig, DestinationPlugin, Event, PluginType, Result } from '@amplitude/analytics-types';
 2import { default as hj } from '@hotjar/browser';
 3export class HotjarPlugin implements DestinationPlugin {
 4  name = 'hotjar';
 5  type = PluginType.DESTINATION as const;
 6  siteId: number;
 7  hotjarVersion: number;
 8 
 9  constructor(siteId: number, hotjarVersion: number) {
10    this.siteId = siteId;
11    this.hotjarVersion = hotjarVersion;
12  }
13 
14  async setup(): Promise<void> {
15    hj.init(this.siteId, this.hotjarVersion);
16  }
17 
18  async execute(event: Event): Promise<Result> {
19    if (event.event_type === '$identify') {
20      const { user_id, device_id, user_properties } = event;
21      const hotjarId = user_id || device_id || '';
22      hj.identify(hotjarId, user_properties || {});
23    } else {
24      hj.event(event.event_type);
25    }
26    return {
27      code: 0,
28      event: event,
29      message: 'Event forwarded to Hotjar API',
30    };
31  }
32}

Amplitude plugin usage

Inside the app's code, the plugin may then be imported and added to the Amplitude SDK instance.

1import * as amplitude from '@amplitude/analytics-browser';
2import { HotjarPlugin } from './HotjarPlugin';
3 
4amplitude.init(AMPLITUDE_API_KEY);
5amplitude.add(new HotjarPlugin(HOTJAR_SIDE_ID, HOTJAR_VERSION));
6 
7amplitude.logEvent('open app');