Analytics.click

버튼, 링크, 카드 등 사용자가 탭/클릭한 UI 요소의 인터랙션 이벤트를 기록합니다. 어떤 컴포넌트가 어느 페이지에서 클릭되었는지 추적할 때 사용합니다.

시그니처

click은 Analytics 네임스페이스 객체의 멤버로 노출됩니다. 함수 자체를 단독으로 import하지 않습니다.

import { Analytics } from '@apps-in-toss/web-framework';

type Primitive = string | number | boolean | null;

type LoggerParams = {
  log_name?: string;
} & {
  [key: string]: Primitive;
};

declare const Analytics: {
  click: (params?: LoggerParams) => Promise<void> | undefined;
};

파라미터

이름	타입	필수	설명
params	LoggerParams	—	로깅할 키-값 쌍. log_name으로 이벤트를 식별하고, 나머지 키는 자유롭게 추가합니다. 생략 가능합니다.
params.log_name	string	—	이벤트 식별자. 분석 대시보드에서 이벤트를 구분하는 데 사용됩니다.
params[key]	string | number | boolean | null	—	추가 컨텍스트 필드. 원시값(Primitive)만 허용됩니다.

반환값

• Promise<void> | undefined — 로깅이 완료되면 resolve. 환경에 따라 undefined가 반환될 수 있으므로 반환값에 의존하지 마세요.

권한

권한이 필요하지 않습니다 — Analytics.click은 별도의 PermissionName에 바인딩되지 않습니다. 권한이 필요한 다른 네임스페이스의 일반적인 처리 흐름은 Guides — 권한 처리 패턴을 참고하세요.

예제

최소 예제

import { Analytics } from '@apps-in-toss/web-framework';

async function handleButtonClick() {
  await Analytics.click({ log_name: 'cta_button_click', page: 'home' });
}

실전 예제 — 클릭한 컴포넌트와 페이지 함께 기록하기

import { Analytics } from '@apps-in-toss/web-framework';

function ProductCard({ productId, page }: { productId: string; page: string }) {
  const handleClick = async () => {
    await Analytics.click({
      log_name: 'product_card_click',
      component: 'product_card',
      page,
      product_id: productId,
    });

    // 실제 클릭 후 동작 (예: 상세 페이지 이동)
  };

  return (
    <button type="button" onClick={handleClick}>
      상품 보기
    </button>
  );
}

직접 실행해 보기

sdk-example의 Analytics 페이지에서 Analytics.click 카드를 실행해 결과를 확인할 수 있습니다.

→sdk-example에서 실행해 보기

관련 API

• Analytics.impression — UI 컴포넌트가 화면에 노출되는 시점을 기록합니다.
• Analytics.screen — 화면(페이지) 진입 이벤트를 기록합니다.

관련 가이드

• Recipes — 클릭 이벤트 수집 패턴

외부 참조

• @apps-in-toss/web-framework — 상위 SDK 패키지. Analytics는 내부적으로 @apps-in-toss/web-analytics에서 re-export됩니다.