구글 태그 관리자는 무엇인가?
구글 태그 관리자는 구글에서 무료로 제공하는 태그 관리 솔루션입니다.
구글 애널리틱스(GA)나 구글 Ads와 같은 구글 서비스 뿐 아니라 페이스북, 크리테오, 네이버 등 타사의 광고/분석 솔루션의 태그까지도 실행 시키고 관리할 수 있습니다.
태그 관리자에서 관리하는 태그들의 주요 용도는 광고 플랫폼의 성과 측정, 로그분석 툴의 사용자 행동 추적이며 그외에 다양한 목적의 태그를 제공되는 템플릿을 이용하거나 유형 별로 직접 구성해서 사용할 수 있습니다.
‘태그’란 무엇인가?
구글 태그 관리자(GTM: Google Tag Manager)에서 관리하는 ‘태그’는 사이트에서 실행되는 각종 스니펫(짧은 실행 코드)을 의미합니다. GA4 추적을 위한 ‘Google 태그(gtag)’, 메타나 카카오의 픽셀(Pixel) 코드 같은 것이 GTM이 관리하는 ‘태그’에 해당됩니다.
‘관리’는 어떻게 이뤄지는가?
태그 관리는 태그를 등록해서 실행시키고 필요한 경우 수정하거나 중지, 삭제 하는 작업입니다.
이런 작업이 웹사이트의 소스 코드를 직접 수정하지 않고 GTM 관리자 페이지의 GUI(그래픽 UI)를 이용하는 방법으로 쉽고 간단하게 또 안전하게 수행됩니다.
GA4에서 상단 메뉴에 대한 클릭 이벤트를 추적하고자 할때 GTM을 이용하지 않으면 아래와 같은 코드를 웹페이지 소스에 직접 추가해 줘야 합니다.
사실상 개발자가 아니면 하기 어려운 일입니다. 어려울 뿐 아니라 공부해 가면서 한다고 해도 소스를 잘못 건드려 사이트 기능이 마비되거나 레이아웃이 깨지는 등의 문제가 발생할 수 있습니다.
<script>
document.addEventListener('DOMContentLoaded', function() {
const link = document.querySelector(
'a.top-menu[href="/company.html"]'
);
if (link) {
link.addEventListener('click', function() {
gtag('event', 'click_company_menu', {
link_text: this.textContent.trim(),
link_classes: this.className,
link_url: this.href
});
});
}
});
</script>태그 관리자를 사용하면 아래 이미지처럼 드롭다운 옵션을 선택하거나 인풋창에 텍스트를 입력하는 방법으로 코딩 작업을 대신할 수 있게 됩니다.
구글 태그 관리자를 사용하는 이유
구글 태그 관리자의 이점 3가지
- 개발자의 도움 없이 직접 태그를 관리할 수 있다
- 여러 태그를 통합적으로 관리할 수 있다
- 사용자 행동을 정교하게 추적할 수 있다
개발자의 도움 없이 직접 태그 관리
위의 예시(탑메뉴 클릭 추적)에서 본것처럼 스크립트를 작성하거나 개발자에게 요청할 필요 없이 GUI 환경에서 직접 작업하는 것이 가능하므로 마케터들은 업무 시간을 단축하고 다양한 시도를 할수 있게 됩니다.
** 주의해야 할점은 태그 작업이 안전하다는 것이 오타를 내거나 목적 외의 다른 코드를 잘못 건드리는 것 같은 위험에서 안전하다는 것이지 개발자들이 사용중인 변수를 만들어서 사용하거나 성능에 영향을 줄수 있는 태그를 실행시키거나 하는 등의 위험은 태그 관리자 환경에서도 존재합니다. 가급적 개발자들에게 작업내용을 알려주면서 진행하고 태그의 변경이 있을 때마다 사이트에 기능이나 디자인 문제가 생기지 않았는지 확인 하는 것이 좋습니다.
여러 태그의 통합 관리
구글 이외의 마케팅 태그도 제약없이 사용할 수 있으므로 페이스북, 네이버, 카카오 등의 태그를 등록해서 통합적으로 관리할 수 있습니다.
위 이미지처럼 태그의 ‘유형’에 등록이 되어 있는 플랫폼의 태그는 해당 플랫폼 유형을 선택해서 ID와 필요한 항목을 입력하는 방법으로 사용할 수 있지만 유형에 포함되지 않는 경우 플랫폼에서 제공하는 추적 코드를 ‘맞춤 HTML’ 태그 유형에 등록해서 사용해야 합니다. 네이버 광고는 태그 유형에 등록된 템플릿이 없기 때문에 아래 이미지처럼 ‘맞춤 HTML’ 태그 유형을 선택하고 인풋창에 코드를 입력해야 하는데 역시 GUI 환경을 제공하는 태그 유형에 비해 어렵고 불편한 것 같습니다.
정교한 사용자 행동 추적
GTM에는 트리거라는 ‘이벤트 리스너 역할을 하다가 조건이 맞으면 태그를 실행 시키는’ 요소가 있습니다. 첫번째 예시 이미지의 트리거 섹션을 보면 트리거 유형이 ‘클릭 – 링크만’인데 사이트에서 링크 클릭 이벤트가 발생하는지 주시한다는 의미이고 조건이 ‘click classes가 top-menu를 포함한다’로 되어 있는데 모든 링크에 대한 클릭에 반응하는 게 아니라 오로지 <a> 태그의 class 값에 top-menu가 포함된 링크의 클릭에만 반응해서 연결된 태그를 실행시키겠다는 의미입니다.
아래와 같이 ‘class’ 속성의 값에 ‘top-menu’가 포함된 링크의 클릭만 트리거의 조건에 부합합니다.
<a href="/company.html" class="gnb top-menu">회사 소개</a>이 트리거가 클릭이나 페이지 뷰 이벤트 외에 매우 다양한 유형을 지원하고 있습니다.
GTM의 주요 트리거 유형
- 페이지뷰: 페이지가 로드될 때
- 클릭: 링크 혹은 링크가 아닌 클릭 요소(button, submit 태그 등)에서 클릭이 발생할 때
- 양식 제출: 문의나 상담신청 등의 양식이 전송 완료 될때
- 스크롤 깊이: 특정 스크롤 비율(예: 50%, 90%)에 도달할 때
- 요소 가시성: 페이지 내의 특정 요소가 화면에 보여질 때
- YouTube 동영상: 재생/일시정지/완료 등 동영상에 대한 상호작용이 발생할 때
- 타이머: 지정된 시간이 경과할 때마다
- 기록 변경: SPA 사이트에서처럼 브라우저 새로고침 없이 URL 변경될 때
- 맞춤이벤트: GTM이 사이트에서 발생시키는 맞춤 이벤트가 발생했을 때
이런 다양한 트리거 유형들을 활용하면 사이트에서 단순히 어떤 페이지를 조회하고 어떤 링크를 클릭했는지 정도가 아니라 하단 배너가 사용자의 시야에 들어왔는지 유튜브 영상이 몇프로까지 재생 됐는지, 양식을 전송하면서 사용자가 어떤 옵션을 택하고 어떤 내용을 입력했는지, 랜딩 페이지에서 몇프로까지 스크롤을 내렸는지 등등 사이트에 대한 만족도와 주요 비즈니스 목표에 대한 관심을 확인할 수 있는 중요한 액션들을 포착할 수 있게 됩니다.