SPA(React.js)에서 gtm.scrollDepth는 초기화할 수 없었다
초기화할 수 없었다.. 그러나 우리는 답을 찾을 것이다. 늘 그랬듯이.
요약
- GTM의 Variable Type 중에는
Data Layer Variable이라는 타입이 있는데, 이 타입은 다시Version 1dataLayer Variable과Version 2dataLayer Variable이라는 것이 있다는 것을 처음 알았다. Scroll Depth Threshold변수는Version 1이고, 기본적으로 설정된 타입(version 1이라는 타입)이기 때문에 타입을 변경할 수는 없다.- 기본적으로
Version 1은dataLayer.push({key: value})으로 2번 push 하는 방법으로 내가 원하는 값으로 변경할 수 있지만,Scroll Depth Threshold(gtm.scrollDepth)는 (어떤 이유인지 못찾았지만) 이 방법으로는 수정할 수 없다.window.location.reload()로 새로고침하는 방법이 유일한 것 같다. (Version 2는dataLayer.set('key', undefined)으로 데이터 초기화 시킬 수 있다고 한다) window.google_tag_manager[{{Container ID}}].dataLayer.reset();을 하면 GTM debugger 상에서는 scrollDepthThreshold가undefined로 초기화된 것처럼 보이지만, 실제로는undefined되기 전의 scrollDepthThreshold 수치를 기억하고 있어서 reset()을 할 수 없다.
Simo Ahava라는 사람은 GA와 GTM 분야의 Google Developer Expert 라고 한다. 마케터이자, 개발자이자, 웹 데이터 분석의 네임드..?인가보다. 이 사람 글에서 찾고 싶었던 정보를 많이 찾을 수 있었다.
SPA에서는 scroll depth를 초기화하려면 페이지 다시 로드해야한다는 답변글을 캡쳐한 것이다.
그럼 SPA에서 path가 달라져도 scroll depth를 측정하기 위해 어떤 대안이 있나?
window.location.reload() 👎
가능하지만, 페이지를 새로고침하는 것은… 별로다. 최악.
직접 구현하기 🤔
document height 대비 scroll이 얼만큼 내려왔는지를 측정하면 되니까, 직접 구현하는 것도 방법일 것 같다. 하지만 나중에 다노샵의 상품목록이나 상세페이지에는 최적화를 위해 pagination(Infinite Scroll이 될 수도 있을 것 같다)이나 lazy loading을 적용해볼 생각이라 직접 구현하는건 좋은 방법이지만, 고려할 사항이 많을 것 같다.
Element Visibilty라는 Trigger type을 이용한 측정 👍
다노샵 제품 상세페이지에서 상품 설명 이미지 태그(<img>)에 id를 부여해놓고, 그 id가 조금이라도 보이면 GA로 이벤트를 보내는 방법이 있을 수 있겠다. GTM 내의 버그인지 모르겠지만, 간혹 CSS selector로 DOM을 접근하면 특정 경우에는 element를 못잡는 경우가 발생해서 id로 element visible 상태인지 체크하는게 더 속 편할 것 같다.
문제는 id를 부여해주는 작업이 귀찮은데, 어떻게 해야 좋을지에 대해 고민해봐야할 것 같다.
사실 scroll depth threshold를 %로 측정하는 건 데이터를 분석함에 있어서도 한계가 있을 수 밖에 없다. 디바이스, 브라우저별로 스크롤 10%의 위치에서 보이는 element는 다를 수 있기 때문에, 정확히 사용자가 어디까지 봤는지를 측정하려면 Element visibilty로 체크하는게 더 정확할 수 있을 것 같다.
