Packagev0.1.2MITnpm ↗

amplitude-
auto-tracker_

버튼·링크 텍스트만으로 Amplitude 이벤트를 자동 추적합니다. 이벤트 이름은 빌드 시 생성, 위치는 DOM에서 자동 유추.

$npm install amplitude-auto-tracker
quick-start.ts

import { initAmplitude } from 'amplitude-auto-tracker'

import eventNames from './lib/event-names.json'

initAmplitude({ eventNames })

// Done. Every button & link click is now tracked automatically.

어떻게 동작하나요?

버튼·링크 텍스트만 있으면 이벤트 이름, 위치, 섹션을 DOM에서 자동으로 유추해 Amplitude에 전송합니다.

코드 한 줄 없이 자동 추적

<button>로그인</button> 만 있으면 클릭 이벤트가 자동으로 login_clicked 으로 전송됩니다.

동적 버튼 텍스트 (토글)

{isLoggedIn ? "로그아웃" : "로그인"} 처럼 라벨이 바뀌는 버튼도 클릭 순간의 보이는 텍스트로 login_clicked/ logout_clicked 를 구분해 전송합니다.

중복 버튼 자동 위치 구분

같은 텍스트 버튼이 여러 섹션에 있어도 DOM 구조에서 위치를 자동 유추해 서로 다른 location으로 전송합니다.

#herolocation: "hero"
#pricinglocation: "pricing"
#ctalocation: "cta"

빌드 타임 이벤트 이름 생성

OpenAI가 빌드 시 1회만 호출되어 한국어 텍스트를 영문 이벤트 이름으로 변환합니다. event-names.json 으로 git 관리됩니다.

💡

데모 안내: 이 페이지의 "로그인" / "로그아웃" 토글 버튼과 "회원가입" 버튼은 demo-a · demo-b 두 섹션에 있습니다. 로그인 버튼을 클릭하면 라벨이 로그아웃으로 바뀌며, 그때 다시 클릭하면 logout_clicked로 전송됩니다. 각 섹션별로 location 값이 다르게 찍히는 것도 우측 패널에서 확인하세요.

Interactive

라이브 데모

section id="demo-a"

클릭 → location: "demo-a"

문서 보기

section id="demo-b"

클릭 → location: "demo-b"

문서 보기
버튼을 클릭하면 Amplitude 이벤트가 표시됩니다