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