포스트 목차
함께 사용하면 좋은 확장 프로그램
첫 번째로 소개할 것은 크롬 확장 프로그램 “Omnibug”입니다.
옴니버그는 웹 페이지에 심어져있는 태그를 쉽게 파악할 수 있도록 도와주는 프로그램입니다.
물론 옴니버그가 없더라도 GA나 픽셀 유무는 확인할 수 있지만, 옴니버그를 사용하면 어떤 버튼에 어떤 이벤트가 설정되어있는지까지 모두 확인할 수 있습니다!
옴니버그 확장 프로그램을 설치하시면, 개발자도구( Ctrl + Shift + I ) 탭 가장 끝부분에 Omnibug라는 탭이 생기는데요, 이 탭에서 페이지뷰, 스크롤, 버튼 클릭 등 수집되는 모든 이벤트를 확인할 수 있습니다.
GA 뿐만 아니라 FB Pixel, Google Ads, Hotjar 등 대부분의 웹 트래킹 도구에 대한 정보를 확인할 수 있습니다.
디버깅용으로도 자주 사용하지만, GA 권한이 없는 계정의 광고 목표 설정에도 자주 사용합니다.
1. Google Tag Manager 구조
태그매니저는 변수, 트리거, 태그 3가지 설정을 통해 이벤트를 수집할 수 있습니다.
변수는 GA 계정, 버튼, 페이지 구성 요소 등 특정한 대상에 해당합니다.
다만 UA에서는 GA도 변수에 해당했으나, GA4로 업데이트되며 GA 계정은 더이상 변수로 설정하지 않습니다.
트리거는 방아쇠라는 뜻을 가지고 있는데요, 말 그대로 이벤트를 발생시키는 행동에 해당합니다.
페이지뷰, 스크롤, 클릭 등 측정하고자 하는 행동을 트리거로 설정하시면 됩니다.
태그는 발생된 트리거를 어디로 보낼 것인가를 결정하는 부분이라고 생각하시면 됩니다.
GTM은 이벤트 발생을 정의하는 도구일 뿐 발생된 이벤트를 측정해주지는 않기 때문에 GA나 Pixel 등 측정을 위한 도구로 전달해주기 위해서는 반드시 태그를 설정해주셔야합니다!
2. 태그 설정 방법
마지막으로 꼭 확인하셔야 하는 부분이 태그 설정입니다.
앞서 소개한 요소는 3가지였지만, 트리거의 경우 종류가 너무 다양하기 때문에 주로 사용하는 기능 위주로 별도의 포스팅으로 분리할 예정이라 정말정말 중요한 태그 설정으로 마무리 하겠습니다.
간혹 GA를 잘 다루지 못하거나, 개발자가 없는 회사의 경우 트리거는 설정되어있지만 태그가 설정되지 않아 이벤트가 누락되는 경우가 있습니다.
(실제로 제가 맡았던 클라이언트도 그랬구요..ㅎ)
태그 설정을 위한 모든 항목을 설명해드릴 수는 없겠지만 필수적으로 알아두면 좋은 부분에 대해 소개드릴게요!
GA 태그 설정
1. UA 태그 설정
Tag Type은 Google Analytics: Universal Analytics로 선택합니다.
Track Type은 Event로 설정하고, Category, Action, Label, Value는 GA에서 각 이벤트를 구분하기 위한 부분이기 때문에 알아볼 수 있는 이름으로 작성해주세요.
Category, Action은 필수 Label, Value는 선택사항입니다.
Non-Interaction Hit를 Fasle로 설정하실 경우 이벤트가 발생하면 Bounce로 집계하지 않고, True로 설정하실 경우 이벤트가 발생하더라도 Bounce로 집계됩니다.
예를 들어 이벤트 A는 False / B는 True일 경우 B만 발생하고 이탈한 고객은 Bounce, A만 발생하고 이탈한 고객은 Bounce가 아닙니다.
A, B가 모두 발생한 고객은 당연히 Bounce가 아닙니다.
마지막으로 Google Analytics Settings은 연결할 GA 변수로 설정하고 전송할 트리거를 선택합니다.
2. GA4 태그 설정
GA4는 UA에 비해 확연히 간결해긴 것을 확인할 수 있습니다.
Tag Type을 Google Analytics: GA4 Event로 설정하시고, Configuration Tag를 연결할 GA4 태그로 설정해주신 뒤 GA4에서 확인할 Event Name을 설정합니다.
GA4에서도 설정할 수 있는 옵션이 많긴 하지만, 아무래도 가장 많이 사용하게 되는 옵션은 Tag firing option입니다.
Default 설정은 Once per event이지만, 필요에 따라 Unlimited, Once per page 등으로 커스텀 가능합니다.
그리고 마지막으로 GA4에서도 마찬가지로 트리거를 설정해주면 태그 설정 끝입니다.
FB Pixel 태그 설정
페이스북 광고 목표 설정을 위해 GTM을 많이 이용하긴 하지만, 아무래도 같은 회사의 서비스가 아니기 때문에 HTML을 이용한 커스텀이 필요합니다.
그래도 어렵지 않으니 걱정하실 필요는 없어요!
Tag Type으로는 Custom HTML을 선택하시고 딱 3줄만 입력해주세요.
<script>
fbq('track', 'EventName');
</script>
<script> 태그는 HTML 내에서 java script를 실행시키기 위한 표시입니다.
fbq('track', 'EventName')은 페이스북 픽셀에서 이 태그를 어떤 이름의 이벤트로 받을지에 대한 부분입니다.
그리고 모든 태그는 </태그>로 닫아주기 때문에 </script>로 끝을 맺어줍니다.
페이스북 픽셀로 보낼 때에도 마찬가지로 트리거를 설정하는 것으로 마무리됩니다.
