Zoning 인사이트 계측

Zoning 인사이트는 Amplitude 자동 캡처를 기반으로 실행됩니다. 이 자동 캡처는 브라우저 SDK, Google 태그 관리자, Tealium iQ 또는 세그먼트를 통해 수집되는 클릭, 노출 및 스크롤 이벤트입니다. 한 가지 방법을 선택합니다. 각각은 동일한 자동 캡처 이벤트를 캡처하므로 계측을 한 번만 수행하면 됩니다.

브라우저 SDK

가장 직접적인 계측 경로를 위해 브라우저 SDK를 사용하십시오. Zoning 인사이트에는 Browser SDK 버전 2.39.0 이상이 필요합니다.

SDK 설치

npm i @amplitude/analytics-browser@2.39.0

자동 캡처 구성

SDK를 설치한 후, 자동 캡처를 활성화한 상태로 Amplitude를 초기화하십시오. 이 설정은 Zoning 인사이트에 필요한 두 가지 설정을 구성합니다. pageViews은 페이지 뷰 추적을 위한 것이고, elementInteractions는 클릭 및 요소 가시성 추적을 위한 것입니다.

import * as amplitude from '@amplitude/analytics-browser';
const AMPLITUDE_API_KEY = '<API_KEY>'; // replace with your project API key
const options = {
  autocapture: {
    pageViews: true,
    elementInteractions: {
      viewportContentUpdated: true,
  },
  frustrationInteractions: true,
},
}};
amplitude.init(AMPLITUDE_API_KEY, options);

고급옵션: 노출 추적을 미세 조정합니다

더 많은 제어를 위해서는 객체를 elementInteractions에 전달하여 viewportContentUpdated를 직접 구성하십시오. 예를 들어, exposureDuration을(를) 설정하여 요소가 노출로 간주되기 전에 표시되어야 하는 시간을 제어하십시오(기본값: 150ms).

import * as amplitude from '@amplitude/analytics-browser';
const AMPLITUDE_API_KEY = '<API_KEY>';
const options = {
  autocapture: {
    pageViews: true,
    elementInteractions: {
      viewportContentUpdated: {
        enabled: true,
        exposureDuration: 150,
      },
    },
  },
};
amplitude.init(AMPLITUDE_API_KEY, options);

API 키 찾기

Amplitude에서 설정 → 프로젝트 → [내 프로젝트] → 일반 → API 키로 이동합니다. <API_KEY>을 프로젝트의 API 키로 대체하십시오.

구글 태그 관리자

GTM 템플릿 갤러리나 사용자 지정 HTML 태그에서 제공하는 공식 Amplitude 템플릿을 사용하십시오. 두 접근 방식 모두 SDK를 로드하고 Zoning 인사이트를 위한 자동 캡처를 활성화합니다.

옵션 A: 공식 Amplitude GTM 템플릿(권장)

공식 Amplitude GTM 템플릿은 모든 SDK 설정을 위한 양식 기반 UI를 제공합니다. 코드를 편집할 필요는 없습니다.

1단계: 템플릿 추가

1. GTM 작업 공간에서 작업 공간 → 템플릿 → 검색 갤러리로 이동합니다.
2. 'Amplitude'를 검색하고 Amplitude 애널리틱스 Browser SDK를 선택합니다.
3. 작업공간에 추가를 클릭하고 권한 관리 수락을 선택합니다.

2단계: 초기화 태그 생성

1. 태그 → 새로 만들기로 이동하여 Amplitude 템플릿을 선택합니다.
2. 태그 유형을 초기화로 설정합니다. 이 태그는 다른 모든 Amplitude 태그 전에 실행되어야 합니다.
3. Amplitude API 키를 입력하십시오.
4. 이벤트 자동 캡처 아래에서 페이지 보기 및 요소 상호 작용이 활성화되어 있는지 확인합니다.
5. 트리거를 모든 페이지 — 초기화 또는 모든 페이지 — DOM 준비로 설정합니다.

3단계: 미리 보기 및 게시

GTM의 미리보기 모드를 사용하여 모든 페이지에서 init 태그가 작동하는지 확인하십시오. 브라우저의 네트워크 탭에서 api2.amplitude.com에 대한 요청을 확인한 다음 [Amplitude] Viewport Content Updated 이벤트가 나타나는지 확인하십시오. 확인이 완료되면 컨테이너를 게시합니다.

옵션 B: 사용자 지정 HTML 태그

단일 사이트를 더 빠르게 설정하려면 사용자 지정 HTML 태그를 사용하십시오. Tags → New → Custom HTML로 이동하여 아래에 스니펫을 붙여넣은 다음 트리거를 All Pages, DOM Ready로 설정하십시오.

<!-- GTM → Tags → New → Custom HTML -->
<!-- Trigger: All Pages, DOM Ready -->
<script src="https://cdn.amplitude.com/libs/analytics-browser-2.39.0-min.js.gz"></script>
<script>
  window.amplitude.init('YOUR_API_KEY', {
    autocapture: {
      pageViews: true,
      elementInteractions: true,
    },
  });
</script>

콘텐츠 보안 정책

사이트에서 CSP 헤더를 사용하는 경우 cdn.amplitude.com을 script-src에 추가하고 api2.amplitude.com을 connect-src에 추가하십시오.

Tealium iQ

Tealium iQ의 JavaScript 확장을 사용하여 자동 캡처가 활성화된 상태에서 Amplitude SDK를 로드하십시오.

JavaScript 확장 프로그램 만들기

1. Tealium iQ에서 확장 프로그램 → 확장 프로그램 추가 → JavaScript 코드로 이동합니다.
2. 범위를 Before Load Rules로, 조건을 All Pages로 설정합니다.
3. 아래 코드를 붙여넣으십시오.
4. YOUR_API_KEY를 Amplitude 프로젝트 API 키로 대체하십시오.

// Tealium iQ → Extensions → JavaScript Code
// Scope: Before Load Rules | Condition: All Pages
(function() {
  var s = document.createElement('script');
  s.src = 'https://cdn.amplitude.com/libs/analytics-browser-2.39.0-min.js.gz';
  s.async = false;
  s.onload = function() {
    if (!window.amplitude) return;
    window.amplitude.init('YOUR_API_KEY', {
      autocapture: {
        pageViews: true,
        elementInteractions: true,
      },
    });
  };
  document.head.appendChild(s);
})();

5. Tealium의 QA 모드를 사용하여 모든 페이지에서 확장 프로그램이 작동하는지 확인한 다음 프로필을 게시하십시오.

Tealium EventStream과 함께 실행하기

Tealium의 서버측 Amplitude 커넥터를 이 클라이언트측 확장 프로그램과 동시에 실행할 수 있습니다. EventStream은 서버측 비즈니스 이벤트를 처리하며, 확장 기능은 Zoning 인사이트 자동 캡처를 처리합니다. 둘 다 동일한 API 키를 사용하여 동일한 Amplitude 프로젝트에 기록합니다.

Segment

세그먼트와 함께 Amplitude Browser SDK를 로드합니다. Zoning 인사이트를 사용하려면 클라이언트 측에서 실행되는 SDK가 필요합니다. 세그먼트의 서버측 Amplitude 목적지만으로는 충분하지 않습니다.

두 SDK를 동시에 로드합니다. Amplitude는 Zoning 인사이트 자동 캡처를 처리하며, Segment는 기존의 사용자 지정 이벤트 파이프라인을 처리합니다. 두 SDK는 충돌하지 않습니다.

import * as amplitude from '@amplitude/analytics-browser';
import { AnalyticsBrowser } from '@segment/analytics-next';
// Amplitude: handles Zoning Insights autocapture
amplitude.init('YOUR_AMPLITUDE_API_KEY', {
  autocapture: {
    pageViews: true,
    elementInteractions: true,
  },
});
// Segment: your existing event pipeline
const analytics = AnalyticsBrowser.load({
  writeKey: 'YOUR_SEGMENT_WRITE_KEY',
});
// Keep user identity in sync
function identify(userId, traits = {}) {
  analytics.identify(userId, traits);
  amplitude.setUserId(userId);
  const evt = new amplitude.Identify();
  Object.entries(traits).forEach(([k, v]) => evt.set(k, v));
  amplitude.identify(evt);
}

설정 확인

위의 방법 중 하나를 설정한 후에는 자동 캡처 이벤트가 Amplitude 프로젝트로 흐르고 있는지 확인하십시오.

옵션 A: 이벤트 세분화 차트

Amplitude에서 데이터를 전송한 프로젝트에 대해 이벤트 세분화 차트를 생성합니다. 이벤트 검색:

[Amplitude] Viewport Content Updated

데이터가 나타나면 자동 캡처가 제대로 작동하고 있으며 Zoning 인사이트가 메트릭 계산을 시작할 수 있습니다.

옵션 B: Amplitude Chrome 확장 프로그램

Amplitude Chrome 확장 프로그램을 설치하고 계측 사이트로 이동하십시오. 이 확장 기능은 이벤트가 실시간으로 추적되고 있음을 보여줍니다. 스크롤하고 클릭할 때 나타나는 [Amplitude] Viewport Content Updated 및 [Amplitude] Element Clicked 이벤트를 찾습니다.

찾아야 할 사항

프로젝트로 [Amplitude] Viewport Content Updated 이벤트가 유입되는 것을 확인하면 Zoning 인사이트는 필요한 데이터를 갖게 됩니다. 영역은 클릭률, 노출률, 스크롤 도달 범위, 분노의 클릭률과 같은 메트릭으로 채워지기 시작합니다.