이 페이지에서

자동 캡처를 사용하여 신속한 인사이트 확보

Amplitude Academy

자동 캡처 및 시각적 라벨링을 사용하여 웹사이트 클릭 추적

자동 캡처 및 시각적 라벨링을 사용하여 웹사이트 클릭 이벤트를 정의하는 방법을 배우면 Amplitude 구현을 단순화하고 제품 사용 인사이트를 빠르게 나타낼 수 있습니다.

시작하기

자동 캡처는 최소한의 설정만으로 Amplitude 브라우저, iOS 및 Android SDK에서 페이지 뷰, 세션, 클릭 및 양식 상호 작용과 같은 일반적인 상호 작용을 자동으로 수집합니다. 이 페이지에서는 각 플랫폼에서 자동 캡처를 활성화하는 방법을 보여줍니다. Autocapture가 수집하는 이벤트 및 속성의 전체 목록은 Autocapture 참조를 참조하십시오.

웹용 자동 캡처

버전 2.10.0부터 Amplitude Browser SDK에는 사이트의 이벤트, 상호 작용 및 어트리뷰션을 캡처할 수 있도록 도와주는 자동 캡처가 포함되어 있습니다.

브라우저 SDK 설치

Data region
HTML
<script src="https://cdn.amplitude.com/script/AMPLITUDE_API_KEY.js"></script>
<script>
window.amplitude.add(window.sessionReplay.plugin({sampleRate: 1}));
window.amplitude.init('AMPLITUDE_API_KEY', {"fetchRemoteConfig":true,"autocapture":{"attribution":true,"fileDownloads":true,"formInteractions":true,"pageViews":true,"sessions":true,"elementInteractions":true,"networkTracking":true,"webVitals":true,"frustrationInteractions":true}});
</script>

SDK 초기화

브라우저 SDK 2.10.0 이상에는 요소 클릭 및 변경 추적이 포함되어 있어 Amplitude 첫 사용 후 시각적 라벨링을 가능하게 합니다. 이를 활성화하려면 SDK를 초기화할 때 config.autocapture.elementInteractions을(를) true로 설정하십시오.

추가 초기화가 필요 없습니다.

콘텐츠 보안 정책(CSP)

웹 앱이 엄격한 콘텐츠 보안 정책(CSP)을 구성한 경우 정책을 조정하여 Amplitude 도메인을 허용하세요.

  • https://*.amplitude.com을 script-src에 추가하십시오.
  • https://*.amplitude.com을 connect-src에 추가하십시오.

이벤트

이벤트설명속성
페이지 조회됨사용자가 사이트에서 페이지를 로드할 때 캡처됩니다.페이지 카운터, 페이지 도메인, 페이지 위치, 페이지 경로, 페이지 제목, 페이지 URL, 세션 리플레이 ID(활성화된 경우), 참조자, 기여, 사용자 속성.
세션 시작사용자가 사이트에서 세션을 시작할 때 캡처됩니다.세션 리플레이 ID(활성화된 경우), 사용자 속성.
세션 종료사용자가 사이트에서 세션을 종료할 때 캡처됩니다.사용자 속성
양식 시작됨사용자가 사이트의 양식과 상호 작용할 때 캡처합니다.양식 목적지, 세션 리플레이 ID(활성화된 경우), 사용자 속성.
양식 제출됨사용자가 사이트에서 양식을 제출할 때 캡처됩니다.양식 목적지, 세션 리플레이 ID(활성화된 경우), 사용자 속성.
파일 다운로드사용자가 사이트에서 파일을 다운로드할 때 캡처됩니다.파일 확장자, 파일 이름, 링크 텍스트, 링크 URL, 세션 리플레이 ID(활성화된 경우),
클릭된 요소사용자가 페이지에서 요소를 클릭할 때 캡처됩니다.요소 Aria 레이블, 요소 클래스, 요소 계층구조, 요소 Href, 요소 ID, 요소 상위 레이블, 요소 위치 왼쪽, 요소 위치 맨 위, 요소 선택기, 요소 태그, 요소 텍스트, 페이지 제목, 페이지 URL, 세션 리플레이 ID, 뷰포트 높이, 뷰포트 너비.
요소 변경됨드롭다운 변경 또는 텍스트 상자에 텍스트 입력과 같은 양식 요소 상호 작용을 캡처합니다.요소 클래스, 요소 계층구조, 요소 ID, 요소 부모 레이블, 요소 위치 왼쪽, 요소 위치 맨 위, 요소 태그, 페이지 제목, 페이지 URL, 세션 리플레이 ID, 뷰포트 높이, 뷰포트 너비.
네트워크 요청애플리케이션이 네트워크 요청을 수행할 때 캡처합니다.URL, 요청 방법, 상태 코드, 기간, 요청 본문 크기, 응답 본문 크기, 세션 리플레이 ID(활성화된 경우).
웹 바이탈브라우저 탭이 숨겨진 상태일 때 핵심 웹 바이탈 성능 지표를 캡처합니다.페이지 도메인, 페이지 위치, 페이지 경로, 페이지 제목, 페이지 URL, LCP, FCP, INP, CLS, TTFB 지표와 성능 등급 및 타이밍 데이터가 포함됩니다.

자세한 내용은 브라우저 SDK 2 문서의 자동 캡처를 참조하십시오.

기본 이벤트 접두사

Amplitude는 자동 캡처 이벤트 앞에 Amplitude 로고를 접두사로 붙입니다.

마케팅 어트리뷰션

다음 속성을 캡처합니다.

사용자 속성

Amplitude는 비활성화되어 있지 않은 경우 사용자 속성을 모든 오토캡처 이벤트에 연결합니다.

웹용 시각적 라벨링

Amplitude의 시각적 라벨링 도구를 사용하면 페이지에서 추적할 개별 요소를 식별하고 선택할 수 있습니다. 예를 들어 가입 버튼을 클릭한 사용자 수를 추적하려면 시각적 라벨링을 통해 버튼을 선택합니다. 그런 다음 Amplitude는 해당 특정 요소를 대상으로 하는 이벤트를 생성합니다.

시각적 라벨링을 사용하여 추가한 이벤트는 소급적으로 작동합니다. 왜냐하면 Amplitude는 계측기가 실행 중일 때부터 시작되는 모든 양식 관련 이벤트를 캡처하기 때문입니다.

자세한 내용은 시각적 레이블링을 참조하십시오.

iOS용 자동 캡처

Amplitude의 iOS SDK 최신 버전에는 자동 캡처 기능이 포함되어 있습니다.

SDK 설치

iOS-Swift SDK 문서의 지침에 따라 SDK를 설치합니다.

자동 캡처를 활성화한 상태에서 SDK 초기화

기본적으로 iOS SDK는 세션 추적을 활성화하고 애플리케이션 생애주기 분석, 화면 보기 및 요소 상호 작용 추적을 비활성화합니다. 모든 자동 캡처 기능을 활성화하려면 다음 스니펫을 사용하여 SDK를 초기화하십시오.

let amplitude = Amplitude(configuration: Configuration(
    apiKey: "API_KEY",
    autocapture: [.sessions, .appLifecycles, .screenViews, .networkTracking]
))

이벤트 자동 캡처

이벤트설명속성
세션 시작사용자가 앱에서 세션을 시작할 때 캡처합니다.사용자 속성
세션 종료사용자가 앱에서 세션을 종료할 때 캡처합니다.사용자 속성
애플리케이션 설치됨사용자가 앱을 설치한 후 처음 연 경우를 캡처합니다.
애플리케이션 업데이트됨사용자가 앱을 업데이트한 후 처음 앱을 연 시점을 캡처합니다.
애플리케이션 열림사용자가 앱을 처음 연 이후 앱을 실행하거나 포어그라운드로 전환할 때를 캡처합니다.
애플리케이션이 백그라운드로 전환됨사용자가 애플리케이션을 백그라운드로 전환할 때를 캡처합니다.
화면 조회됨사용자가 앱에서 화면을 볼 때 캡처합니다.화면 이름
상호 작용하는 요소사용자가 앱의 UI 요소와 상호작용할 때를 캡처합니다.요소 속성
네트워크 요청앱이 네트워크 요청을 할 때 캡처합니다.URL, 요청 방법, 상태 코드 등

사용자 속성

Amplitude는 비활성화되어 있지 않은 경우 모든 Autocapture 이벤트에 사용자 속성을 연결합니다.

Android용 자동 캡처

Amplitude의 Android SDK 최신 버전에는 자동 캡처 기능이 포함되어 있습니다.

SDK 설치

Android-Kotlin SDK 문서의 지침에 따라 SDK를 설치합니다.

자동 캡처를 활성화한 상태에서 SDK 초기화

기본적으로 Android-Kotlin SDK는 세션 추적을 활성화하고 애플리케이션 생애주기 분석, 화면 보기, 딥링크 및 요소 상호 작용 추적을 비활성화합니다. 모든 자동 캡처 기능을 활성화하려면 다음 스니펫을 사용하여 SDK를 초기화하십시오.

Amplitude(
	Configuration(
	 apiKey = AMPLITUDE_API_KEY,
		context = applicationContext,
		autocapture = autocaptureOptions {
          +sessions               // or `+Autocapture.SESSIONS` [tl! ~~]
          +appLifecycles          // or `+Autocapture.APP_LIFECYCLES` [tl! ~~]
          +deepLinks              // or `+Autocapture.DEEP_LINKS` [tl! ~~]
          +screenViews            // or `+Autocapture.SCREEN_VIEWS` [tl! ~~]
    	}
	)
)

이벤트 자동 캡처

이벤트설명속성
세션 시작사용자가 앱에서 세션을 시작할 때 캡처합니다.사용자 속성
세션 종료사용자가 앱에서 세션을 종료할 때 캡처합니다.사용자 속성
애플리케이션 설치됨사용자가 설치한 후 처음 앱을 연 경우를 캡처합니다.
애플리케이션 업데이트됨사용자가 앱을 업데이트한 후 처음 앱을 연 경우를 캡처합니다.
앱 열림사용자가 앱을 처음 연 이후 앱을 실행하거나 포어그라운드로 전환할 때를 캡처합니다.
애플리케이션이 백그라운드로 전환됨사용자가 애플리케이션을 백그라운드로 전환할 때를 캡처합니다.
화면 보기사용자가 앱에서 화면을 볼 때 캡처합니다.화면 이름
딥링크 열림사용자가 앱에서 딥 링크를 열 때 캡처합니다.URL 및 리퍼러 정보
상호 작용한 요소사용자가 앱의 UI 요소와 상호작용할 때를 캡처합니다.요소 속성

사용자 속성

Amplitude는 비활성화되어 있지 않은 경우 사용자 속성을 모든 오토캡처 이벤트에 연결합니다.

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