GTM(구글태그매니저)로 스크롤뎁스(Scroll Depth) 이벤트 세팅하는 법

안녕하세요~ 오늘은 GTM(구글태그매니저)를 이용해서 Scroll Depth 이벤트를 세팅하는 법에 대해 알아보려고 합니다. 

Scroll Depth는 내 페이지를 어느정도 내려다보는지에 대한 데이터를 볼 수 있는데요. 

주요지표로 보기에는 다소 무리가 있는 이벤트이긴하지만, Hotjar의 레코딩이나 히트맵을 통해 이탈률을 함께보면 괜찮은 보조 지표로써는 괜찮은 데이터라고 생각합니다. 

 

그럼 세팅해보도록 하겠습니다. 

 

이번에도 변수로 먼저 들어가주세요. 그리고, 구성을 눌러서, Scrolling에서 3가지를 다 체크해주세요.

그리고 바로 트리거로 넘어가겠습니다.

 

저는 지난 포스팅으로 작성한, 트리거가 발동하지 않은 이유에 대한 페이지의 Scroll Depth만 잡아보도록 할게요. 

(마케팅 스쿨에서 배워보니까, 모든 페이지에 Scroll Depth를 태깅할 경우, 전체적으로 페이지가 많이 느려진다고 해서,

특정 페이지의 데이터를 보기위한 정도로 사용하시면 될 것 같아요) 

2020/05/19 - [구글태그매니저(GTM)] - GTM(구글태그매니저) 태그가 터지지 않는 이유 그리고 어떻게 해결할 수 있을까?

 

저는 트리거 이름을 제가 붙인 고유 Path 값 - scroll depth + trigger 로 지정하였습니다. ( 이름짓는건 개개인의 특성) 

트리거 이름을 작성해주시고, 오른쪽에 scroll depth를 클릭해주세요. 

자 그럼 위의 사진을 바탕으로 순서대로 세팅해보록 하겠습니다. 

먼저, Vertical은 수직 , Horizontal은 수평 

그러니까, 첫 번째는 수직 스크롤을 퍼센트로 볼 때 선택하는 거고, 두 번째는 수평 스크롤을 확인하고 싶을 때 선택하는 것입니다. 

다음으로, 이 scroll depth가 어느 시점에서 터지기를 원하는지 세팅을 하는 단계인데요. 

gtm의 container가 load가 된 순간부터 scroll depth이 터지는건지, DOM Ready가 되고나서인지, Window Load가 다 실행되고나서 인지 체크를 해주는 거라고 이해하시면 될 것 같아요. 

 

제 목적인 window load까지 다 되고, 펼쳐진 제 포스팅 페이지를 어느정도 봤는지 알고 싶기 때문에, window load로 체크했습니다. 

그리고 다음으로 모든 페이지를 볼 건지, 특정 페이지를 본 건지에 대한 조건을 넣는 건데, 아까 위에서 설명했듯이, scroll depth가 모든 페이지에 작동이 될 경우, 페이지가 로딩되는 속도가 현저히 느려진다고 하고, 또 모든 페이지의 scroll depth를 볼 필요도 없어서, 저는 특정 페이지 (제가 설정한 태그가 실행안될경우의 페이지)만 보도록 세팅하였습니다.  

저는 페이지를 어느정도 읽느냐가 목적이기 때문에, Vertical scroll depth로 선택을 했고, 퍼센트는 33,66,99로 그냥 지정했습니다. 하지만, scroll depth를 조금 더 정교하게 사용하고 싶으시다면, 글이나 이미지 등 기준점을 잡으시고, 그게 어느 퍼센트 지점인지 찾고나서 세팅을 하시면 좀 더 확실한 데이터로 사용하실 수 있을거라고 생각해요. 

 

트리거를 저렇게 세팅을 하고, 미리보기를 실행해서 트리거가 올바르게 터지는지 확인을 해보겠습니다.

트리거가 터진 것을 확인할 수 있습니다. 특정 페이지로 조건을 세팅했기 때문에, 혹시 모르니, 다른 페이지에서는 scroll depth가 터지지 않는 것까지 확인하시길 바랍니다.

그럼 이제 트리거가 제대로 작동하는 것까지 확인을 하였으니, 태그를 만들어보겠습니다. 

태그 이름은 scroll depth는 특정행동을하는 이벤트라고 생각을 해서, GA의 event 그리고 트리거의 이름을 고대로 붙여줬습니다. 

카테고리는 scroll , 액션은 어떤 페이지의 scroll인지를 알기위해서, url의 앞부분을 뺀 path 값으로 지정했습니다. (저는 평소에 포스팅을 올릴 때, path값을 항상 제가 알아볼 수 있는 문장으로 바꿔놓기 때문에, 이게 보기 수월하겠다라는 생각으로 구성했습니다 여러분 또한, 어떻게 하면 데이터를 잘 정리해서 간편하게 볼 수 있을지 생각해보시면 좋을 것 같아요.)

반응형

 

그리고 라벨 부분에서는 {{scroll depth threshold}} 뒤에 %를 붙였는데, 이렇게 세팅을 하게 되면, GA에는 제가 아까 퍼센트를 책정한 33,66,99와 함께 %가 붙으면서, 이벤트가 터질 때마다, 33%, 66%, 99% 식으로 GA에 데이터가 쌓이게 됩니다. 

그리고 비 상호작용이 맞다라고 체크를 했는데, 예를 들어, 조금만 내려도 이벤트가 터져서, 그걸 상호작용이라고 인식해버리면 이탈률에 영향을 받게되서, 일부러 비상호작용이다라고 체크했습니다. 

 

그럼 scroll depth 태그 세팅이 완료가 되었는데요. 이제 마지막으로 태그가 잘 터지는지 확인해보러가겠습니다.

refresh를 눌러주시고, 페이지로 이동하겠습니다.

보시면 태그가 정상적으로 잘 터지는걸 확인하실 수 있죠? 그리고 scroll depth의 경우는 33,66,99 총 3번의 이벤트가 터지기 때문에, 태그도 3번 작동해야하는데요. 그걸 확인하는 부분은 저기 빨간색 상자 아래쪽에 fired 3 time(s)라고 써저있는게 보이시죠? 저게 3번 작동했다는 소리입니다. 

 

그럼 이것으로 scroll depth 이벤트 세팅하는 것을 마치고도록 하고, scroll depth에 대해 한 가지 염려해야할 부분만 설명해드리고, 마치도록 하겠습니다.

 

초반에 세팅하기 전, scroll depth는 보조지표보기에 적합한 이벤트라고 말씀드렸는데요. 그 이유는 주요지표로 보기에는 한 가지 큰 변수가 존재하기 때문입니다. 바로, 고객이 페이지의 가장 아래 부분에서 F5를 눌러 새로고침을 할 경우, scroll depth 3가지가 전부 터져버리는 현상인데요.
그렇기 때문에, 주요지표로 보기에는 다소 무리가 있어, 보조지표로 참고정도로 하면 괜찮다는 저의 의견이었습니다!