GA4 향상된 측정을 통해 페이지뷰 추적하기

안녕하세요. 그로스마케팅 파트너 허들러스의 박희진 그로스 엔지니어입니다.

웹사이트에서 사용자가 어떤 페이지를 보는지 정확히 추적하는 것은 데이터를 활용한 의사결정에 매우 중요합니다. 하지만 웹사이트의 구조와 기술 스택에 따라 페이지뷰 추적 방식은 달라질 수 있습니다.

특히, GA4(Google Analytics 4)에서는 향상된 측정(Enhanced Measurement) 기능을 통해 손쉽게 페이지뷰를 추적할 수 있는 옵션을 제공합니다. 반면, 웹사이트의 특성상 이 기능이 적합하지 않을 경우, 구글 태그 매니저(Google Tag Manager, GTM)를 활용하여 세밀하게 설정하는 방식도 있습니다.

이번 글에서는 웹사이트 구조를 크게 나누는 MPA(Multi-Page Application)와 SPA(Single Page Application)의 차이를 살펴보고, GA4 향상된 측정을 활용한 페이지뷰 추적 방법에 대해 자세히 소개하겠습니다.

다음글에서는 구글 태그 매니저를 활용하여 세밀하게 설정하는 방법도 소개드리겠습니다.
 

1. 웹 사이트 구조의 종류

1-1. MPA

MPA (Multi-Page Application)는 웹사이트가 여러 개의 페이지로 구성된 방식입니다.

예를 들어, 쇼핑몰에서 상품 페이지를 보다가 장바구니 페이지로 이동하면, 완전히 새로운 화면으로 넘어가면서 주소도 변경됩니다.
페이지를 이동할 때마다 새로고침이 발생하기 때문에 마치 한 페이지를 닫고 다음 페이지로 넘어가는 것처럼 느껴집니다.
이 방식은 페이지마다 고유한 주소를 가지기 때문에 검색 엔진 최적화에는 유리하지만, 사용자 경험이 SPA에 비해 다소 끊기는 느낌이 들 수 있습니다.
쉽게 말해, MPA는 페이지를 이동할 때마다 완전히 새로운 화면을 불러오는 방식으로 작동합니다.

1-1. SPA

SPA (Single Page Application)는 처음에 한 번만 페이지를 불러오고, 이후에는 필요한 부분만 살짝 바꿔주는 방식입니다.

예를 들어, Gmail에서 받은편지함을 보다가 보낸편지함을 눌러도 화면 전체가 바뀌지 않고, 필요한 정보만 변경되면서 빠르고 부드럽게 동작합니다.
전체 화면을 새로고침하지 않고 필요한 부분만 바뀌는 시간이 짧고 자연스럽게 화면이 전환되는 것처럼 보이는 것이 SPA의 장점입니다.

 

SPA는 실제로 페이지 이동이 일어나지 않는데 주소도 바뀌지 않아 사용자가 현재 페이지의 위치를 파악하기 어렵다는 점이 있습니다. 이때 History API라는 것을 사용하면, 실제 페이지 이동하는 것과 같이 유사하게 브라우저 주소를 바꿀 수 있습니다.

History API는 브라우저의 주소를 변경하지 않고도 현재 페이지의 상태를 기록하거나 관리할 수 있는 기능입니다. SPA에서는 이 API를 사용해 주소를 유동적으로 바꾸면서도 페이지를 새로고침하지 않아 자연스러운 사용자 경험을 제공합니다.

예를 들어,
사용자가 메뉴를 클릭했을 때 URL이 바뀌는 것처럼 보이지만 실제로는 화면 일부만 변경될 때,
뒤로가기 버튼을 눌렀을 때 이전 화면 상태로 자연스럽게 돌아가도록 처리하고 싶을 때,
이처럼 History API는 SPA에서 페이지 이동과 유사한 사용자 경험을 제공하는 핵심 기술입니다.

1-3. MPA와 SPA의 차이점

페이지를 불러오는 방식
MPA: 다른 페이지로 이동할 때마다 전체 페이지가 새로고침됩니다.
SPA: 처음 한 번 페이지를 불러온 후, 필요한 부분만 변경해 전체 페이지가 새로고침되지 않습니다.

사용자 경험
MPA: 페이지 이동 시마다 새로고침이 있어 비교적 느려 보일 수 있습니다.
SPA: 페이지가 부드럽게 변하며 앱처럼 빠르게 동작합니다.

검색 엔진 최적화
MPA: 각각의 페이지가 개별 주소로 존재해 검색 엔진 최적화에 유리합니다.
SPA: 한 페이지로 구성되어 검색엔진 최적화가 비교적 불리합니다.

페이지뷰 이벤트를 추적할 때는 웹사이트에서 페이지를 불러오는 방식 차이를 반드시 고려해야 합니다.

MPA(Multi Page Application)로 구성된 웹사이트는 사용자가 새로운 페이지로 이동할 때마다 브라우저가 페이지를 새로 불러오기 때문에, 페이지뷰 이벤트는 기본적으로 페이지를 불러올 때마다 자동으로 추적됩니다.

반면, SPA(Single Page Application)로 구성된 웹사이트는 첫 방문 시에만 페이지를 불러오고, 이후 새로운 페이지로 이동할 때마다  브라우저가 페이지를 새로 불러오는 것이 아닌 페이지의 특정 콘텐츠만 수정되는 방식으로 작동합니다. 이 경우 브라우저에서 전체 페이지가 새로고침되지 않기 때문에, 기본 설정만으로는 페이지뷰 이벤트가 정상적으로 추적되지 않을 수 있습니다.

따라서 SPA 환경에서는 사용자 행동을 기반으로 추가적인 페이지뷰 추적 설정이 필요합니다. 
GA4의 향상된 측정 기능은 추가적인 개발 작업 없이도 SPA 환경에서도 페이지 이동을 감지하고 정확한 페이지뷰 이벤트를 추적할 수 있습니다.
 

2. GA4 향상된 측정으로 페이지뷰 이벤트 추적하기

2-1. 향상된 측정?

향상된 측정은 GA4에서 일부 이벤트를 자동으로 수집할 수 있는 기능입니다. 웹사이트의 코드를 수정할 필요 없이, 설정만으로 페이지뷰뿐만 아니라 스크롤, 외부 링크 클릭, 사이트 검색, 폼 제출, 동영상 재생, 파일 다운로드 등의 이벤트도 자동으로 수집할 수 있습니다.

특히 페이지뷰 이벤트의 경우, [페이지 로드]와 [브라우저 방문 기록 이벤트를 토대로 한 페이지 변경사항] 두 가지 방식으로 설정할 수 있습니다.

MPA 환경에서는 향상된 측정의 [페이지 로드] 옵션을 체크해주면 페이지가 새로 고침될 때마다 페이지뷰 이벤트가 발생합니다.

이와 달리, SPA 환경에서는 첫 페이지 새로 고침 이후 다른 페이지로 이동할 때 페이지가 새로 고침 되지 않기 때문에, 페이지뷰 이벤트가 발생하지 않습니다. 

그렇다면, SPA 사이트에서 어떻게 페이지뷰를 추적할 수 있을까요? 

바로 향상된 측정의 [브라우저 방문 기록 이벤트를 토대로 한 페이지 변경사항] 옵션을 사용하면 해결할 수 있습니다. 이 옵션을 활성화하면 SPA에서 History API를 감지하여 페이지가 새로고침되지 않고 이동할 때마다 페이지뷰 이벤트가 발생합니다.

2-2. 향상된 측정 사용 설정하는 방법

1. 1. GA4에서 [관리] > [데이터 스트림]으로 이동합니다.
2. 2. 추적하려는 데이터 스트림을 클릭합니다.
   
3. 3. [향상된 측정]을 활성화합니다. (기본적으로 활성화되어 있지만, 설정을 확인합니다.)
   
4. 4. [설정] 아이콘을 클릭하여 [향상된 측정 구성] 페이지로 이동합니다.
   
5. 5. [고급 설정 표시]를 클릭하고 [브라우저 방문 기록 이벤트]를 체크합니다. (기본적으로 모든 이벤트가 활성화되어 있지만, 필요한 이벤트만 선택할 수 있습니다.)
   
6. 6. GA4 향상된 측정 항목들을 모두 완료하였으면, GA4와의 연동을 위해 Google Tag Manager 에서 GA4 태그를 생성해야합니다. GA4 향상된 측정 항목만 체크한다고 해서 페이지뷰 이벤트가 추적되지 않습니다.
   먼저, GTM에서 [태그] 클릭 > [새로 만들기] 클릭합니다.
   7. 태그 구성을 클릭합니다.
7. 8. [태그 유형 선택]에서 [Google 애널리틱스]를 클릭합니다.
   
8. 9. [Google 태그]를 클릭합니다.
   
9. 10. [태그 ID]를 넣어줍니다. [태그 ID]는 GA4 데이터 스트림에 있던 측정 ID입니다.
   
10. 11. 페이지 새로고침 시 페이지뷰 이벤트가 발생하도록 구성 태그에 페이지 조회 트리거를 추가합니다. SPA 환경에서는 향상된 측정의 [브라우저 방문 기록 이벤트]가 자동으로 페이지뷰 이벤트를 발생시킵니다.
    [트리거] 클릭 > [All Pages] 클릭합니다.
    
    
11. 12. 페이지뷰 중복을 방지하려면 [태그 설정 구성]에서 [동일 페이지 구성의 중복 인스턴스 무시]를 체크합니다. 이 설정을 체크하지 않으면, 페이지 방문 시 페이지뷰가 두 번 발생할 수 있습니다.
    
    
    
    이렇게 GA4의 향상된 측정 기능을 사용하면, 별도의 개발 작업 없이 MPA와 SPA 환경 모두에서 페이지뷰 이벤트를 손쉽게 추적할 수 있습니다. 
    이를 통해 사용자가 방문한 페이지와 페이지 간 이동 경로를 파악하여 웹사이트의 사용성을 분석할 수 있으며, 특정 페이지의 이탈률이나 체류 시간을 기반으로 콘텐츠의 효과를 평가하고 개선할 수 있습니다.
12.  

요약

• MPA 환경의 웹사이트는 사용자가 다른 페이지로 이동할 때마다 서버에서 새로운 페이지를 불러와서 전체 페이지를 새로고침하는 방식으로 작동하여 GA4 향상된 측정의 [페이지 로드] 옵션을 체크하고 GTM 구성태그를 만들어서 페이지뷰 트리거를 추가하는 방식으로 페이지뷰 이벤트를 추적할 수 있습니다.
   
• SPA 환경의 웹사이트는 처음 한 번만 페이지를 새로고침하고 이후에 사용자가 다른 페이지로 이동할 때마다 필요한 데이터만 받아와 화면을 업데이트하고 History API로 URL을 바꾸는 방식으로 작동하여 GA4 향상된 측정의 [브라우저 방문 기록 이벤트를 토대로 한 페이지 변경사항] 옵션을 체크하고 GTM 구성태그를 만들어서 페이지뷰 트리거를 추가하는 방식으로 페이지뷰 이벤트를 추적할 수 있습니다.

박희진

Growth Engineer