시각적 라벨링

비주얼 라벨링은 사용자가 사이트에서 직접 클릭한 요소로부터 추적되는 이벤트를 생성하므로, 기술적이지 않은 Amplitude 사용자는 코드를 작성하거나 페이지 구조를 이해하지 않고도 이벤트를 정의할 수 있습니다. 이를 위해서는 사이트에 자동 캡처가 필요합니다.

Amplitude는 레이블이 지정된 이벤트를 다른 방법으로 생성한 이벤트와 별도로 관리합니다. 레이블이 지정된 이벤트의 데이터에 문제가 있는 경우 엔지니어링 팀을 참여시키지 않고 레이블이 지정된 이벤트 탭 첫 사용 후 조정하십시오.

사전 조건

• Amplitude Browser SDK 2.10.0 이상.
• SDK의 config.autocapture.elementInteractions 옵션은 true로 설정됩니다. 자세한 내용은 브라우저 SDK 구성으로 이동하세요.

시각적 레이블을 사용하여 레이블이 지정된 이벤트 만들기

시각적 레이블을 사용하여 새 레이블이 지정된 이벤트를 생성하려면 다음 단계를 수행하십시오.

1. Amplitude 데이터를 열고 시각적 라벨링을 클릭합니다.
2. 드롭다운 메뉴를 클릭하여 원하는 URL을 선택하거나 새 URL을 추가합니다.
3. 레이블 지정 시작을 클릭합니다. Amplitude는 웹사이트 또는 앱을 새 탭에서 열며, 페이지 상단에 시각적 라벨링 도구 모음이 있습니다.
4. 레이블을 지정할 요소를 클릭합니다. 시각적 레이블 지정 오버레이가 나타납니다.
5. 시각적 레이블 지정 오버레이에 레이블이 지정된 이벤트의 이름, 설명 및 범주를 입력합니다. 사용자가 요소를 클릭할 때 또는 변경될 때 추적을 수행할지 여부를 선택합니다. 시각적 라벨링은 기본적으로 clicked이벤트를 사용합니다. 정의를 구체화하고 필요에 따라 필터를 선택합니다.
6. 저장을 클릭합니다. Amplitude가 동일하거나 유사한 정의를 가진 기존 이벤트를 감지하면 이벤트가 저장되기 전에 경고가 표시됩니다. 자세한 내용은 이벤트 중복 방지를 참조하십시오. Amplitude는 레이블이 지정된 이벤트를 저장하고 레이블이 지정된 이벤트를 볼 수 있는 옵션과 함께 확인 메시지를 표시합니다.
7. 레이블을 지정할 각 이벤트에 대해 이 단계를 반복합니다.
8. 다른 요소를 선택하여 레이블 지정을 계속하거나 작업이 끝난 경우 "Back to Amplitude"를 클릭할 수 있습니다.
9. (선택 사항) 탐색을 클릭하여 사이트의 다른 부분으로 이동하여 다른 페이지의 더 많은 요소에 레이블을 지정합니다.

완료되면 Amplitude로 돌아가서 각 레이블이 지정된 이벤트의 태그, 텍스트, 선택기 및 페이지 URL을 수동으로 업데이트할 수 있습니다.

AI 생성 CSS 선택기

Amplitude는 AI를 사용하여 시각적 라벨링 프로세스 다음 기간동안 웹 페이지의 요소에 대한 정확한 CSS 선택기를 추천합니다. 요소에 레이블을 지정하기 위해 이를 클릭할 때 Amplitude는 의도한 대상을 가장 잘 캡처할 수 있는 선택기를 자동으로 제안합니다.

AI에서 생성된 CSS 선택기는 개별 요소(예: 버튼)와 요소 그룹(예: 목록 또는 제품 타일)에 표시됩니다.

AI는 선택한 요소에 대한 상황별 이해를 사용하여 이름 및 설명 필드를 미리 채웁니다. 이러한 필드에 대한 AI에서 생성한 입력을 전체 시간에 수정할 수 있습니다.

이벤트 중복 방지

레이블이 지정된 이벤트를 저장할 때 Amplitude는 기존 이벤트와의 두 가지 유형의 중복을 확인하고 이벤트를 완료하기 전에 경고를 표시합니다.

• 동일한 정의: 레이블이 지정된 다른 이벤트가 이미 정확히 동일한 페이지 요소와 상호 작용을 캡처합니다. Amplitude가 This labeled event already exists경고를 표면화합니다. 보기 를 클릭하여 기존 이벤트를 열고 새 이벤트를 생성하는 대신 해당 이벤트를 사용할 것인지 여부를 결정합니다.
• 유사한 페이지 요소: 정의가 동일하지 않더라도 레이블이 지정된 다른 이벤트는 유사한 페이지 요소와 일치합니다. Amplitude가 Event has a similar definition경고를 표면화합니다. 보기를 클릭하여 새 이벤트를 기존 이벤트와 비교합니다. Amplitude는 각 이벤트를 정의하는 화면상의 요소를 강조표시하므로 이를 구별할 수 있습니다.

저장하기 전에 이러한 경고를 검토하면 추적 계획 전체에서 중복 적용을 방지하고 이벤트 택소노미를 깨끗하게 유지하는 데 도움이 됩니다. 기존 이벤트가 동일한 상호 작용을 다루는 경우 새 이벤트를 생성하는 대신 해당 이벤트를 사용하십시오.

레이블이 지정된 이벤트 편집

사이트의 코드가 변경되면 그에 맞춰 레이블이 지정된 이벤트의 정의를 업데이트해야 합니다. Autocapture는 원시 클릭 이벤트를 일관되게 캡처하므로 레이블이 지정된 이벤트의 정의를 업데이트하고 데이터의 전체 간격을 수정할 수 있습니다.

레이블이 지정된 이벤트를 편집하려면 다음 단계를 수행하십시오.

1. Amplitude 데이터(Data)를 열고 이벤트를 클릭한 다음 레이블이 지정된 이벤트 탭을 선택합니다.
2. 편집할 레이블이 지정된 이벤트를 선택합니다. 플라이아웃 탭에서 편집을 클릭합니다.
3. 사이트 변경으로 인해 이벤트에서 더 이상 데이터를 수집하지 않는 경우 **작업 선택...**을 클릭하여 하단에 다른 조건을 추가하십시오.
4. 새 사이트 구조에 따라 새 조건을 추가합니다.

레이블이 지정된 이벤트 복구

때때로 사이트의 DOM에 대한 변경 사항이 사이트의 특정 요소에 대한 Visual Labeling의 참조를 끊어버릴 수 있습니다. 요소가 다른 위치로 이동되거나 해당 구조가 변경될 때 레이블이 지정된 이벤트를 복구해야 합니다.

Visual Labeling의 복구 흐름은 원래 정의를 대체하는 대신 보조 정의가 있는 새 OR 문을 추가함으로써 이벤트 기록을 보존합니다. 이벤트가 새 요소를 추적하기 시작하는 동안 모든 기록 데이터는 그대로 유지됩니다.

레이블이 지정된 이벤트를 복구하려면 다음을 수행하십시오.

1. Amplitude Data를 열고 왼쪽 레일에서 이벤트를 클릭한 다음 기본 섹션에서 레이블이 지정된 이벤트 탭을 클릭합니다.
2. 레이블이 지정된 이벤트를 선택합니다. 플라이아웃 탭에서는 다음과 상호 작용할 수 있습니다.
   • 지난 30일 동안 Amplitude가 해당 이벤트를 확인한 횟수를 보여주는 차트입니다.
   • 레이블이 지정된 이벤트에 추가한 각 정의에 대한 차트입니다.
3. 이벤트 볼륨이 없는 이벤트를 복구하려면 복구를 클릭합니다. 그러면 선택한 이벤트의 컨텍스트가 있는 시각적 레이블 지정 흐름이 열립니다.
4. 페이지에서 새 요소를 선택하여 레이블이 지정된 이벤트의 정의를 업데이트합니다. 복구 프로세스는 이를 기존 정의에 추가 OR 조건으로 추가하여 모든 기록 데이터를 유지합니다.
5. 저장을 클릭하여 Visual Labeler를 종료하고 업데이트된 정의를 적용합니다.

잘못 구성된 이벤트 찾기

Amplitude는 레이블이 지정된 이벤트가 정상적으로 작동하지 않는지 여부를 나타내는 정보를 제공합니다.

데이터 > 이벤트로 이동하여 레이블이 지정된 이벤트 탭을 엽니다. 최근도 열은 Amplitude가 각 이벤트를 마지막으로 추적한 시간을 보여줍니다. 최근에 관측되지 않은 이벤트는 이벤트 정의에 문제가 있음을 나타낼 수 있습니다.

레이블이 지정된 이벤트 및 이벤트 볼륨

자동 캡처를 활성화하면 Amplitude는 귀하의 사이트에서 발생한 클릭 및 페이지 변경 이벤트를 추적하기 시작합니다. 이러한 이벤트는 총 이벤트 볼륨에 수행 회수가 포함됩니다. 레이블이 지정된 이벤트는 이러한 이벤트 위의 가상 레이어처럼 작동하며 특정 유형의 클릭을 정의하고 분석에 해당 클릭을 사용할 수 있도록 도와줍니다. 레이블이 지정된 이벤트는 자동 캡처 이외의 이벤트 볼륨에 영향을 미치지 않습니다.

예를 들어 잘 계측된 사이트는 매일 10,000개의 이벤트를 기록할 수 있으며, 자동 캡처는 매일 2,000개의 이벤트를 추가할 수 있습니다. 이 사이트에서는 일일 이벤트가 20% 증가할 수 있습니다. 계측 기능이 적은 사이트는 매일 1,000개의 계측 이벤트만 기록할 수 있습니다. 플러그인이 2,000개의 이벤트를 추가하면 200% 증가로 간주됩니다.

두 경우 모두 일일 이벤트의 증가는 클릭 및 페이지 변경 이벤트를 추적함으로써 발생합니다. 레이블이 지정된 이벤트는 이벤트 수행 회수가 영향을 주지 않습니다.

제한 사항

• 이벤트 스트림: 레이블이 지정된 이벤트는 라이브 이벤트나 사용자 조회 및 세션 리플레이의 이벤트 스트림에서 사용할 수 없습니다. 대신 원시 Element clicked 및 Element changed 이벤트가 표시됩니다.
• Google Chrome 확장 프로그램: Amplitude 이벤트 익스플로러 Chrome 확장 프로그램은 브라우저의 원시 이벤트만 표시하므로 레이블이 지정된 이벤트는 표시되지 않습니다.
• 목적지 이벤트 스트리밍: 레이블이 지정된 이벤트를 이벤트 스트리밍을 통해 목적지로 전송할 수 없습니다. 레이블이 지정된 이벤트를 사용하여 코호트를 정의한 다음 코호트 동기화를 사용하여 다른 대상과 통합할 수 있습니다.
• 콘텐츠 보안 정책(CSP): Amplitude는 귀하의 사이트와 Amplitude 간의 교차 탭 통신을 요구합니다. 시각적 레이블링을 위해서는 unsafe-none 가 cross-origin-opener-policy 이거나 설정되지 않아야 합니다.

문제 해결

내 사이트에서 시각적 라벨링 환경을 확인할 수 없습니다

시각적 라벨링 도구가 사이트에 나타나지 않는 경우 다음을 확인하십시오.

• 팝업 또는 광고 차단 도구를 활성화한 경우 이러한 도구가 시각적 라벨링 환경을 방해할 수 있습니다. 애드블록을 비활성화하고 다시 시도하세요.
• 입력한 URL이 다른 URL로 리디렉션되는 경우 시각적 라벨링 환경이 로드되지 않을 수 있습니다. 보안상의 이유로 레이블을 지정하려는 페이지의 도메인은 Amplitude에 입력한 도메인과 일치해야 합니다. 전체 리디렉션이 완료된 후 최종 URL을 사용해 보십시오.
• Cross-Origin-Opener-Policy가 unsafe-none로 설정되어 있는지 아닌지 확인합니다.