Browser JavaScript

import SdkAvailability from ‘../../../../components/SdkAvailability.astro’;

역할

Browser SDK는 페이지·DOM·사용자 행동처럼 브라우저가 직접 관찰할 수 있는 사실을 수집합니다. 모델, token, 비용, retry는 Gateway가 기록합니다.

초기화

공개 배포 후 Browser 앱의 루트에서 한 번 초기화합니다.

import { defineEvents, initAbto } from '@abto-app/sdk';

const events = defineEvents({
  checkout_completed: {
    properties: {
      order_id: { type: 'string', required: true },
      amount: { type: 'number', required: true },
    },
  },
});

export const abto = initAbto({
  projectKey: 'pk_abto_...',
  apiHost: 'https://api.abto.app',
  environment: 'production',
  events,
});

abto.events.ts는 제품 Custom Event의 정본입니다. 코드 리뷰와 배포가 함께 변경되므로 Dashboard에서 별도 등록하는 방식보다 계약을 추적하기 쉽습니다.

사용자 식별

로그인에 성공한 직후 식별합니다.

abto.identify('user-123');

로그아웃 시에는 abto.reset()을 호출합니다. Browser SDK는 device, anonymous user, session, window, pageview ID를 별도로 관리합니다.

Custom Event

abto.capture('checkout_completed', {
  order_id: 'order-123',
  amount: 49_000,
});

order_id는 ABTO 필수 필드가 아니라 주문 도메인을 설명하는 고객 속성입니다. 위 선언에서는 required이지만, 제품에 따라 optional로 선언하거나 다른 속성을 사용할 수 있습니다. event uuid는 호출자가 넣지 않아도 SDK가 자동 생성합니다.

자동 수집과 개인정보

시스템 이벤트는 $pageview, $pageleave, $autocapture, $rageclick, $dead_click과 AI UI 이벤트를 포함합니다. $로 시작하는 event/property는 ABTO가 소유하므로 Custom Event로 사용하지 않습니다.

prompt, response, DOM text와 input value는 metadata·mask 중심의 안전한 기본값으로 다룹니다. data-abto-no-capture, data-abto-sensitive, data-abto-include로 화면 단위 정책을 선언합니다.

다음: 이벤트 설계