안녕하세요, 새롭게 런칭한 믹스패널 오토캡쳐(Autocapture) 기능을 소개드립니다.
■ 오토캡쳐란?
별도의 개발 작업 없이 웹사이트에서 발생하는 사용자 행동 데이터를 자동으로 수집하는 기능입니다.
사용자 행동을 추적하고 싶었지만 내부 리소스가 부족해 추적하지 못했다면, 오토캡쳐 기능을 활용해보세요.
■ 자동 수집 이벤트
오토캡쳐로 자동 수집되는 이벤트는 아래 5종이며, 필요에 따라 특정 조건(예: 선택자)에 따른 선별 추적도 가능합니다.
- 페이지 조회 Pageviews
- 페이지 스크롤 Page scrolls
- 폼 제출 Form interactions : 회원가입, 로그인 등 양식 제출
- 클릭 Click : 드롭다운, 체크박스, 버튼 링크 등의 요소 인터렉션
- 어트리뷰션 Attribution : UTM, 레퍼러 등
※ 오토캡쳐를 통해 수집된 이벤트들은 이벤트명에 Prefix로 ‘[Auto]’ 가 표기됩니다. 예외적으로 구글 태그매니저(GTM)에서 지원하는 ‘Track Pageview’를 사용시에도 이벤트명에 ‘[Auto]’가 표기되나, 이는 오토캡쳐 기능으로 수집되는 이벤트가 아닙니다.
■ 오토캡쳐 적용 방법 및 보안 정책
- 적용 방법
- 오토캡쳐를 적용하고 싶다면, 자바스크립트 SDK에 {autocapture: true} 옵션을 한 줄 추가하면 됩니다.
- 개인정보 보호
- 오토캡쳐는 비밀번호, 사용자 텍스트/양식 입력과 같은 민감한 요소를 추적하지 않습니다.
- 추적에서 제외하고 싶은 특정 요소를 지정할 수도 있습니다.
■ 오토캡쳐 이벤트를 아래 방법으로 관리하면 분석이 더 쉬워져요!
1. 수집한 이벤트 & 프로퍼티 이름 수정
수집된 이벤트와 프로퍼티의 이름은 UI에서 디스플레이 네임 또는 커스텀 이벤트 기능을 활용해서 수정할 수 있습니다.
디스플레이 네임을 활용해 수정하기
- 리포트 UI에서 Rename(이름 변경) 버튼을 클릭해주세요
- 수정할 이름을 기입해주세요
- 수정된 이름을 확인해주세요. 괄호 안에 원래의 이벤트 명이 함께 표시됩니다.
커스텀 이벤트 생성을 통해 수정하기
- 쿼리빌더에서 Create > Custom Event 버튼을 찾아 클릭해주세요.
- 오토캡쳐를 통해 수집된 이벤트를 선택한 후, 수정하려는 이름을 작성해주세요.
2. 커스텀 이벤트를 활용해서 오토캡쳐 이벤트 커스텀하기
커스텀 이벤트를 활용하면, 오토캡쳐를 통해 수집된 이벤트들을 속성에 따라 필터링해서 개별 이벤트처럼 활용할 수 있어요.
예를 들어 웹페이지 전체에서 발생한 페이지뷰 이벤트를 [Auto] Page View 이벤트로 수집하는 경우, 특정 페이지뷰 이벤트를 별도의 이벤트로 분리할 수 있습니다.
아래 이미지처럼 메인 페이지의 url path(/main_page)로 필터링하여 ‘메인 페이지 뷰’ 이벤트를 생성할 수 있어요.
■ 오토캡쳐 적용 시, 주의할 점
1. 데이터 볼륨 관리
오토캡쳐는 많은 양의 사용자 상호작용 데이터를 자동으로 수집하는 과정에서 과도하게 이벤트를 수집할 수 있습니다. 아래 ‘수정할 수 있는 수집 옵션 자세히 알아보기’를 확인하셔서 필요에 따라 수집하는 데이터 범위를 조정해주세요.
2. 민감한 데이터 제외
기본적으로 오토캡쳐는 비밀번호나 양식 필드와 같은 민감한 입력 필드를 수집하지 않습니다. 그러나 웹사이트의 특정 요소나 페이지를 추적에서 제외하고 싶다면 .mp-no-track 클래스를 사용하거나 SDK 구성에서 block_selectors 및 block_url_regexes 옵션을 사용할 수 있습니다.
3. 오토캡쳐 수집 조건 및 속성 커스텀 구현 불가
오토캡쳐 기능을 활용하면 사전에 정의된 데이터 중 취사선택은 가능하나, 수집 조건이나 이벤트 속성 값 등을 커스텀할 수 없습니다.
분석 중요도가 낮고 수집 우선 순위가 낮은 General 이벤트(Pageviews, Page scrolls 등)는 오토캡쳐를 활용하고, 그 외 정밀한 설계가 필요한 경우 직접 구현하시는 것을 추천드립니다.
■ 오토캡쳐 SDK 설정 팁 (Javascript SDK)
Javascript SDK를 수정해서 데이터 수집 범위를 조정할 수 있습니다. 더 자세한 방법은 관련 공식 문서를 참조해주세요:)
1. Autocapture 이벤트 설정 변경
- 기본적으로
click,input,scroll,submit이벤트가 활성화되어 있지만, 필요에 따라 설정을 변경할 수 있습니다. - 예를 들어, 클릭 이벤트를 비활성화하거나,
capture_text_content를true로 설정해 텍스트 내용을 수집할 수도 있습니다.
2. 추가 속성(Attributes) 수집
capture_extra_attrs를 사용하면 기본 속성 외에도 추가 속성을 수집할 수 있습니다.
3. 페이지/요소 별로 Autocapture 제한 및 허용
- 특정 페이지에서 Autocapture를 비활성화(
block_url_regexes), 또는 특정 페이지에서만 활성화(allow_url_regexes)할 수 있습니다. - 특정 CSS 클래스가 적용된 요소를 제외(
block_selectors), 또는 특정 클래스만 포함(allow_selectors)할 수 있습니다.
4. 사용자 정의 함수로 요소 필터링
allow_element_callback과block_element_callback을 활용하면 특정 조건을 만족하는 요소만 추적하거나 차단할 수 있습니다.
5. 스크롤 이벤트 관련 설정
- 기본적으로
[25, 50, 75, 100]비율에서만 스크롤 이벤트를 트래킹하지만,scroll_capture_all: true를 설정하면 모든 스크롤 이벤트 캡쳐가 가능합니다.
이렇게 다양한 옵션을 조합해 Autocapture 동작을 원하는 대로 조정할 수 있어요. 😊
더 자세한 내용은 아래 공식 문서를 참조해주세요:)
관련 공식 문서
.svg)
