Google 태그 관리자로 단일 페이지 애플리케이션 측정

이 가이드에서는 Google 태그 관리자를 사용하여 단일 페이지 애플리케이션 (SPA)의 Google 애널리틱스 측정을 설정하는 방법을 설명합니다. Google 애널리틱스 속성을 구성하고, 필요한 GTM 변수를 사용 설정하고, 기록 변경 시 트리거되는 태그를 만드는 방법을 알아봅니다.

시작하기 전에

이 가이드에서는 다음이 있다고 가정합니다.

• Google 애널리틱스 계정 및 속성
• SPA에 설치된 Google 태그 관리자 컨테이너
• Google 애널리틱스 및 Google 태그 관리자 모두에 대한 편집자 이상의 역할

1단계: GA4 데이터 스트림 준비

SPA에서 page_view 이벤트를 수동으로 추적하려면 중복 집계를 방지하기 위해 먼저 GA4에서 기록 기반 페이지 조회를 사용 중지해야 합니다.

1. Google 애널리틱스를 엽니다.
2. 관리의 데이터 수집 및 수정에서 데이터 스트림을 클릭합니다.
3. 웹 데이터 스트림을 선택합니다.
4. 향상된 측정에서 설정 아이콘 을 클릭합니다.
5. 페이지 조회수 > 고급 설정 표시 에서 인터넷 사용 기록 이벤트를 기반으로 페이지 변경 을 선택 해제합니다.
6. 저장 을 클릭합니다.

2단계: 태그 관리자에서 기본 제공 기록 변수 사용 설정

GTM에서 기록 기반 트리거 또는 변수를 사용하려면 먼저 기본 제공 기록 변수를 사용 설정해야 합니다.

1. Google 태그 관리자를 엽니다.
2. 작업공간에서 변수 로 이동합니다.
3. 기본 제공 변수에서 구성을 클릭합니다.
4. 기록 섹션에서 다음 변수를 사용 설정합니다.
   • History New URL Fragment
   • History Old URL Fragment
   • History New State
   • History Old State
   • History Source
5. 구성 패널을 닫습니다.

참고: 이러한 변수는 기본 페이지 조회 설정에 엄격하게 필요한 것은 아닙니다. 트리거를 필터링하거나 이 페이지의 최종 참고에 언급된 이전 페이지 로직과 같은 맞춤 로직을 구현하려는 경우에만 사용됩니다.

참고: 일부 이전 문서에서는 Old History URL 또는 New History URL을 참조할 수 있습니다. 이는 표준 기본 제공 변수가 아닙니다. 나열된 변수를 대신 사용하세요.

3단계: 기록 변경 트리거 만들기

다음으로 SPA에서 기록 변경 이벤트 (pushState 또는 replaceState와 같은)가 발생할 때마다 실행되는 트리거를 만듭니다.

1. 태그 관리자 작업공간에서 트리거 메뉴로 이동합니다.
2. 새로 만들기 를 클릭합니다.
3. 트리거 구성에서 기록 변경 트리거를 선택합니다.
4. (선택사항) 특정 화면 변경만 추적하려면 일부 기록 변경 시 실행되도록 트리거를 업데이트합니다.
5. 트리거 이름을 지정하고 (예: '기록 변경') 저장 을 클릭합니다.

4단계: Google 태그 만들기

이제 기록 변경이 발생할 때마다 page_location 매개변수를 업데이트하는 Google 태그를 만듭니다.

1. 태그 메뉴에서 새로 만들기 를 클릭합니다.
2. 태그 구성에서 Google 태그를 선택합니다.
3. 태그 ID (초기 Google 태그에 사용된 것과 동일한 ID)를 입력합니다.

4. 구성 설정에서 다음 매개변수를 추가합니다.

   • page_location: {{Page URL}}
   • page_title: {{Page Title}}
   • update: true
   참고: update 매개변수는 구성 값을 기존 태그 구성에 병합하고 즉시 중복되는 page_view 이벤트를 억제합니다. page_referrer는 여기에 포함되지 않습니다. Google 애널리틱스는 초기 페이지 로드 시 원래 외부 리퍼러를 자동으로 추적하며, 이를 생략하면 Google 애널리틱스에서 이전 가상 페이지 URL을 보고서의 탐색 경로 지정 리퍼러로 자동으로 채울 수 있기 때문입니다.

5. 태그 이름을 지정하고 (예: 'Google 태그 - SPA 업데이트') 저장 을 클릭합니다.

   참고: 이 Google 태그의 트리거링 섹션에 트리거를 추가하지 마세요. 5단계에서 태그 시퀀싱을 사용하여 설정 태그로 트리거됩니다.

5단계: 가상 page_view 이벤트 전송

마지막으로 각 가상 페이지 로드에 대한 실제 page_view 이벤트를 전송하는 GA4 이벤트 태그를 만듭니다.

1. 태그 메뉴에서 새로 만들기 를 클릭합니다.
2. 태그 구성에서 Google 애널리틱스: GA4 이벤트를 선택합니다.
3. 측정 ID 를 입력합니다.
4. 이벤트 이름 을 page_view로 설정합니다.
5. 고급 설정 > 태그 시퀀싱 에서 GA4 이벤트 - 가상 페이지 조회 실행 전에 태그 실행 을 선택하고 4단계에서 만든 Google 태그 - SPA 업데이트 태그를 선택합니다.
6. 트리거링에서 3단계에서 만든 기록 변경 트리거를 선택합니다.
7. 태그 이름을 지정하고 (예: 'GA4 이벤트 - 가상 페이지 조회') 저장 을 클릭합니다.

6단계: 설정 확인

가상 페이지 조회가 올바르게 기록되는지 확인하려면 다음 단계를 따르세요.

1. 태그 관리자에서 미리보기를 클릭하여 미리보기 모드로 전환합니다.
2. SPA를 탐색합니다.
3. Google 애널리틱스 DebugView에서 화면이 변경될 때마다 새 page_view 이벤트가 표시되는지 확인합니다.
4. page_location 값이 예상과 일치하는지 확인합니다.

참고: 표준 {{Referrer}}를 사용하면 사용자를 사이트로 유도한 초기 소스가 캡처됩니다. SPA 내에서 이전 가상 페이지 를 리퍼러로 추적하려면 이전 페이지 위치를 저장하는 맞춤 GTM 변수를 구현해야 합니다.