구글에서 제공하는 유용한 마케팅 플랫폼이 있다. 하나는 구글태그매니저(GTM), 다른 하나는 구글애널리틱스(GA)이다. 나는 이 단어들을 낯설어하는 사람들에게 항상 설명해주는 공식 멘트가 있다.
GTM = 설치 도구
GA = 분석 도구
GTM으로 태그를 설치하면, GA를 통해 그 태그에 대한 발생 이벤트값(마케팅 담당자들은 이벤트, 이벤트값을 전환, 전환값이라고 부르더라..)을 확인할 수 있다.
간략한 설치 절차는 아래와 같다.
- 내 사이트 전용 GTM, GA 컨테이너 및 계정 생성하기
- 내 사이트 head와 body에 GTM 소스 삽입하기 (가령 삽입 위치에 따라 버그가 걸리거나 태그가 트래킹되지 않을 때가 있으므로, 초반부에 설치해 주는 것이 적절하다)
- GTM과 GA 연동하기
- GA 코드를 변수로 만들어, All Pages 트리거로 페이지뷰 태그를 생성한다.
- [미리보기]로 디버깅하여 All Pages 태그가 fired 되면 GTM, GA 둘 다 정상적으로 설치 완료
마케팅 담당자들이 가장 궁금해하는 것들 중 하나가 버튼 클릭 트래킹이다. GTM에서는 그 버튼에 대한 class나 id 값을 트리거로 잡아, 이를 태그로 만들어 줄 수 있다. 그 태그와 GA 이벤트를 연동하면, GA에서 그 이벤트값을 확인할 수 있다.
아래는 내가 GTM에서 작업한 트래킹 항목들이다.
이 태그들이 GA로 전달이 되면, GA > 행동 > 이벤트에서 다음과 같이 볼 수 있다.
01_Scroll Depth
GTM에서는 스크롤 깊이에 대한 트리거가 디폴트로 생성이 되어있다.
사용자가 기본url 다음 /product/ 로 시작하는 페이지에서, 스크롤을 각각 25%, 50%, 75% 만큼 내릴 때마다 트리거가 걸려 이벤트가 발생된다.
아래는 GA의 이벤트 조회값이다.
만약 어느 페이지를 25%만큼 내렸는지 알고 싶다면, 페이지의 제목을 태그 라벨로 잡아 주면 된다. 그 결과는 아래와 같다.
25%만큼 스크롤을 내린 페이지의 제목들이 나타나게 트래킹을 해주었다.
02_topbanner kakao click
03_login sns button click
04_login 혜택 click
02번은 최상단 배너 클릭 트래킹, 03과 04번은 로그인 페이지에서 [SNS 계정으로 로그인하기] 버튼과 [로그인하고 혜택받기] 버튼에 대한 트래킹이다. PC와 모바일을 분리하여 볼 수 있기를 희망하여, PC 스킨의 버튼 id값과 모바일 스킨 버튼 id값을 다르게 하여, 그 각각의 id값을 읽는 트리거를 PC/모바일별로 생성해 주었다.
내가 쓴 설명이 너무 어려운 것 같아 쉽게 풀어보겠다.
PC 스킨의 탑배너는 id를 PC_topbanner click으로, 모바일 스킨의 탑배너는 id를 MO_topbanner click으로 각각 만들어줬다.
대부분은 class값만 있는데, 나는 트래킹을 위해 강제로 id값을 삽입해 주었다.
GTM에서 이 id값을 읽는 트리거를 만들어 주었고, 이를 이벤트 태그에 걸어주면 된다.
▲(1)
▲(2)
마찬가지로 PC, 모바일에서 각각 topbanner를 클릭한 비율(1)과 그 탑배너를 클릭하였던 페이지의 제목을 알 수 있게(2) 트래킹을 해주었다.
03, 04번도 같은 맥락의 이벤트 트래킹이라서 생략한다.
05_product view
마케팅 담당자들이 제일 궁금해하는 대망의 05번이다.
상품 상세 페이지에는 장바구니, 구매하기, 네이버페이 등 버튼이 최소 3가지가 존재한다. 고객들이 이 페이지에 접속하여, 어떤 상품에서 어떤 버튼을 얼마큼 눌렀는지를 제일 궁금해한다.
02, 03, 04 태그에서는 에서는 버튼 클릭수에만 집중했다면, 05 태그에서는 상품명과 상품금액도 트래킹 할 것이다.
대부분 쇼핑몰 호스팅사에서는 장바구니, 구매하기 버튼에도 id값이 고정되어 있다. 이는 결제 모듈과도 연동이 되어 있는 것으로 알고 있기 때문에 작업자가 함부로 건드릴 수 없다. 따라서 강제로 삽입하거나 수정하는 일은 자제해야 하며 있는 그대로의 id값을 읽어오도록 하자.
네이버페이는 쇼핑몰 호스팅사의 모듈이 아닌, 외부의 모듈이다. (쇼핑몰 입장에서 보면..) 따라서 div 영역으로 버튼이 감싸져 있는데, div의 class나 id값으로 잡으면 안 된다. div 영역 안에 있는 이미지 자체의 id값을 읽어와야 한다.
라벨은 상품명, 값은 상품금액으로 설정해 주는 것이 보기에 깔끔하다.
쇼핑몰들은 웬만하면 상품상세 페이지의 사이트명이 상품명으로 되어 있기 때문에, 사이트명을 라벨로 잡아 주었다.
상품상세페이지에 자바스크립트로 상품금액을 잡는 변수 소스를 삽입하였다. 나는 이를 productPrice로 잡았다. 또한 쇼핑몰들의 상품금액 변수는 숫자 안에 , 콤마가 삽입되어 있으니, 정규식으로 이 콤마를 없애 주는 과정도 필요하다.
GTM에서 이 productPrice를 읽을 수 있는 변수를 productPrice 이름으로 추가하였고, 이 productPrice GTM 변수를 이벤트 태그의 값으로 넣어주었다.
위 목록에서 PC_cart button click = PC의 장바구니 버튼을 클릭한 상품들이 궁금하면 이를 클릭한다.
그러면 위와 같이 상품명, 상품금액을 가독성 높게 볼 수 있을 것이다.
06_order result
결제한 상품에 대한 주문 완료 트래킹인데, 05번에서 설명한 것과 같은 맥락이라 다른 설명은 생략하겠다.
마치며
여기까지 스크롤 이벤트, 버튼 클릭 이벤트, 상품명과 상품금액 트래킹까지 설명하였다. GTM으로 일일이 트리거, 변수, 태그를 만드는 작업이기 때문에 장시간 소요되었다. 나같은 경우는 미리보기로 각각의 태그를 fired 해 보는 테스트 시간이 많이 소요되어서 일요일 꼬박 하루를 투자했다. 나의 발전을 위한 투자 시간이라고 생각해야지.
