SPA 환경에서 GTM을 활용하여 스크롤 추적하는 방법
그로스해킹과 데이터 기반 퍼포먼스 마케팅
SPA 환경에서 스크롤 추적 구현하기안녕하세요. 그로스마케팅 파트너 허들러스의 유준혁 그로스 엔지니어입니다. 이번 글에서는 스크롤 추적을 하는 것이 왜 중요한지, 그리고 SPA 환경에서 GTM을 활용하여 스크롤 이벤트를 트래킹 할 수 있는 방법에 대해서 말씀드리겠습니다.
스크롤 추적이란?
스크롤 추적의 정의스크롤 추적은 페이지나 웹사이트를 탐색할 때 웹사이트 방문자의 스크롤 동작을 추적하는 웹사이트 분석 기술입니다. 사용자가 스크롤한 페이지의 비율과 스크롤 깊이를 추적하는 것을 의미합니다.
스크롤 추적이 필요한 이유
스크롤 추적이 중요한 몇 가지 이유는 다음과 같습니다.
1) 사용자 참여도 측정 : 스크롤 깊이를 추적하여 사용자가 페이지와 상호 작용하는 방식과 페이지의 어떤 부분이 가장 참여도가 높은지에 대한 통찰력을 얻을 수 있습니다. 이 정보는 사용자 경험을 최적화하고 전환율을 높이는 데 도움이 될 수 있습니다.
2) 콘텐츠 기회 식별 : 스크롤 데이터를 분석하여 콘텐츠 기회와 사용자가 관심을 잃을 수 있는 영역을 식별할 수 있습니다. 예를 들어 사용자가 페이지의 특정 지점에서 스크롤을 멈추는 경향이 있는 경우 사용자의 참여를 유지하기 위해 해당 영역에 더 매력적인 콘텐츠를 추가해야 할 수 있습니다.
3) 웹사이트 성능 최적화 : 스크롤 동작을 추적하여 성능 문제를 일으킬 수 있는 페이지 영역을 식별할 수 있습니다. 예를 들어 사용자가 페이지의 이미지가 많은 섹션을 스크롤하는 데 많은 시간을 소비하는 경우 페이지 로드 시간을 개선하기 위해 이미지 로드를 최적화해야 할 수 있습니다.
4) 디자인 결정 확인 : 스크롤 동작을 추적하여 디자인 결정을 확인하고 다양한 레이아웃을 테스트하여 어떤 레이아웃이 사용자 참여에 가장 효과적인지 확인할 수 있습니다.
결론적으로 스크롤 추적이 중요한 이유는, 웹 사이트에 들어온 사용자가 어떤 동작을 하는지에 대해 통찰력을 얻고, 사용자 경험을 최적화하는 데 도움이 되는 중요한 데이터를 제공해 주기 때문입니다.
스크롤 추적 구현 방법(GTM 활용을 통해, 1분 만에 작업하기)
일반적인 웹 사이트에서 GTM을 통한 Google Analytics 이벤트 전송하는 방법은 아래와 같습니다.
1) ‘스크롤’ 변수 구성
Google Tag Manager 컨테이너에서 ‘변수’로 이동하여 기본 제공 변수인 ‘스크롤’ 변수를 모두 구성합니다.
스크롤 추적 구현 방법 – 1단계[스크롤 변수 설명]
Scroll Depth Threshold : 스크롤 깊이 추적 이벤트를 트리거하기 위해 사용자가 스크롤해야 하는 페이지의 퍼센트입니다. ( ex. 25, 50, 75, 90 )
Scroll Depth Units : 스크롤 깊이를 추적하는 데 사용되는 측정 단위를 결정합니다. GTM은 퍼센트, 픽셀 및 뷰포트 퍼센트의 세 가지 옵션을 제공합니다. ( ex. 퍼센트, px )
Scroll Direction :스크롤 방향을 지정할 수 있습니다. ( ex. 가로, 세로 )
2) ‘스크롤 깊이’ 트리거 구성
스크롤 깊이 트리거를 설정하려면 트리거 창에서 ‘새로 만들기’를 클릭하고 트리거 유형으로 “스크롤 깊이”를 선택합니다.
스크롤 추적 구현 방법 – 2단계그 후, 스크롤 방향에 따른 원하는 비율을 구성합니다.
스크롤 추적 구현 방법 – 3단계3) 애널리틱스 이벤트 태그 구성
생성한 트리거와 함께 애널리틱스 이벤트를 구성합니다.
[ 이벤트 명 ] – 예시
scroll
[ 매개변수 ] – 예시
매개변수 이름 : scroll_depth
매개변수 값 : {{Scroll Depth Threshold}}
스크롤 추적 구현 방법 – 4단계4) 애널리틱스 데이터 확인
마지막으로 애널리틱스 이벤트에서 매개변수 이름과 매개변수 값이 잘 들어오는지 확인합니다.
일반적인 웹 사이트 환경에서 GTM을 통한 스크롤 추적은 어렵지 않게 할 수 있습니다. 그렇다면, SPA 환경에서도 위와 같은 방식으로 스크롤 추적을 할 수 있을까요?
직접 세팅을 해보기 전에, 우리는 SPA 환경에 대한 간단한 이해가 필요합니다.
SPA(Single Page Application) 환경에 대하여
SPA는 Single Page Application의 약어로, 모던 웹 애플리케이션 개발에서 많이 사용되는 기술입니다.
SPA를 그대로 직역하자면 단일 웹페이지로 구성된 애플리케이션을 의미합니다. SPA는 첫 서버에 요청 보낼 때 ( Initial Request ) 모든 필요한 리소스를 ( ex. html, css, javascript ) 로드시켜줍니다.
SPA는 필요할 때마다 서버에 요청을 보내서 반환된 데이터로 사이트 내용을 갱신합니다. 이렇게 되면 전체 페이지를 새로 고침 하지 않고, 첫 요청 때 로드된 화면에서 많은 기능을 사용할 수 있게 됩니다.
반면에, 기존 웹 사이트들은 데이터가 변경될 때마다 완전히 새로운 페이지로 구성됩니다.
데이터가 변경되거나 서버로 데이터가 전송되면 브라우저에 새 페이지가 표시됩니다.
SPA 환경에서 스크롤 추적
Google 태그 관리자(GTM)는 스크롤 깊이 트리거를 편리하게 제공하여 사용자가 페이지를 얼마나 아래로 스크롤했는지 확인합니다. 그러나 스크롤의 비율(Threshold)을 재설정하기 위한 전체 페이지 로드가 없기 때문에 이 스크롤 깊이 트리거는 단일 페이지 앱(SPA) 기술을 사용하는 웹 사이트에서는 작동하지 않습니다.
즉, 아래로 스크롤하여 최대 스크롤 비율(Threshold)에 도달한 뒤 페이지를 이동해도 페이지 로드가 안되기 때문에 뒤따른 페이지들의 스크롤 추적이 작동하지 않습니다.
따라서 GTM에서 기본적으로 제공해 주는 스크롤 추적 트리거가 작동하지 않기 때문에 다른 방식으로 추적해야 합니다.
1) 추적 플러그인 다운로드하기
링크를 누른 다음 오른쪽 버튼을 클릭하여 “다른 이름으로 저장”을 선택하여 파일을 컴퓨터에 저장합니다.
2) 파일 GTM 컨테이너로 가져오기
SPA 환경에서 스크롤 추적 구현 방법 – 1단계3) 기존 버전과 병합하기
SPA 환경에서 스크롤 추적 구현 방법 – 2단계4) 원하는 비율로 수정
코드 하단부에 있는 percentages에 추적하고자 하는 비율을 입력합니다. ( ex. 10, 20, 65, 82 … )
SPA 환경에서 스크롤 추적 구현 방법 – 3단계
SPA 환경에서 스크롤 추적 구현 방법 – 4단계5) GA4 아이디 입력
트래킹 하고자 하는 GA4 아이디를 입력합니다.
SPA 환경에서 스크롤 추적 구현 방법 – 5단계적용이 완료되었으면, 미리 보기 모드를 통해 사이트에 접속하여 정상적으로 작동하는지 확인합니다.
HURDLERS – [맞춤 HTML] custom_scroll_tracking 태그 내에서 원하는 비율을 설정할 수 있습니다. 기본값으로 25, 50, 75, 90 실행되도록 설정이 되어있습니다. 따로 설정이 필요 없으신 분들은 GA4 아이디만 입력해주시면 되겠습니다.
해당 글은 그로스 마케팅 파트너 허들러스와 모비인사이드의 파트너쉽으로 제공되는 기사입니다.
