GA4 스크롤 이벤트 커스텀하기
GA4는 스크롤 이벤트를 자동으로 수집해줍니다.
스크롤 이벤트를 포함해 페이지 조회, 이탈 클릭, 사이트 검색, 동영상 반응, 파일 다운로드는 속성에서 향상된 측정 기능만 켜준다면 자동으로 수집됩니다. 그러나, 스크롤의 경우 GA4는 전체 세로 스크롤의 90% 지점에 도달했을 경우만 수집합니다. 25%, 50%, 75% 지점과 같이 90% 이외의 다른 지점까지 도달한 경우를 추가적으로 보고 싶다면, 또는 가로 스크롤을 얼마나 사용했는지 알고싶다면 어떻게 해야할까요?
스크린샷 2022-06-29 오후 2.45.40.png
구글 태그 매니저(Google Tag Manager, GTM)을 이용해 다양한 스크롤 지점에서 이벤트를 수집하도록 설정해봅시다.
GTM을 이용해 스크롤 태그 만들기
스크롤 태그를 만드는 일은 생각보다 간단합니다. GTM에서 스크롤 깊이 기준(Scroll Depth Threshold)를 기본 제공 변수로 지원하기 때문인데요. 이 변수를 이용해 스크롤을 특정 지점까지 이동했을 때 이벤트를 전송하는 태그를 설정해보겠습니다.
변수 설정
스크롤 깊이 기준(Scroll Depth Threshold) 변수는 변수 탭에서 구성을 클릭하고 Scroll Depth Threshold 옆 체크박스를 눌러 활성화하면 사용할 수 있습니다.
스크린샷 2022-06-29 오후 3.13.33.png
스크린샷 2022-06-29 오후 3.13.49.png
태그 만들기
태그 만들기가 처음이신 분들을 위해 잠깐 설명을 덧붙여보자면, 태그 만들기는 크게 2가지 섹션(’태그 구성', ‘트리거')으로 나누어져 있습니다. ‘태그 구성’에서는 이벤트의 이름, 해당 이벤트가 전송될 때 같이 전송되는 정보(이벤트 매개변수) 등을 설정하고 ‘트리거'에서는 이 이벤트가 발생하는 조건(예. 특정 페이지에 방문)을 설정합니다.
태그 탭에서 새로 만들기를 클릭합니다.
태그 이름을 설정합니다. 아래 예시에서는 Scroll Depth 라고 적어주었습니다.
스크린샷 2022-06-29 오후 3.29.57.png
태그 구성 설정하기
태그 구성 박스를 클릭하고 태그 유형 중 Google 애널리틱스: GA4 이벤트를 선택합니다.
스크린샷 2022-06-29 오후 3.30.06.png
구성 태그 중 Google 애널리틱스 GA4 구성을 선택합니다. 이 단계는 지금 만들고 있는 스크롤 이벤트가 이미 세팅해놓은 구성 태그의 GA4 속성으로 연결될 수 있도록 합니다.
이벤트 이름을 설정할 때, 기본 제공 변수를 이용하기 위해 레고 블럭 아이콘을 클릭합니다. 그리고 Scroll Depth Threshold를 선택합니다. 이 설정을 통해 스크롤 깊이 정보(25, 50, 75 등)를 변수에서 받아와 이벤트 이름으로 사용할 수 있게 됩니다.
스크린샷 2022-06-29 오후 3.31.07.png
{{Scroll Depth Threshold}}가 이벤트 이름에 자동 입력 되었습니다. Scroll Depth Threshold라는 변수의 값(25, 50, 75 등)을 이벤트 이름으로 적겠다는 약속이 되었다고 이해하시면 됩니다. 여기에 ‘% Scroll’ 이라고 추가로 적어주면 나중에 ‘25% Scroll’, ‘50% Scroll’, 75% Scroll’ 이라는 이벤트들이 만들어집니다.
스크린샷 2022-06-29 오후 4.23.56.png
아래에 이벤트 매개변수, 사용자 속성 등을 추가로 설정할 수 있습니다. 하지만 스크롤 이벤트의 경우 자동으로 수집되는 매개변수(언어, 페이지 주소, 레퍼러, 페이지 제목 등) 이외의 정보는 불필요하므로 이 단계는 생략하겠습니다.
스크린샷 2022-06-29 오후 3.32.24.png
트리거 설정하기
트리거 박스를 클릭하고, 이어서 화면 오른쪽 파란색 + 버튼을 클릭합니다. 특정 스크롤 깊이에 도달했을 때 동작하는 트리거를 만들어 봅시다.
스크린샷 2022-06-30 오후 1.32.17.png
스크린샷 2022-06-30 오후 1.31.11.png
트리거의 이름을 정해줍니다.
스크린샷 2022-06-29 오후 3.33.40.png
트리거의 유형을 선택합니다. 사용자 참여 섹션에 ‘스크롤 깊이'를 선택해주시면 됩니다.
스크린샷 2022-06-30 오후 1.34.35.png
세로 스크롤 깊이를 선택하고, 비율에 25,50,75 를 입력합니다. 스크롤을 내려 전체 페이지의 25%, 50%, 75%에 도달했을 때 동작하는 트리거를 만들기 위함입니다. 이외에는 기본으로 되어있는 세팅을 수정하지 않고 저장 버튼을 눌러줍니다. 만약, 이 트리거가 특정 페이지에서만 실행되도록 만들고 싶다면 ‘이 트리거는 다음에서 실행됩니다.’ 항목에서 ‘일부 페이지'를 선택하고 추가 설정을 해주시면 됩니다.
스크린샷 2022-06-30 오후 1.35.41.png
이어 태그까지 저장해주면 Scroll Depth 라는 이름을 가진 새로운 태그가 만들어집니다! 하지만 아직 웹사이트에는 반영되지 않았습니다.
미리보기
GTM은 수정한 내용을 웹사이트에 반영하기 전에 태그가 잘 작동하는지 미리 볼 수 있는 기능을 제공합니다. 화면에서 ‘미리보기' 버튼을 클릭해주세요.
스크린샷 2022-06-30 오후 2.22.53.png
‘Connect’ 버튼을 클릭해주세요.
스크린샷 2022-06-30 오후 2.28.26.png
기존 화면이 Connected! 로 바뀌고, 연결된 웹사이트가 새 탭으로 열리면 테스트 연결이 시작된겁니다. 웹사이트에서 스크롤을 아래로 내려보세요.
스크린샷 2022-06-30 오후 2.29.19.png
스크린샷 2022-06-30 오후 2.28.52.png
스크롤을 내리면 Summary 에 Scroll Depth 이벤트가 생깁니다. 이 이벤트를 클릭해봅시다.
스크린샷 2022-06-30 오후 2.29.37.png
Tags Fired 목록에 우리가 설정한 태그가 보입니다. 클릭해봅시다.
스크린샷 2022-06-30 오후 2.35.43.png
앞에서 설정한 내용들을 볼 수 있습니다.
스크린샷 2022-06-30 오후 2.36.02.png
앞으로 돌아와, Data Layer 탭도 클릭해봅시다. 25% 지점에서 저장된 이벤트라는 것을 ‘scrollThreshold’ 의 값에서 확인할 수 있습니다.
스크린샷 2022-06-30 오후 2.36.47.png
새 버전 제출하기
축하합니다! GTM으로 커스텀 스크롤 이벤트 만들기가 거의 완성되었습니다.
GTM 콘솔 화면으로 돌아와 제출 버튼을 누르고 새로운 버전을 게시해주세요.
스크린샷 2022-06-30 오후 2.43.41.png
지금까지 GTM으로 25%, 50%, 75% 퍼센트 스크롤 지점에서 이벤트를 수집하는 새로운 태그를 만들어 보았습니다. 데이터가 GA4 대시보드에 반영되기까지 최소 24 시간에서 최대 48시간이 소요되니 대시보드에서 스크롤 이벤트를 바로 확인하지 못하더라도 너무 놀라지 마세요! GA4의 실시간 대시보드에서는 조금 더 빨리 새롭게 수집되는 스크롤 이벤트를 볼 수 있습니다.
혹시 이 글을 읽으면서 구성, 이벤트, 매개변수, 트리거 같은 용어들이 생소했다면 참고 자료에서 ‘GA4 태그' 문서를 읽어보시길 권합니다.
참고 자료
GA4 공식 문서: Google Analytics 4 tags (GA4 태그)
GA4 공식 문서: Automatically collected events (자동으로 수집되는 이벤트)
GTM 공식 문서: Built-in variables for web containers (기본 제공 변수)
https://www.optimizesmart.com/how-to-set-up-scroll-tracking-in-ga4/


conversion_type

시리즈 내 순서

conversion_text

멤버 전용

대표 이미지

공개 가능

작성일

예상 읽기 시간

전환 텍스트

글쓴이

시리즈

상단 노출

전환 유형

요약

제목

데이터리안 웹사이트

GTM을 이용해 스크롤 태그 만들기

구글 태그 매니저(GTM)을 이용해 다양한 스크롤 지점에서 이벤트를 수집하도록 설정해봅시다.

GA4 스크롤 이벤트 커스텀하기

GA4 스크롤 이벤트 커스텀하기

Contents

함께 읽어보면 좋은 글

Google BigQuery (1) 빅쿼리에 데이터를 연결하는 3가지 방법

실무 GA4 필수 설정 (4) 데이터 보관 기간 늘리기

GA4가 활성 사용자 수를 세는 방식 총정리 [심화편]

데이터 분석 소식을
한 달에 한 번 받아보세요

GA4 스크롤 이벤트 커스텀하기

Contents

함께 읽어보면 좋은 글

Google BigQuery (1) 빅쿼리에 데이터를 연결하는 3가지 방법

실무 GA4 필수 설정 (4) 데이터 보관 기간 늘리기

GA4가 활성 사용자 수를 세는 방식 총정리 [심화편]

데이터 분석 소식을 한 달에 한 번 받아보세요

데이터 분석 소식을
한 달에 한 번 받아보세요