스크롤 이벤트 태깅

이번 강의에서는 구글 태그매니저를 활용하여 스크롤 이벤트를 추적하는 방식에 대해 알아보겠습니다.

스크롤 이벤트를 추적하면 페이지에서 스크롤이 어디까지 내려가는지를 정량적으로 파악할 수 있습니다. 이를 활용하여 콘텐츠의 완독률을 계산하거나 페이지 구성요소의 배치 위치를 정하는데 참고할 수 있습니다.

기본 변수 추가

페이지의 스크롤 정보를 가져오기 위해 구글 태그매니저에서 기본 제공 변수를 추가합니다.

구글 태그매니저 스크롤 기본 변수 추가

스크롤 이벤트에 필요한 변수는 3가지가 존재하며, 각 변수에 대한 설명은 다음과 같습니다.

  • Scroll Depth Threshold : 트리거 생성 시 정의한 25, 50, 75, 100(%) 등과 같은 페이지 길이를 기준으로 한 스크롤을 내린 비율 값이 입력됩니다.
  • Scroll Depth Units : 스크롤을 감지에 정의한 percent, pixel과 같은 기준 값이 입력됩니다.
  • Scroll Direction : 스크롤 방향으로 vertical, horizontal 값이 입력됩니다.

이벤트 태깅에 필요한 변수는 [Scroll Depth Threshold]이므로 해당 변수만 추가합니다.

구글 태그매니저 Scroll Depth Threshold 변수 생성

스크롤 트리거 생성

스크롤 이벤트를 감지할 트리거를 생성하기 위해 [트리거] 메뉴에서 [새로 만들기]를 클릭합니다.

구글 태그매니저 스크롤 트리거 생성

트리거 유형은 [스크롤 깊이]로 선택합니다.

구글 태그매니저 스크롤 깊이 트리거

[세로 스크롤 깊이][비율]을 선택한 후 [25,50,75,100]을 입력합니다.

전체 페이지 길이에서 스크롤을 25%, 50%, 75%, 100% 내릴 때마다 이벤트를 수집합니다.
보다 세부적으로 데이터를 수집하기를 원한다면 1~100 사이의 값을 더 추가할 수 있습니다.

구글 태그매니저 스크롤 비율 설정

트리거 실행 조건에 대한 기준은 3가지가 있습니다. 조건으로 설정한 시점에 트리거가 실행되면서 전체 페이지 길이를 최초 1회 계산합니다.

간혹, 페이지 내에 컨텐츠가 늦게 생성되는 페이지의 경우에는 스크롤 길이가 제대로 계산이 되지 않을 수 있습니다. 이 경우에는 아래 실행 조건을 변경하면서 스크롤 트리거 발동 시점을 늦추는 것을 권장드립니다.

  • 트리거 실행 속도(가장 빠른 순) : 컨테이너 로드(gtm.js) -> DOM 사용 가능(gtm.dom) -> 창 로드(gtm.load)

트리거에 페이지 조건 추가

위에서 작업한 내용으로 트리거를 생성할 경우, 모든 페이지에서 스크롤 이벤트를 수집하게 됩니다.

이번 강의에서는 게시글에서만 스크롤 이벤트를 수집할 것이므로 페이지에 대한 조건을 아래와 같이 추가하도록 하겠습니다. 사이트 별로 URL 구조는 제각각이지만 DA-cha-TA의 게시글 URL에는 아래와 같이 /post/라는 단어가 포함되어있습니다.

https://dachata.com/universial-analytics/post/google-analytics-scroll-tagging

이 패턴을 이용해서 아래와 같이 URL 조건을 추가하는 것이 가능합니다.

구글 태그매니저 스크롤 트리거 조건 추가

Trigger 조건은 "포함" 뿐만 아니라 정규식, 시작, 일치 등 다양한 방식으로 설정할 수 있습니다.

스크롤 태그 생성

페이지 조건 설정 후 트리거를 생성했으면, 이제 구글 애널리틱스로 데이터를 전송하는 태그를 생성합니다.

구글 태그매니저 스크롤 태그 생성

태그 생성창에서 아래의 순서로 태그를 생성합니다.

  1. 태그 유형 선택 : Google 애널리틱스 유니버셜 애널리틱스
  2. 추적 유형 변경 : 이벤트
  3. 카테고리, 작업, 라벨 입력 : 라벨의 경우에는 스크롤 비율을 가져오는 변수인 Scroll Depth Threshold를 추가합니다.
  4. Google 애널리틱스 설정 변수 지정
  5. 스크롤 트리거 지정
  6. 태그명 입력 후 저장

구글 태그매니저 스크롤 이벤트 태그 생성

태그가 생성되었다면 변경된 내용을 [제출]합니다.

구글 태그매니저 스크롤 트리거 제출

구글 애널리틱스의 [실시간] -> [이벤트] 보고서에서 스크롤을 내릴때 데이터가 수집되는 것을 확인할 수 있습니다.

구글 애널리틱스 이벤트 보고서 스크롤 데이터

다음 강의에서는 요소 공개 이벤트 데이터를 수집하는 방법에 대해 다루겠습니다.

자주 묻는 질문

구글 태그매니저의 [스크롤 깊이] 트리거는 [트리거 실행 조건]에 설정한 시점에 페이지의 전체길이를 최초 1회 계산합니다. 따라서, 해당 시점 이후에 페이지 길이가 변경이 되더라도 스크롤 깊이 트리거에서 사용하는 페이지 길이는 변경되지 않습니다.

사이트의 길이 변경이 많은 페이지에는 [스크롤 깊이] 트리거를 활용하는 것 보다는 각 영역에 대해 [요소 공개] 트리거를 활용한 이벤트 태깅을 진행하는 것도 좋은 대안이 될 수 있습니다.

[스크롤 깊이] 트리거는 무조건 낮은 비율이 먼저 발동됩니다. 보고있는 페이지의 스크롤을 내린 뒤, 이동한 다음 페이지에서 '뒤로가기'를 한다면 이전 페이지의 스크롤이 그대로 유지되어 있는 경우가 많습니다.

이때, 스크롤이 75%까지 내려온 상황이더라도 [스크롤 깊이] 트리거는 낮은 비율 순으로 25% -> 50% -> 75%와 같이 순차적으로 작동됩니다.

guest
12 댓글
오래된 순
최신 순 평가 순
Inline Feedbacks
모든 댓글보기
John

맨 아래 '자주 묻는 질문'의 '스크롤 깊이 트리거의 작동 원리는?'에서요 그렇다면 스크롤이 75% 내려온 상황에서는 25% -> 50% -> 75% 이렇게 본 것으로 기록되는 것인가요 아니면 애초에 75%에서 페이지를 마주했기 때문에 25%를 지나지 않았다고 여겨서 기록이 되지 않는 것인가요?

John

답변 감사합니다! 쭉 공부중인데 자주 묻는 질문까지 내용이 매우 알차서 책으로 나오면 바로 구매할 것 같습니다.

John

페이지별 스크롤%를 보려면 라벨에 {{Page Path}}를 넣고 값에 {{Scroll Depth Threshold}}를 넣으면 되나요?

마지막 수정 1 년 전 by john
John

감사합니다 덕분에 잘 이해했습니다! GA4도 열심히 해봐야겠네요

Data

GA4 에서 스크롤 깊이 추적하는것도 동일한 원리인가요?

마법바지

저 혹시 페이지마다 길이가 다른데 어떤 기준으로 25,50,75,100을 나누는 건가요? 자동으로 시작과 끝이 0과 100으로 설정되는 건가요? 아니면 따로 페이지 길이를 계산하여 나누는건가요?