무한 스크롤 이벤트 추적하기

무한 스크롤(Infinity Scroll)이란?

웹 사이트에서 스크롤을 내릴 때 상품이나 게시글과 같은 콘텐츠가 페이지 하단에 추가되는 것을 경험하신 적이 있으실 겁니다.

이렇게 사용자에게 불필요할 수 있는 콘텐츠들을 미리 로드하지 않고 스크롤을 내렸을 때 추가하면 페이지 로딩 속도를 향상시키고 불필요한 데이터의 사용을 줄일 수 있습니다.

아래는 무한 스크롤 기능을 사용하는 사이트에 대한 예시입니다. 이 사이트에서는 상품 목록페이지에 한번에 많은 상품을 로드하지 않고, 일정구간까지 스크롤이 내려가면 상품을 추가로 로드하는 구조로 제작되었습니다.

이런 구조에서는 페이지의 길이가 계속해서 변하기 때문에 구글 태그매니저의 스크롤 트리거를 제대로 활용할 수 없습니다.

참고. 스크롤 트리거의 비율은 최초에 페이지가 로드될 때 정해집니다. 이러한 로직으로 인해 길이가 변하는 페이지에서는 스크롤 트리거의 데이터가 정확하지 않게 됩니다.

이번 포스팅에서는 얼마나 스크롤을 내렸는지를 측정하기 위한 대안으로 무한 스크롤 이벤트를 활용하는 방법에 대해 알아보겠습니다.

맞춤 HTML로 무한 스크롤 이벤트 감지하기

태그 매니저의 맞춤 HTML을 활용하면 무한 스크롤 이벤트가 발생하는 것을 감지할 수 있습니다. 아래는 jQuery를 활용한 스크립트 예시입니다.

이 스크립트는 페이지에서 발생하는 비동기 호출(콘텐츠 정보를 추가적으로 불러오는 작업)이 완료되면 dataLayer에 event를 push하는 역할을 합니다. 아래 코드에서는 3번째 줄의 "ajax/test.html" 부분을 변경해야하는데 이는 콘텐츠를 요청한 URL 주소를 의미합니다.

참고. URL 주소를 조건으로 설정하는 이유는 무한 스크롤 이벤트가 아닌 다른 비동기 이벤트들을 감지하지 않기 위함입니다. 페이지에 다른 비동기 이벤트가 없다면 조건문(if)을 제거해도 됩니다.

그렇다면 settings.url에 어떤 값을 입력해야 할까요? 이는 아래의 방법으로 파악할 수 있습니다.

먼저, 아래의 스크립트를 복사하세요.

이벤트를 추적할 페이지에서 개발자 도구(F12)를 실행시킵니다. 그 다음 [Console] 탭에 복사한 내용을 붙여넣고 엔터를 누릅니다.

그 다음, 스크롤을 내리면 이벤트가 실행될때마다 Console 탭에 아래와 같이 URL이 추가되는 것을 확인할 수 있습니다.

만약, 이 URL들이 위와 같이 다르다면 아래 예시와 같이 공통되는 부분만 조건으로 사용해야합니다.

예시. /kr/ko_kr/w/men/xb/xc/f/new?page

만약, 다른 페이지에서도 이벤트 추적을 원한다면 해당 페이지에서 동일한 방식으로 URL을 확인하고, 이 케이스들을 모두 고려한 조건을 설정해야합니다.
( 페이지마다 URL이 다른 경우는 조건이 많이 복잡해질 수도 있습니다. 패턴이 있다면 정규식을 조건으로 활용합니다. )

구글 태그매니저 설정하기

스크립트 내에 조건으로 입력한 settings.url을 확인했다면, 이제 아래와 같이 [맞춤 HTML] 유형의 태그를 만들고 스크립트를 입력합니다.

이때, 트리거는 아래 예시처럼 이벤트를 추적할 페이지를 조건으로 추가합니다.

구글 애널리틱스로 이벤트 전송하기

무한 스크롤 이벤트를 추적하기 위한 설정이 끝났습니다. 구글 애널리틱스에 데이터를 전송하기 위해서는 무한 스크롤 이벤트가 실행될 때 dataLayer에 push한 event를 트리거로 사용해야합니다.

이를 위해 아래와 같이 [맞춤 이벤트] 트리거를 생성합니다. 이벤트 이름은 dataLayer에 push된 event 값과 동일해야합니다.

이 트리거를 지정한 구글 애널리틱스 태그를 생성합니다. 입력하는 이벤트 정보는 내부 규약에 맞춰서 입력합니다.

이외에도 settings.url에 있는 파라미터 정보, 자바스크립트 변수 등을 활용해서 몇번째 이벤트인지에 대한 정보를 추가적으로 수집하거나 맞춤 HTML 스크립트 안에서 xhr.responseText 변수를 조회하여 호출한 콘텐츠에 대한 정보를 수집하는 등 다양한 응용이 가능합니다.