이벤트 전송

핵클 SDK는 사용자 이벤트를 핵클로 전송하는 기능을 제공합니다. 사용자 행동의 변화가 일어나는 지점마다 이 기능을 활용하면 사용자 행동에 대한 유의미한 데이터를 얻을 수 있으며, 그렇게 모인 데이터를 통해 사용자 행동 분석을 할 수 있습니다.


track

track() 메소드에 이벤트 키를 전달하여 사용자 이벤트를 전송할 수 있습니다.

파라미터

타입

필수

제약사항

이벤트 명(key)

string

필수

  • 글자수 제한은 128자입니다. (128 characters)

예시

사용자가 구매하기 버튼을 눌렀을 때 이벤트를 수집하기 위해 purchase 라는 이벤트 키를 정의했다고 가정합니다.

import { useTrack } from '@hackle/react-sdk';

function PurchaseButton() {
  const track = useTrack();

  const handleClick = () => {
    track({ key: "purchase" });
  };

  return <button onClick={handleClick}>구매하기</button>;
}

속성(Property)

핵클 SDK는 이벤트(Event) 객체에 속성을 추가할 수 있도록 지원합니다.

  • 속성은 속성명(key)과 속성값(value)을 한 쌍으로 보내야 합니다.
  • 이벤트 객체에 추가 가능한 속성 개수는 최대 64개입니다.

구분

타입

제약사항

속성 명(key)

string

  • 글자수 제한은 128자입니다. (128 characters)
  • 대소문자를 구분하지 않습니다. 예를 들어 amount와 AMOUNT는 같은 키로 인식합니다.

속성 값(value)

boolean, string, number, array

  • string 타입인 경우 글자수 제한은 1024자입니다. (1024 characters)
  • number 타입인 경우 정수 최대 15자리, 소수점 최대 6자리를 지원합니다.

예시

아래 예시에서는 세 가지 속성(pay_method, discount_amount, is_discount)을 추가한 것을 확인할 수 있습니다.

import { useTrack } from '@hackle/react-sdk';

function PurchaseButton() {
  const track = useTrack();

  const handleClick = () => {
    track({ 
      key: "purchase",
      properties: {
        pay_method: "CARD",
        discount_amount: 800,
        is_discount: true
      }
    });
  };

  return <button onClick={handleClick}>구매하기</button>;
}