구글 태그 매니저 – 옵션 선택(드롭 다운) 추적하기

어떤 상품을 사고 싶지만, 아직 확실히 마음이 정해지지 않았을 때 보통 사람들은 인기순으로 정렬해 상품을 확인하고는 합니다. 

이미 그 제품에 익숙한 사람들은 최신순, 즉 신상품 순으로 볼 때도 있죠. 이렇게 어떤 기준을 선택하는 것, 그걸 바로 옵션 선택이라고 부릅니다. 드롭 다운이라고도 말하죠.

어떤 제품을 구매하고자 웹사이트에 방문한 방문자들이 가장 유용하게 사용하는 기능 중 하나입니다. 그렇다면 웹사이트 운영자들은 자연히 궁금해집니다. 과연 방문자들이 가장 많이 선택하는 옵션은 어떤 것일까? 인기순일지, 신상품 순일지 말이죠.

구글 태그매니저에서 이런 옵션 선택이나 변경을 추척할 수 있는 설정을 해줄 수 있습니다. 

직접 맞춤 HTML에서 태그를 활용하면 되는데요, 이제 이를 어떻게 설정하는 지에 대해 알아보겠습니다.

먼저 구글 태그매니저에 들어가주세요.

이제 맞춤 HTML에서 스크립트 작업을 해주셔야 하는데요.

옵션 선택을 추적할 스크립트는 위와 같습니다. 먼저 var selectMenu 라인에서 사이트에 있는 옵션 선택 요소의 SCC Selector로 변경해주세요. 

이 스크립트는 ‘change’ 이벤트, 즉 옵션이 변경 되면 dataLayer에 옵션 변경 값에 대한 정보를 전송합니다.

맞춰 위 스크립을 맞춤 HTML에 적어주셨으면 이 페이지의 옵션변경만 추적할 수 있도록 트리거 역시 설정해줍니다.

이제 /woman으로 시작하는 페이지에서만 발동되겠죠.

그럼 이제 이 변경 요소에 맞춰 데이터를 수집하기 위한 맞춤 이벤트 태그를 만들어보겠습니다. 먼저 변수를 설정하셔야합니다.

데이터 영역 변수를 사용해 정보를 수집한다고 보시면 됩니다. 그러니 dataLayer의 옵션 변경 값의 이름을 적어주셔야 합니다. 그래야 옵션에서 value 속성을 가져 오며, value가 없으면 텍스트 내용을 가져옵니다. 

변수를 만들었으니 이제 맞춤 이벤트 트리거를 만드셔야겠죠.

이벤트 트리거 이름 역시 dataLayer에서 사용한 것으로 설정해주셔야 합니다. 이를 다 만드셨으면 이제 태그를 완성하기만 하면 됩니다.

보시다시피 추적유형은 이벤트로 설정해주시고 라벨에는 {{변수명}} 형태로 옵션 정보가 저장되는 변수를 사용하셔야 합니다. 그리고 카테고리와 작업을 웹사이트 정보에 맞게 넣어주세요.

게시까지 끝나고 잘 적용이 된다면 이후에는 이벤트 형태로 실시간 – 이벤트 보고서에서 확인해 옵션 선택을 추적할 수 있습니다.

구글 태그 매니저 설치나 고도화가 필요하시다면  하이프마크에 문의해주세요.

감사합니다.