구역 지정 인사이트

Zoning Insights는 사용자가 페이지의 특정 영역(예: 히어로(hero) 섹션, 네비게이션 바, 콜 투 액션 블록)과 어떻게 상호작용하는지를 측정합니다. 페이지의 스크린샷에 명명된 영역(zones)을 그릴 수 있으며, Amplitude는 각 영역에 대한 클릭, 노출 및 스크롤 지표를 보고합니다. 배너, 양식, CTA 등 특정 지역에서의 참여에 관심이 있을 때 Zoning Insights를 사용하세요. 사용자 지정 영역을 정의하지 않고 전체 페이지의 클릭 횟수와 스크롤 횟수를 집계하려면 대신 히트맵을 사용하십시오.

조닝 인사이트는 요소 수준의 지표를 계산하기 위해 자동 캡처된 상호 작용 데이터(예: 클릭 노출 또는 스크롤)가 필요합니다. 조닝 인사이트는 자동 캡처를 사용하여 페이지 수준의 클릭 이벤트 및 상호 작용 데이터를 수집하므로 이벤트 양을 늘릴 수 있습니다.

권한 관리

• 관리자(Admin) 또는 매니저(Manager) 역할을 가진 사용자는 모든 조닝 분석을 생성, 업데이트 및 삭제할 수 있습니다.
• 멤버 역할을 가진 사용자는 자신의 구역 지정 분석을 생성, 업데이트 또는 삭제할 수 있지만 다른 사람의 분석을 편집할 수는 없습니다.
• Viewer 역할을 가진 경우 구역 지정 분석만 볼 수 있습니다. 자세한 내용은 사용자 역할 및 권한 관리로 이동하십시오.

가용성

웹과 모바일 웹에서 Zoning 인사이트를 사용할 수 있습니다.

영역 지정 인사이트가 세션 리플레이 및 히트맵과 어떻게 관련되는가

조닝 인사이트는 세션 리플레이 또는 히트맵과 다릅니다:

• 세션 리플레이: 사용자 세션을 기록하여 재생을 관찰하고 동작을 디버깅할 수 있습니다.
• 히트맵: 사용자 지정 영역을 정의하지 않고 페이지의 클릭, 스크롤 및 선택기 수준의 상호 작용을 집계합니다.
• Zoning Insights: 페이지의 사용자 지정 영역(구역)을 정의하고 해당 영역 내의 참여도를 분석합니다. 조닝 인사이트는 전체 페이지나 원시 선택기가 아닌 특정 지역(예: 배너, 양식 또는 CTA)에 관심이 있을 때 세션 리플레이 및 히트맵을 보완합니다.

구역 지정 인사이트 구성

브라우저 SDK, Google 태그 관리자, Tealium iQ 및 세그먼트에 대한 전체 설정 지침은 Zoning Insights Instrumentation을 참조하세요.

가장 간단하고 완벽한 설정은 전체 자동 캡처를 활성화하는 것입니다. 이를 통해 모든 Zoning 인사이트 지표와 다른 Amplitude 기능에서 사용할 수 있는 데이터를 얻을 수 있습니다.

amplitude.init(AMPLITUDE_API_KEY, OPTIONAL_USER_ID, {
  autocapture: true,
});

선택적으로 옵트인하려는 경우 최소한의 필수 옵션은 다음과 같습니다pageViews.elementInteractions

amplitude.init(AMPLITUDE_API_KEY, OPTIONAL_USER_ID, {
  autocapture: {
    pageViews: true,
    elementInteractions: {
      viewportContentUpdated: true,
    },
    frustrationInteractions: true,
  },
});

• 페이지 보기: 필수입니다. 페이지 수준의 참여 지표를 계산합니다.
• 요소 상호작용: 필수입니다. 클릭률, 노출률 및 스크롤 도달률을 계산합니다. viewportContentUpdated옵션은 콘텐츠가 동적으로 로드될 때 요소 노출을 추적합니다elementInteractions.
• 불만족스러운 상호 작용: 선택 사항입니다. Zoning Insights가 작동하는 데 필수적인 것은 아니지만 분노 클릭 및 데드 클릭 메트릭을 활성화합니다. true로 설정하면 분노 클릭과 무반응 클릭이 기본적으로 활성화됩니다.

선택적으로 추가 옵션을 전달할 수 있습니다cssSelectorAllowlist(기본값: viewportContentUpdated.exposureDuration150ms)elementInteractions.

Zoning Insights 지표

Zoning 인사이트는 각 영역에 대해 다음과 같은 메트릭을 계산합니다.

오버레이 만들기

페이지에 영역을 그리고 해당 영역 첫 사용 후 사용자 참여도를 분석하여 오버레이를 만듭니다. 오버레이는 단일 페이지 또는 페이지 그룹을 데이터 소스로 사용합니다.

• 단일 페이지: 단일 URL입니다. 예를 들어: amplitude.com/가격.
• 페이지 그룹: URL 규칙에 따라 범위가 지정되는 관련 페이지의 그룹입니다. 예를 들어 제품*입니다. 페이지 그룹에서 오버레이는 페이지 집합에 걸쳐 집계된 참여 지표를 표시합니다.

단일 페이지 오버레이 만들기

1. Amplitude > Zoning 인사이트로 이동합니다.
2. 오버레이 작성을 클릭합니다.
3. URL을 지정합니다. 제품이 히트맵과 동일한 URL 일치 옵션을 지원하는 경우 다음을 사용할 수 있습니다.
   • 단일 URL과 정확히 일치합니다.
   • 유사한 URL에 대해 와일드카드와 패턴 일치를 수행합니다.
   • 키워드나 세그먼트를 포함하는 URL에 대한 항목입니다.
   • URL 접두사와 해당 하위 페이지의 경우 로 시작합니다.
4. 페이지 캡처로 이동하려면 계속을 클릭하십시오.
5. 올바른 URL이 표시되는지 확인한 다음 스크린샷 찍기를 클릭합니다.
6. 스크린샷의 이름을 지정하고 설명한 다음 저장하십시오.
7. 각 영역을 클릭하여 켜거나 끕니다.
8. 오버레이를 저장하거나 적용하여 Amplitude가 정의된 영역에 대한 데이터를 집계할 수 있도록 합니다.

오버레이를 저장한 후 각 영역에 대한 메트릭, 사용자 여정 분석 및 세션 재생을 검토하십시오(예: 클릭, 스크롤 또는 영역에 접촉한 세션). 또한 각 영역에 대한 코호트를 생성할 수도 있습니다.

또한 히트맵 오버레이를 켜면 페이지에서의 히트맵 클릭을 더 잘 이해할 수 있습니다.

페이지 그룹

페이지 그룹을 사용하면 페이지를 구성할 수 있으므로 단일 URL이 아닌 일련의 관련 페이지로 오버레이의 범위를 지정할 수 있습니다.

AI가 제안한 페이지 그룹

Amplitude는 사이트의 URL 구조를 분석하여 논리적 페이지 그룹을 자동으로 제안할 수 있으므로 규칙을 수동으로 작성하는 대신 몇 분 안에 설정할 수 있습니다. 제안을 그대로 수락하거나 저장하기 전에 수정하십시오.

페이지 그룹 만들기

1. 페이지 그룹 생성을 클릭하고 그룹 이름을 입력합니다.
2. 그룹에 대한 조건이나 규칙을 설정합니다. 예를 들어 URL이 amplitude.com/와 같은 특정 도메인으로 시작하도록 설정하십시오.
3. 규칙 추가를 완료하고 페이지 그룹 생성을 클릭합니다.
4. 분석할 URL을 지정하십시오. 제품이 히트맵과 동일한 URL 일치 옵션을 지원하는 경우 다음을 사용할 수 있습니다.
   • 단일 URL과 정확히 일치합니다.
   • 유사한 URL에 대해 와일드카드와 패턴 일치를 수행합니다.
   • 키워드나 세그먼트를 포함하는 URL에 대한 항목입니다.
   • URL 접두사와 해당 하위 페이지의 경우 로 시작합니다.
5. 저장을 클릭합니다.

사이트 맵 및 페이지 그룹 편집 또는 삭제

• 사이트 맵을 편집하거나 삭제하려면 왼쪽 사이드바에서 해당 항목 위에 마우스를 올리고 **...**을 선택한 다음 편집 또는 삭제를 선택합니다.
• 페이지 그룹을 편집하거나 삭제하려면 페이지 그룹 행에서 **...**을 선택한 다음 편집 또는 삭제를 선택합니다.

목록이 긴 경우 맨 아래에 있는 더 많은 항목 로드를 선택하여 추가 항목을 로드하십시오.

오버레이 비교

두 개의 오버레이를 나란히 비교하려면 오버레이 도구 모음에서 비교를 선택한 다음 활성 오버레이와 함께 표시할 두 번째 오버레이를 선택합니다. Amplitude는 두 오버레이를 동시에 렌더링하므로 기간, 페이지 변형 또는 다른 대상 세그먼트 간의 변화를 평가할 수 있습니다.

페이지 비교기

페이지 비교기 탭을 사용하면 테이블에서 페이지 그룹 전체의 성능 측정 단위를 나란히 비교할 수 있습니다. 사이트 매핑과 선택적 전환 목표를 선택하여 테이블을 채웁니다. 열에는 뷰, 세션, 세션당 뷰, 이탈률, 종료율, 스크롤 깊이, 페이지 높이, 소요된 시간, 활동 및 로드 시간(LCP)이 포함됩니다. 열 사용자 정의를 사용하여 표시할 지표를 조정하고, 비교를 사용하여 직접 비교할 특정 페이지 그룹을 선택하십시오.

영역 상황에 맞는 메뉴 작업

전체 불러오기 영역을 마우스 오른쪽 버튼으로 클릭하여 해당 상황에 맞는 메뉴를 엽니다. 상황에 맞는 메뉴에는 다음과 같은 작업이 포함됩니다.

• 사용자 여정 보기: 이 영역과 상호작용한 세션에 대한 범위가 적용되는 사용자 여정 분석을 엽니다.
• 세션 리플레이 보기: 세션 리플레이를 필터링하여 사용자가 이 영역과 상호 작용한 위치의 재생을 표시합니다.
• 코호트 생성: 이 영역과 상호작용한 사용자의 행동 코호트를 생성합니다. 이 코호트를 다른 Amplitude 차트에서 사용할 수 있습니다.
• 영역 삭제: 오버레이에서 영역을 제거합니다.

Zoning 인사이트 분석 내보내기

Zoning 인사이트 데이터를 내보내어 팀원들과 공유하거나 프레젠테이션 및 보고서에 포함시킬 수 있습니다.

오버레이 편집기 도구 모음에서 공유 드롭다운을 선택하여 분석을 내보냅니다.

CSV 다운로드

현재 오버레이에 대한 영역 메트릭을 CSV 파일로 내보냅니다. CSV 내보내기를 사용하여 오프라인 분석을 수행하거나, 스프레드시트로 가져오거나, 팀 간에 참여 데이터를 공유할 수 있습니다.

• 가시적 오버레이에 대한 모든 영역 메트릭을 내보냅니다.
• 단일 뷰와 비교 뷰 모두에서 작동합니다.

PNG 다운로드

현재 오버레이 뷰를 PNG 이미지로 내보냅니다. 내보내기에는 모든 영역 오버레이와 지표 레이블이 표시된 페이지 스크린샷이 포함됩니다.

• 지표 배지로 전체 오버레이를 캡처합니다.
• 내보내기는 백그라운드에서 실행됩니다. Amplitude가 이미지를 생성하는 동안 로딩 표시기가 나타납니다.
• 파일이 준비되면 자동으로 다운로드됩니다.
• 단일 뷰와 나란히 비교 뷰 모두에서 작동합니다.

링크 복사

공유 가능한 URL을 현재 오버레이에 복사합니다. 조직 내에서 Zoning Insights에 액세스할 수 있는 사람은 누구나 링크를 열 수 있습니다.

비교 뷰를 위한 링크 복사

현재 비교 대상과 비교 모드에서 오버레이를 여는 URL을 복사합니다. 비교 뷰 링크 복사 옵션은 오버레이를 활발하게 비교하고 있을 때만 나타납니다.

내보내기 요구 사항

• 내보내기 전에 오버레이를 저장하십시오. Amplitude는 저장되지 않은 오버레이에 대한 내보내기 옵션을 비활성화합니다.
• Growth 및 Enterprise 계획에는 CSV 및 PNG 내보내기가 포함됩니다. 계획에 내보내기가 포함되어 있지 않은 경우 내보내기 메뉴 항목에 잠금 아이콘이 나타납니다.

문제 해결

구역 설정 배경 캡처에서 CSS 스타일이 잘못 표시됨

외부 스타일시트는 일반적으로 구역 지정 배경 캡처에서 올바르게 표시됩니다. 그러나 뷰포트 높이(vh) 단위를 사용하는 스타일과 같은 일부 스타일은 구역 설정에서 캡처된 배경을 iframe 내에 표시하므로 조정해야 할 수 있습니다.

Zoning은 rrweb을 사용하여 방문자의 브라우저에서 페이지를 캡처하고 인라인 스타일시트 규칙을 적용하므로 Amplitude는 이러한 조정을 수행할 수 있습니다. 교차 출처 스타일시트의 <link> 태그에 해당 crossorigin 속성이 없으면 브라우저는 서버가 stylesheet.cssRules를 전송하더라도 해당 CSS 규칙(Access-Control-Allow-Origin: *)에 대한 액세스를 차단합니다. 이 경우 캡처는 규칙을 인라이닝하는 대신 외부 스타일시트를 참조하므로 Zoning은 배경을 올바르게 표시하는 데 필요한 조정을 수행하지 못합니다.

이 문제를 해결하려면 다른 출처에서 로드되는 모든 crossorigin="anonymous"에 추가하고 스타일시트 서버가 출처간 액세스<link rel="stylesheet">를 허용하는지 확인하십시오.

<link
  rel="stylesheet"
  href="https://cdn.example.com/styles.css"
  crossorigin="anonymous"
/>