GTM을 이용해 스크롤 이벤트 측정하기
GTM Scroll, Visibility 스터디
개요
현지인에게 하는 질문 공간
현지인과 하고 싶은 액티비티를 보여주는 공간서비스를 운영하다 문득 놓치고 있는 것이 생각났다. 현재는 메인 페이지에서 다음 페이지로 이동하는 비율만 고려하고 있는데, 그전에 측정할 수 있는 한 단계 스텝이 더 있었다. 팁탭트립 메인 페이지에는 현지인에게 글을 공유하는 공간과, 해외여행을 갈 경우 현지인과 하고 싶은 액티비티를 간편하게 등록하는 공간이 있다. 이 두 가지 기능은 피드 형식으로 데이터가 보여주며 스크롤을 끝까지 내릴 경우 다음 데이터를 불러오고 있다. 그리고 GA를 붙여서 해당 페이지에서 다른 페이지로 이동할 경우를 측정하고 있다. 하지만 스크롤을 내리는 행위 자체는 GA를 통해 측정하지 못한다. 물론 자바스크립트를 통해 스크롤의 움직임을 계속 확인하면서 원하는 위치까지 스크롤을 내렸을 경우 GA 이벤트를 발생시킬 수는 있다. 하지만 계속해서 이벤트가 발생하는지 측정하는 행위는 상당히 비용이 많이 드는 행위이다. GTM을 이용해 편하게 이를 측정하기로 했다.
GTM Scroll 트리거
Down Scroll Trigger 모습을 추가한 상태GTM트리거 중 스크롤의 이벤트를 측정하는 Scroll 이벤트 트리거가 있다. 이를 이용하면 간단히 스크롤 이벤트를 측정하는 트리거를 만들 수 있다. 또한 이벤트를 발생한 것을 GA에 쌓아서 확인할 수 있다.
Scroll 트리거 만들기
스크롤 트리거를 GA가 인식하게 만들기 위한 절차는 다음과 같다.
1. Scroll 트리거를 만들기 위해서는 기본 제공 변수에 Scroll 관련 이벤트를 추가해주어야 한다.
2. 트리거 구성해서 트리거 유형을 스크롤로 지정 후, 세로 스크롤 깊이를 선택해주면 된다. 스크롤 높이(비율)를 너무 작게 잡으면 페이지 도달과 동시에 스크롤 이벤트가 발생하기 때문에 적절한 높이를 설정해주면 된다. 처음에는 75%로 지정해 주었다.
3. 스크롤 이벤트가 발생했을 때 GA로 보내는 태그를 만든다.
비디오 변수 추가 후
트리거 등록 화면
태그 등록 화면문제 발생
알 수 없는 문제가 발생했다. 스크롤 이벤트 발생 위치가 99% 미만일 경우(스크롤이 1~98%에 도달했을 때 이벤트가 발생한다고 트리거를 만들었을 경우) 페이지 도달과 동시에 이벤트가 발생했다. 또한 현재 모든 피드가 내려가면 다음 데이터를 불러오는데 그 속도가 빨라서인지 99% ~ 100% 일 때 이벤트를 발생한다고 설정하면 모든 데이터를 불러와 스크롤이 맨 아래로 도달할 때까지 이벤트가 발생하지 않았다.
대안은 무엇이 있는가?
한 동안 대안을 찾다가 태그 매니저의 트리거 중 Visibility가 있다는 것을 확인했다.
Visibility
요소가 보이면 이벤트가 발생하는 Visibility 트리거rVisibility는 간단하다. 사용자가 웹서핑을 하다가 특정 부분을 확인하면 트리거가 발생한다. 트리거를 발생시키는 특정 부분은 2가지로 측정할 수 있는데 첫 번째는 ID이다. 두 번째는 CSS selector이다. 트리거는 페이지 당 한 번 실행시킬 수 있고 요소 당 한 번 발생시킬 수도 있다. 요소 당 한 번은 한 페이지에 같은 요소가 여러 가지 있고 모두 이벤트로 사용하고 싶을 때 사용자가 볼 때마다 트리거가 발생한다. 마지막으로 요소가 보일 때마다는 말 그대로 한 페이지에서 요소가 보일 때마다 이벤트가 발생한다. 첫 데이터를 불러오는 영역 가장 아래 부분에 특정 아이디를 지정해주고 이를 이용해 이벤트를 측정했다.
결과
Page Scroll이벤트가 정상적으로 발생하는 모습성공적으로 이벤트 트리거가 작동했고 GA에 데이터가 저장되는 것을 확인했다. 이제 테스트를 통해 개선할 지표는 다음 두 가지이다.
1. 방문 대비 스크롤 이벤트 발생률 개선
2. 방문 대비 이탈률 개선
