GA데이터를 수집하고, 새로운 이벤트를 추적하는데에 그때마다 우리는 개발자의 도움이 필수였습니다. 하지만 Google Tag Manager(이하 GTM)이 등장하면서, 답답하지만 개발자가 코드를 빼고, 넣고, 유지보수해주기를 기다리기만 해야했던 서비스 기획자(및 그 외다수) 들에게 새로운 세상을 열어 주었습니다. 이 과정 자체를 구글 태그 매니저에서 모두 간단하게, ‘우리가 알아서’ 할 수 있게 된 거죠.
하지만 GTM또한 GTA보다 항목은 적어서 깔끔해보이기는 한데, 구조부터 만지는 방법까지 한 번에 이해하기는 쉽지 않습니다. 이 글에서는 간단하게 GTM이란 ‘무엇을 위해’ 만들어진 도구인지 GTM에 대한 설명과 핵심요소 3가지, 그리고 사용시 주의사항에 대해서 소개하도록 하겠습니다.
<1> GTM이란?
- 트래킹 툴의 헬퍼, GTM
세상에는 많은 트래킹 툴이 있습니다. 누구나 한번 쯤은 들어봤을 Google Analytics(이하 GA)부터, Amplitude, Beusable까지 GA와 같은 트래킹 툴은 ‘데이터를 분석하기 위한 분석 및 시각화 툴’ 이고 GTM은 ‘코드추적을 용이하게 해주는 도구이자 태그 관리 툴’입니다. 가령 어떤 회사에서 GA4와 Beusable을 활용하기로 결정한 상황을 예시로 들어보겠습니다. 이 때 기존에는 개발자의 도움을 받아 GA4와 Beusable 각각 코드를 넣어줘야 했다면, GTM이 생긴 이후부터는 코드의 삽입, 수정, 삭제 모두를 효율적으로 관리할 수 있게 되었습니다. GTM 코드만 삽입하면, 새로운 툴을 여러 개 추가하더라도, 추가적인 코드작업 없이 손쉽게 마케팅 툴을 설치 할 수 있게 된 것이죠.
<2> GTM의 핵심요소 3가지
GTM에서 지원하는 핵심 기능은 크게 3가지, 바로 태그, 트리거, 변수입니다.
> GTM의 태그, 트리거, 변수 항목
태그, 트리거, 변수라는 개념은 무척 생소할 수 있습니다. 그 의미와 역할을 간단히 표로 정리하자면 다음과 같습니다.
저는 개인적으로 GTM의 구조를 ‘총’으로 비유할 수 있다고 생각합니다.
예를 들면<‘item_name’을, ‘구매완료’가 된 시점에, ‘GA4로’ 쏜다>라는 문장에서
->변수라는 ‘탄창’을 넣고, ‘구매완료’라는 방아쇠를 당겨, GA4로 ‘총구’를 겨누는 것이죠!
더 자세히 설명하자면
(1) 태그
웹 분석 및 광고 성과 추적 외의 목적으로도 활용될 수 있습니다. 예를 들면, ‘구독하기’ 버튼을 누르면 내 메일로 해당 정보가 오는 경우, 혹은 웹사이트로 고객 문의가 왔어도 slack이나 Jandi등의 메신저 툴로 연동하는 경우입니다. 이런 경우에도 태그를 통해 데이터를 추적할 수 있습니다. 형태는 보통 자바스크립트 코드 스니펫의 형태를 띱니다. 태그에 설정해 놓은 각종 툴의 핵심 코드와 작업이 “트리거”를 통해 특정 조건을 갖추면 실행됩니다. Google Analytics 에서는 특정 GA 계정으로 데이터를 전송하는 역할을 수행합니다.
*자바스크립트 코드 스니펫 : 웹 분석 및 광고 성과 추적 용도로 사용됨, 실제 동작하는 핵심 기능을 담당.
(2) 트리거
사용자가 어떤 동작을 수행하거나, 특정 조건을 충족했을 경우 발동됩니다. 한마디로 어떤 환경과 조건에서 동작할지 정하는 ‘조건’의 역할을 합니다.
(3) 변수
태그가 실행되기 위해 태그 실행시마다 변경되는 값을 관리하는 데 사용됩니다. 이 외에도 GA 계정명 등 특정부분의 효율적인 대체를 위해 사용됩니다.
<3> GTM 사용시 주의사항
GTM을 실제로 사용해 본 적이 있는 분이라면, 태그, 트리거, 변수의 이름을 명확하게 명명하지 않을시 기하급수적으로 증가하는 위 요소들이 얼마나 복잡하게 얽힐 수 있는지 경험해보셨을 겁니다.
이미지 출처 : https://www.analyticsmania.com/post/google-tag-manager-best-practices/
>마구잡이로 적힌 100개의 태그명은 생각만 해도 너무 끔찍합니다;;;
사실 각 요소의 이름은 설정하기 나름이기 때문에, 꼭 ‘이렇게 써야 한다’는 수학공식처럼 정해진 것은 없습니다. 다만 핵심은 우리 서비스 데이터를 관리하는 팀원들 사이에 ‘합의된 이름’으로 설정하여 혼란이 없게 한다는 것이죠.
LABBIT에서 수년간 고객사와 프로젝트를 진행하면서 경험한 것을 바탕으로 제안드리자면, 명명법에 정해진 공식은 없지만 대괄호([,])와 언더바(_) 등의 기호를 적절히 사용하여 모두가 알아볼 수 있게 정하는 것이 좋다는 것입니다.
GTM 담당자들끼리 태그명을 어떤 방식으로 만들어갈지에 대한 규칙이 정해졌다면, 해당 태그명이 조금 더 구별이 용이하도록 프로그래머들의 ‘변수명 짓는 방식’ 3가지를 공유해 드리고자 합니다.
1. 카멜 케이스(Camel Case)
각 단어의 첫 글자는 대문자로 적고, 맨 앞에 오는 글자는 소문자로 표기합니다. 낙타와 모양이 비슷하다 하여 ‘카멜’이라고 하는 방법입니다.
ex) i Am A Genius
2. 언더바 스코프(Underbar Scope) or 스네이크 케이스(Snake Case)
언더바(_)로 각 키워드를 구분해주는데, 이 모양이 뱀같다고 하여 ‘스네이크’라고도 부릅니다.
ex) I_am_a_genius
3. 파스칼 표기법(Pascal Case)
카멜 케이스와 비슷한데, 맨 앞에 오는 문자까지 대문자로 표시하는 방법입니다.
ex) I Am A Genius
실제 기업에서 활용되는 태그명, 트리거명, 변수명 예시 이미지입니다.
1) 태그명 예시 이미지
2) 트리거명 예시 이미지
3) 변수명 예시 이미지
<4> GTM을 사용하면 좋은 점
1. 다양한 툴 삽입가능
GTM은 우선 한 번 웹사이트에 심어 놓으면 개발자의 도움 없이도 다양한 툴을 테스트해볼 수 있습니다. 카카오 픽셀, 틱톡 픽셀, 구글 애즈, 네이버 프리미엄 로그분석 등도 모두 GTM을 통해 설치가 가능하죠.
2. 다양한 데이터를 간단하게!
GA에서 수집할 수 있는 데이터 외에 다른 데이터들이 궁금해질 때가 있습니다. 예를 들면 몇 명이 장바구니 버튼을 눌렀는지, 이 페이지에서는 스크롤을 30%내렸는지, 90% 내렸는지, 상담하기 버튼은 몇 명이 눌렀는지 등등이죠. 이러한 데이터들을 GTM을 통해 간단히 수집할 수 있습니다.
3. 손쉽게 반복적인 TEST 가능
GTM에서는 버전 관리 기능을 통해 새로운 데이터를 수집하거나 설치한 툴을 여러 번 TEST해볼 수 있고, 결과가 마음에 들지 않으면 이전으로 되돌릴 수도 있습니다. 마음 편하게 실험을 반복해볼 수 있는 거죠. 초기 스타트업에서는 계속적인 실험을 반복적으로 하는 게 중요한만큼, GTM은 더욱 유용하게 쓰일 수 있습니다.
이 글을 통해 GTM이라는 도구에 매몰되지 않고 활용하여 우리 서비스의 데이터들을 더 손쉽게 보실 수 있게 되셨으면 좋겠습니다:)
블로그 구독자 문의 주소 : info@weirdsector.co.kr
