[GTM기본] 9. 구글 태그관리자를 통해 스크롤 깊이 이벤트 설정하기

스크롤 이벤트 추적

구글 애널리틱스에서 스크롤 깊이 이벤트 추적은 기본적인 설정 항목에 해당합니다. 특히 콘텐츠 중심의 웹사이트라면 필수적으로 적용해야 합니다. 스크롤 깊이를 추적하면, 사용자가 콘텐츠를 어느 정도 소비했는지를 가늠해 볼 수 있습니다. 또한 이탈률, 종료율, 평균 페이지에 머문 시간 등 GA에서 콘텐츠(페이지)와 관련하여 제공하는 기본 측정항목 지표에 맥락을 더할 수 있습니다.

오늘은 구글 태그관리자(GTM)을 통해 비교적 간단하게 스크롤 이벤트를 추적하는 방법을 설명하도록 하겠습니다.

스크롤 관련 기본 제공 변수 설정하기

구글 태그관리자는 스크롤 이벤트 추적에 사용되는 다양한 변수를 제공합니다. 하지만, 태그 설정 시 이들 변수를 사용하려면 우선 아래와 같이 기본 제공 변수 구성 메뉴에서 사용하고자 하는 변수 항목을 체크 설정해 주어야 합니다.

기본 제공 변수 설정 - 스크롤

구글 태그관리자 계정 내 “작업공간 > 변수” 메뉴 내에서 기본 제공 변수 ‘구성’ 버튼을 클릭합니다.

스크롤 기본 제공 변수

기본 제공 변수 중 스크롤과 관련된 3개의 변수 좌측에 있는 체크박스에 체크 설정을 합니다.

스크롤 이벤트 태그 구성하기

Step 1. ‘태그 이름’ 지정: ‘GA_이벤트_스크롤’ (임의의 이름 지정)
Step 2. ‘태그 유형’ 선택: ‘Google 애널리틱스: 유니버설 애널리틱스’
Step 3. ‘추적 유형’ 선택과 ‘매개변수’ 입력: ‘이벤트’ 유형 선택 후 ‘카테고리’, ‘작업’, ‘라벨’, ‘값’ 등 이벤트 추적 매개변수 입력
Step 4. ‘추적 ID’ 입력: ‘이 태그의 설정 재정의 사용’ 체크 후 표시되는 필드에 해당 ‘추적 ID’ 입력

Step 1. ‘태그 이름’ 지정: ‘GA_이벤트_스크롤’ (임의의 이름 지정)

태그 이름 지정 - 스크롤

‘GA_이벤트_스크롤’ 등 적절한 태그 이름을 지정합니다. 이어서 태그 구성 영역을 클릭합니다.

Step 2. ‘태그 유형’ 선택: ‘Google 애널리틱스: 유니버설 애널리틱스’

태그 유형 선택

태그 유형 선택 화면에서 ‘Google 애널리틱스: 유니버설 애널리틱스’ 항목을 선택합니다.

Step 3. ‘추적 유형’ 선택과 ‘매개변수’ 입력: ‘이벤트’ 유형 선택 후 ‘카테고리’, ‘작업’, ‘라벨’, ‘값’ 등 이벤트 추적 매개변수 입력

스크롤 깊이 태그 구성

추적 유형으로 ‘이벤트’를 선택한 후 ‘카테고리’, ‘작업’, ‘라벨’ 등의 이벤트 매개변수를 아래와 같이 입력합니다.

카테고리: 스크롤
작업: {{Scroll Depth Threshold}}%
라벨: {{Page Path}}

우선 카테고리 이름으로 ‘스크롤’ 등 적절한 이름을 지정합니다. 작업에는 사용자가 움직인 스크롤 깊이를 나타내는 {{Scroll Depth Threshold}} 변수 및 비율을 표시하기 위한 ‘%’ 문자를 담았습니다. 라벨 값으로는 이벤트가 발생한 콘텐츠를 파악할 수 있도록 페이지의 상세 경로를 의미하는 {{Page Path}} 변수를 담았습니다.

유튜브조회나 다른 이벤트 추적과 달리 스크롤 이벤트를 설정할 때는 ‘비 상호작용 조회’ 항목을 ‘참’으로 선택하는 걸 권장합니다. 이 설정 항목은 이탈률 계산에 영향을 미칩니다.

구글 애널리틱스에서 이탈은 사이트에서 발생한 ‘단일 히트(조회) 세션’을 말합니다. 사용자가 웹사이트의 특정 페이지를 방문한 후 추가적인 히트를 발생시키지 않고 떠난 경우 즉, 추가적인 상호작용이 없이 이탈한 경우가 여기에 해당합니다.

특정한 사용자 행동에 대해 이벤트 추적 설정을 하게되면 기본 값(by default)으로 해당 행동이 상호작용으로 분류가 됩니다. 이에 따라 해당 이벤트가 발생한 세션은 이탈에서 제외됩니다.

사용자가 스크롤을 내리는 행위는 상황에 따라 상호작용으로 볼 수도 있고, 그렇지 않을 수도 있습니다. 관심을 갖고 콘텐츠를 읽었다면 상호작용이겠지만, 별 생각 없이 스크롤을 내리고 찾는 정보가 없어 바로 떠날 수도 있습니다.

비 상호작용 조회를 참으로 설정하면 스크롤 이벤트가 상호작용으로 간주되지 않으며, 이탈률도 영향을 받지 않습니다.

애널리틱스 고객센터: 이탈률

Step 4. ‘추적 ID’ 입력: ‘이 태그의 설정 재정의 사용’ 체크 후 표시되는 필드에 해당 ‘추적 ID’ 입력

태그 설정 재정의

이어지는 화면에서 추적 유형으로 ‘페이지뷰’를 선택한 후 ‘이 태그의 설정 재정의 사용’ 체크박스에 체크 후 보여지는 필드에 설치하고자 하는 구글 애널리틱스의 계정의 ‘추적 ID’를 입력합니다.

태그관리자의 사용자 정의 변수 중에 ‘Google 애널리틱스 설정’ 유형의 변수가 있습니다. 이 변수에 구글 애널리틱스 ‘추적 ID’와 기타 기본적인 설정 내역을 담아 놓고 이를 사용하면, 태그를 만들 때마다 매번 추적 ID 입력 및 추가 설정을 할 필요 없이 해당 내역을 쉽게 적용할 수 있습니다.

태그관리자 고객센터: Google 애널리틱스 설정 변수

스크롤 이벤트 트리거 구성하기

Step 1. ‘트리거 생성’ 버튼 클릭
Step 2. ‘트리거 이름’ 지정: ‘스크롤’ (임의의 이름 지정)
Step 3. ‘트리거 유형’ 선택: ‘스크롤 깊이’
Step 4. 트리거 구성

Step 1. ‘트리거 생성’ 버튼 클릭

트리거 생성하기

트리거 메뉴 클릭 후 표시되는 위 화면의 우측 상단에 있는 ‘+’ 버튼을 클릭합니다.

Step 2. ‘트리거 이름’ 지정: ‘스크롤’ (임의의 이름 지정)

트리거 이름 지정

‘스크롤’ 등 적절한 트리거 이름을 지정합니다.

Step 3. ‘트리거 유형’ 선택: ‘스크롤 깊이’

트리거 유형 선택

‘크리거 구성’ 버튼 클릭 후 표시되는 위 화면에서 ‘스크롤 깊이’ 트리거 유형을 선택합니다.

Step 4. 트리거 구성

스크롤 깊이 트리거 구성

이어지는 스크롤 깊이 트리거 구성 화면에서 위와 같이 트리거 조건을 구성합니다.

세로 스크롤 깊이: 체크박스 체크 후 ‘비율’ 선택. 이후 측정하고자 하는 진행간격을 공백 없이 콤마로 구분(25,50,75,100 또는 20,40,60,80,100)하여 입력
트리거 실행 조건: ‘창 로드(gtm.load)’ 선택 – 디폴트 설정
실행 대상: 모든 페이지 – 디폴트 설정

진행률의 경우 페이지의 전체 스크롤 깊이를 기준으로 일정 비율 시점으로 측정을 할 수도 있고, 비율이 아닌 픽셀 값을 지정하여 측정할 수도 있습니다. 유튜브 트리거에서는 시작 또는 완료 시점을 별도로 추적하기 때문에 대체로 100 진행비율을 입력하지 않은 반면, 스크롤 깊이 트리거에서는 100까지 입력합니다.

기본 값으로 웹사이트에 포함된 ‘모든 페이지’를 대상으로 태그가 실행되지만 ‘일부 페이지’ 항목을 선택한 후 특정 페이지 주소를 입력하는 등 트리거 조건을 제한할 수도 있습니다. 예를 들면, 상품상세 페이지 등 페이지 길이가 비교적 긴 페이지에서만 스크롤 이벤트를 추적하는 것입니다.

태그관리자 고객센터: 스크롤 심도 트리거

태그와 트리거 구성을 완료한 화면은 아래와 같습니다.

스크롤 이벤트 태그

실제 수집된 데이터는 구글 애널리틱스의 ‘행동 > 이벤트 > 인기 이벤트’ 보고서에서 확인할 수 있습니다.

스크롤 이벤트 데이터 예시

이벤트 카테고리 및 이벤트 액션 보고서

스크롤 이벤트 데이터 예시

이벤트 카테고리 및 이벤트 라벨 보고서

위 예시에서는 이벤트 액션 값에 {{Scroll Depth Threshold}} 변수 값을, 라벨 값에 {{Page Path}} 변수 값을 담는 등 GTM에서 기본적으로 제공하는 변수를 사용하여 데이터를 수집했습니다. 하지만 라벨 값으로 수집한 페이지 주소는 해당 페이지가 담고 있는 콘텐츠 정보를 잘 나타내지는 못하는데요, 대부분의 사이트가 이와 유사할 것입니다.

아래와 같이 페이지 제목({{pageTitle}})이라는 사용자 정의 변수를 만들고 이를 이벤트 라벨 값으로 데이터를 수집하면 좀 더 직관적으로 콘텐츠 별 이용 행태를 파악할 수 있습니다.

사용자 정의 변수 만들기

‘작업공간 > 변수 > 사용자 정의 변수’ 항목에서 ‘새로 만들기’ 버튼을 클릭합니다.

사용자 정의 변수 만들기

변수 이름(pageTitle)을 지정하고 변수 구성 버튼을 클릭합니다.

사용자 정의 변수 유형

이어서 표시되는 화면에서 ‘자바스크립트 변수’ 유형을 선택합니다.

자바스크립트 변수 구성

전역 변수 이름 입력란에 ‘document.title’ 값을 입력한 후 우측 상단의 ‘저장’ 버튼을 누릅니다. 이렇게 하면 페이지 제목 값을 저장하는 사용자 정의 변수 생성이 완료됩니다.

스크롤 이벤트 태그 구성

스크롤 이벤트 태그 구성 시 라벨 값으로 {{pageTitle}} 사용자 정의 변수를 입력합니다.

스크롤 이벤트 데이터 예시

이벤트 라벨 값으로 페이지 제목을 담은 보고서 예시입니다.

물론 페이지 제목은 GA에서 자동으로 수집되는 측정기준 중 하나에 속합니다. 따라서 별도의 사용자 정의 변수를 만들어 수집하지 않더라도 보조 측정기준으로 언제든지 손쉽게 선택해서 활용이 가능합니다. 하지만 이벤트 데이터를 GA 보고서 또는 구글 데이터 스튜디오를 통해서 보고자 할 때, 대체로 이벤트 카테고리, 액션, 라벨 세 가지 측정기준을 이용하여 보고서를 만들어 사용하기 때문에 위와 같이 라벨 값에 페이지 제목을 담는 방식도 괜찮다고 생각합니다. 다양한 방법을 직접 경험해보고 판단하시면 좋을 듯합니다.

평균 스크롤깊이 측정하기

유튜브 이벤트 추적과 마찬가지로 스크롤 깊이 추적도 특정 콘텐츠의 세부적 이용 행태는 어느 정도 파악이 가능한 반면, 콘텐츠 별 이용 행태를 한 눈에 비교, 분석하기는 어려운 측면이 있습니다. 평균 스크롤깊이를 추적하면 콘텐츠 별 성과를 좀 더 쉽게 측정할 수 있는데요, 그 방법을 설명하도록 하겠습니다.

Step 1. 맞춤 측정항목(‘스크롤깊이’) 만들기
Step 2. 계산된 측정항목(‘평균스크롤깊이’) 만들기
Step 3. ‘맞춤 측정항목’ 태그 설정하기
Step 4. ‘맞춤 보고서’ 만들기

일단 평균 값을 구하려면 계산을 해야 합니다. 먼저 ‘스크롤깊이’라는 맞춤 측정항목을 만들고 여기에 사용자가 각 페이지에서 도달한 스크롤 깊이를 측정하여 수집합니다. 이후 ‘평균스크롤깊이’이라는 이름의 계산된 측정항목을 만들고 ‘스크롤깊이’ 측정항목을 ‘페이지뷰 수’ 측정항목으로 나누어 평균 값을 구합니다.

Step 1. 맞춤 측정항목(‘스크롤깊이’) 만들기

맞춤 측정항목 - 스크롤깊이

먼저 스크롤 깊이 정보를 담을 맞춤 측정항목을 생성합니다.

‘관리 > 속성 > 맞춤 정의 > 맞춤 측정항목’에 들어가서 ‘새 맞춤 측정항목’을 클릭한 후 보이는 화면에서 아래와 같이 설정합니다.

맞춤 측정항목 - 스크롤깊이

‘스크롤깊이’ 등 적절한 이름을 지정하고, 범위로 ‘Hit’, 형식 유형으로 ‘정수’를 선택한 후 ‘저장’ 버튼을 클릭합니다.

Step 2. 계산된 측정항목(‘평균스크롤깊이’) 만들기

맞춤 측정항목을 통해 수집한 스크롤깊이 지표는 누적해서 합산된 수치를 보여줍니다. 페이지 별로 평균 스크롤깊이 지표를 보려면 별도의 계산이 필요합니다. 아래와 같이 구글 애널리틱스의 계산된 측정항목을 활용하여 지표를 구합니다.

계산된 측정항목 - 스크롤깊이

‘관리 > 보기 > 계산된 측정항목 > 맞춤 측정항목’에 들어가서 ‘새 계산된 측정항목’ 버튼을 클릭한 후 설정합니다.

계산된 측정항목 - 스크롤깊이

이름: 평균스크롤깊이(임의의 이름 지정)
외부 이름: calcMetric_avgScrollDepth(임의의 이름 지정)
형식 유형: 퍼센트
공식: {{스크롤깊이}} / {{페이지뷰 수}} / 100

공식에서 사용한 {{스크롤깊이}} 지표는 앞에서 생성한 맞춤 측정항목이며, {{페이지뷰 수}}는 GA에서 기본 값으로 수집되는 측정항목입니다. 맞춤 측정항목의 경우 생성 시 다른 이름을 사용했다면 해당 이름을 적용합니다.

Step 3. ‘맞춤 측정항목’ 태그 설정하기

스크롤 이벤트 태그 구성

평균 스크롤 깊이 추적을 위한 맞춤 측정항목 데이터는 별도의 태그를 생성하여 수집하지 않고 기존 스크롤 이벤트 태그에 ‘맞춤 측정항목’ 설정을 추가하여 수집합니다. ‘이 태그의 설정 재정의 사용’ 체크를 후 추가 설정을 하게되면 기존 Google 애널리틱스 설정 변수의 설정 내역을 상속하면서 추가된 설정 내역이 반영됩니다.

위 화면에서와 같이 맞춤 측정항목 첫 번째 필드인 지수 1에 25라는 상수 값을 입력합니다.(스크롤 트리거 생성 시 스크롤 비율을 25,50,75,100로 선택했기 때문에 측정항목 값으로 25를 입력했습니다. 비율 간격이 20이라면 20을, 10이라면 10을 측정항목 값으로 입력하면 됩니다.)

스크롤깊이 이외에 맞춤 측정항목이 존재하는 경우 해당 정보를 담을 지수가 달라질 수 있으므로 설정에 앞서 확인이 필요합니다.

Step 4. ‘맞춤 보고서’ 만들기

평균스크롤깊이 측정항목은 기본 측정항목이 아니기 때문에 맞춤 보고서를 만들어서 데이터를 확인할 수 있습니다.

맞춤 보고서 - 평균스크롤깊이

‘맞춤 설정 > 맞춤 보고서 > 새 맞춤 보고서’ 버튼 클릭 후 위 화면과 같이 측정기준에 ‘페이지 제목’을 측정항목에 ‘평균스크롤깊이’를 추가합니다. 기타 사용자와 세션, 총 이벤트 수, 순 이벤트 수 등의 측정항목을 추가해도 좋습니다.

맞춤 보고서 예시 - 평균스크롤깊이

측정기준으로 선택한 페이지 제목 별로 평균 스크롤 깊이를 비교적 한 눈에 볼 수 있습니다.

여기까지 스크롤 깊이와 관련한 사용자 행동을 구글 태그관리자를 통해 수집하는 방법을 설명했습니다. 궁금한 사항 혹은 의견은 댓글을 남겨주시거나 이메일(hs.ahead@gmail.com)을 보내주시면 최대한 답변 드리도록 하겠습니다.

—————————————————————————

국내 대표적인 온라인마케팅 커뮤니티/매체인 아이보스에서 구글 애널리틱스 4(GA4) 강의를 진행하고 있습니다. 커리큘럼 등 자세한 사항은 아래 링크를 참조하세요.

GA4 실무과정: https://www.ibossedu.co.kr/edu-goods-380

GA4 구축 문의하기(오컴데이터)
GA4 기업교육 문의하기(오컴데이터)

[GTM기본] 9. 구글 태그관리자를 통해 스크롤 깊이 이벤트 설정하기