GA4에서 SPA(react, vue, angular)의 url 이동도 자동으로 측정될까요?

특정페이지에 접속해서 서버가 전달해준 html을 렌더링하면서 GA스크립트가 실행 될때 GA에 page_view 이벤트가 기록됩니다

 

특정 페이지의 조회수를 올리는 기록이지요

 

어느페이지에 방문을 많이 했는지 알수 있는 매우 중요한 이벤트입니다

 

그런데 react, vue, angular로 만든 SPA(single page application)는 링크 이동할때 페이지가 새로로드되지 않고

 

내부적으로 화면 렌더링만 변경되는데 이때도 GA에 기록이 될까요?

 

 

 

GA4에서는 향상된 측정을 사용합니다

 

 

애널리틱스에 접속하여 왼쪽 하단의 관리자를 클릭하고 -> 데이터 스트림을 클릭하세요

 

 

 

그러면 전체 데이터 스트림이 표시되는데요

 

여기에서 사용중인 웹 스트림을 클릭합니다

 

 

다음화면에서 스트림세부정보가 나오는데

 

여기에 "향상된 측정" 이라는 항목이 보이나요?

 

 

"표준 페이지 조회수 측정 외에도 사이트의 상호작용 및 콘텐츠를 자동으로 측정합니다"

 

라는 문구로 설명이 되어있습니다

 

자세히 알아보기 링크를 클릭하면

 

좀 더 다양한 설정을 확인할수 있습니다

 

여기서 가장 상단의 페이지 조회의 고급설정을 보면

 

"브라우저 방문 기록 이벤트를 토대로 한 페이지 변경사항"에 기본적으로 체크가 되어있는것을 확인할수 있는데

 

이 옵션이 바로 SPA에서의 페이지 이동을 추적하는 옵션입니다.

 

 

이 옵션을 활성화 하면

 

GA 실시간 디버깅을 통해서 볼때 이러한 이벤트를 감지할수 있습니다

 

historyChange-v2 가 바로 SPA에서 historyChange가 발생할때 해당 이벤트를 추적하는것입니다

 

historyChange를 탐지하고 있어서 SPA앱에서는 별다른 처리를 해주지 않아도 됩니다

 

 

 

GA4가 이전 시절에 쓰던 유니버셜 애널리틱스는 이러한 향상된 측정이 되지 않아

 

SPA에서는 코드상에서 별다른 조치를 취해야했습니다(router의 이벤트를 캡쳐하여 ga 이벤트를 호출 하는 등)

 

 

GA4를 사용하면서 향상된 측정을 사용하는 경우 router의 이벤트를 캡쳐하여 ga에 이벤트를 호출하거나 하는 번거로운일 없이

 

스크립트 로드만으로 모든 설정이 끝납니다