Hotjar

Hotjar는 사용자 행동 분석 및 피드백 데이터를 제공하는 제품 경험 인사이트 도구입니다.

연동 설정

Hotjar 플러그인 설정

이벤트를 Hotjar로 전달하려면 Amplitude 목적지 플러그인의 변형을 사용하십시오. 아래 템플릿은 Hotjar용으로 제작된 목적지 플러그인입니다. 이 플러그인은 Hotjar 브라우저 추적 코드의 인스턴스를 생성하고 Amplitude의 SDK에서 추적된 이벤트를 전달합니다. 필요에 따라 이 템플릿을 사용자 정의하십시오.

import { BrowserConfig, DestinationPlugin, Event, PluginType, Result } from '@amplitude/analytics-types';
import { default as hj } from '@hotjar/browser';
export class HotjarPlugin implements DestinationPlugin {
  name = 'hotjar';
  type = PluginType.DESTINATION as const;
  siteId: number;
  hotjarVersion: number;
  constructor(siteId: number, hotjarVersion: number) {
    this.siteId = siteId;
    this.hotjarVersion = hotjarVersion;
  }
  async setup(): Promise<void> {
    hj.init(this.siteId, this.hotjarVersion);
  }
  async execute(event: Event): Promise<Result> {
    if (event.event_type === '$identify') {
      const { user_id, device_id, user_properties } = event;
      const hotjarId = user_id || device_id || '';
      hj.identify(hotjarId, user_properties || {});
    } else {
      hj.event(event.event_type);
    }
    return {
      code: 0,
      event: event,
      message: 'Event forwarded to Hotjar API',
    };
  }
}

Amplitude 플러그인 사용법

앱 코드에서 플러그인을 가져와서 Amplitude SDK 인스턴스에 추가하십시오.

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

이 내용이 도움이 되었나요?