Hotjar is a product experience insights tool that provides behavioral analytics and feedback data with users.
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}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');Thanks for your feedback!
April 19th, 2024
Need help? Contact Support
Visit Amplitude.com
Have a look at the Amplitude Blog
Learn more at Amplitude Academy
© 2024 Amplitude, Inc. All rights reserved. Amplitude is a registered trademark of Amplitude, Inc.