구글 태그관리자(Google Tag Manager)란?

구글의 정의에 따르면, 구글 태그관리자는 웹사이트 또는 모바일 앱에서 태그라고 통칭되는 추적 코드 및 관련 코드 조각을 쉽고 빠르게 업데이트할 수 있는 태그 관리 시스템입니다. (참조: 태그 관리자에 대한 개요)

태그는 웹사이트 또는 모바일 앱에 제품을 통합하는 데 도움이 되도록 애널리틱스, 마케팅 또는 지원 업체가 제공하는 코드 세그먼트입니다. (참조: 태그 정보)

 

 

태그(tags)란?

디지털 마케팅 및 분석에서 사용되는 태그는 개발자가 웹페이지를 코딩하는 데 사용하는 표준 HTML 태그와 비슷하지만 다릅니다.

HTML 컨텍스트에서 태그라고 할 때는 <head>, <body>, <p>, <li> 등과 같은 태그를 말합니다.

애널리틱스 및 마케팅 업계에서 태그라고 할 때는 자바 스크립트(HTML/CSS를 동적으로 제어하는 객체 기반의 프로그래밍 언어)로 만든 코드를 말하며 데이터를 수집해서 서드 파티(서비스 제공업체=태그 발급업체)로 전달하는 역할을 수행합니다.

흔히 스크립트 또는 픽셀이란 용어와 혼용되는 쓰이는 태그는 주로 1) 웹분석과 2)광고성과 추적 용도로 사용됩니다.

우선 구글 애널리틱스 추적코드, 네이버 공통 스크립트(프리미엄 로그분석), 페이스북 기본 픽셀(페이스북 애널리틱스) 등이 웹분석 용도의 태그에 해당합니다.

그리고 네이버, 구글, 페이스북, 다음/카카오의 검색 및 디스플레이 광고 상품을 포함하여 크리테오, 모비온, 타게팅게이츠, 리얼클릭 등 웹기반 디지털 광고 상품을 운영하는 대다수 서비스는 광고 성과 추적을 위해 전환 스크립트/태그를 사용합니다.

 

 

태그의 관리

앞에서 언급한 웹분석 또는 광고성과 추적을 위한 다양한 스크립트를 사용하려면 우선 이들 태그를 웹사이트에 적용해야 합니다.  웹사이트 관리 메뉴에서 제공하는 별도의 외부 스크립트 관리 영역 또는 FTP 접속을 통해 웹사이트 소스 코드에 태그를 추가해야 합니다. 전자의 경우 마케터가 직접 태그를 추가(참조: 구글 애널리틱스 스크립트 설치 가이드)할 수도 있지만, 후자의 경우 웹사이트를 관리하는 개발자나 IT 부서에 요청하여 처리합니다.

웹사이트에 태그를 추가하는 것은 비교적 간단한 작업에 해당하지만, 당장 웹사이트 기능에 문제가 있다거나 보다 시급한 개발자 본연의 업무가 존재하는 경우 후순위 업무가 되어 작업이 늦어지기 쉽상입니다. 또한 최근에는 계속해서 디지털 채널이 늘어남에 따라 관리해야 하는 태그도 계속해서 증가하는 만큼, 마케터 입장에서 관련 담당자/부서에 매번 태그 삽입을 요청하는 것도 상당히 번거로운 일입니다.

구글 태그 매니저를 이용하면 컨테이너 태그라고 하는 기본 태그를 소스 코드에 한 번만 심고, 나머지 모든 태그들을 인터넷 상의 사용자 인터페이스에서 관리합니다. 따라서 빠르고 효율적으로 태그를 관리할 수 있습니다.

 

 

컨테이너 태그(Container tag)

 

구글 태그관리자 컨테이너 태그

 

구글 태그관리자 계정을 만들면 위와 같은 태그가 발급됩니다. 두 개의 코드 스니펫으로 나눠져 있는데요, 이를 태그매니저 서비스에서 요구하는대로 헤드<head> 태그 내 및 바디<body> 태그 직후에 추가하면 설치가 완료됩니다.

이후부터는 구글 태그관리자 사용자 인터페이스에서 즉 인터넷 상에서 다양한 태그를 관리(추가, 삭제, 변경 등)하게 됩니다.

 

GTM 컨테이너 태그

 

 

구글 태그관리자의 특징과 장점

 

구글 태그관리자의 장점

 

1) 빠르고 효율적

태그를 추가하거나 업데이트할 때 웹사이트의 소스 코드를 수정할 필요 없이, 태그 관리자를 통해 마케터가 직접 태그를 적용함으로써 빠르고 효율적인 작업이 가능합니다.

 

2) 규칙 기반의 태그 실행

페이지 로드 시점뿐만 아니라 링크/버튼 클릭, 동영상 재생, 스크롤 깊이 등 다양한 조건에서 태그가 실행되도록 설정이 가능합니다. 이에 따라 구글 애널리틱스 이벤트 설정에 의한 사용자 행동 데이터 수집 등 고급 설정이 가능합니다.

 

3) 사전 테스트

디버깅 툴이 내장되어 있어 태그를 생성한 후 실제 적용에 앞서 태그가 정상적으로 작동하는지 여부를 확인할 수 있습니다.

 

4) 체계적 관리

소스 코드에서 태그를 추가하는 경우 누가, 언제, 어떤 페이지에, 어떤 코드를 심었는지를 파악하는 게 쉽지 않은 반면, 태그매니저를 사용하여 추가된 태그는 한 눈에 이를 파악할 수 있습니다. 이에 따라 중복 설치나 에러 등을 방지할 수 있고, 태그를 체계적으로 관리할 수 있습니다.

 

참조: 구글 태그관리자를 꼭 사용해야 하는 5가지 이유

 

 

구글 태그관리자의 계정 구조

 

구글 태그관리자 계정 구조

 

– 계정: 최상위 사용자 접속 레벨. 보통 회사별로 생성함

– 컨테이너 태그: 태그 관리자 스크립트가 발급되는 레벨. 보통 웹사이별로 생성함

– 태그: 웹사이트에 실제 적용하는 다양한 태그들. 각 태그는 트리거와 변수로 구성됨

 

구글 태그관리자의 계정 구조는 구글 애널리틱스(GA, Google Analytics) 계정 구조와 유사하며 계정 – 컨테이너 – 태그 3단계로 구성되어 있습니다. GA에서 속성(Property) 레벨에서 스크립트가 발급되었다면, 태그관리자에서는 컨테이너 레벨에서 스크립트가 발급됩니다.

업체별로 계정을 생성하고, 운영하는 웹사이트 도메인별로 컨테이너를 생성하는 것이 일반적입니다. 그리고 각 태그는 트리거와 변수로 구성됩니다.

 

 

구글 태그관리자의 핵심 구성 요소: 태그, 트리거 및 변수

 

태그, 트리거 및 변수

 

태그는 웹사이트 내에서 실행하고자 하는 태그는 말합니다. 이 태그를 언제, 어떤 조건에서 실행할 것인지를 트리거에서 지정합니다. 변수는 이 트리거 조건 지정의 구성 요소가 되는 한편 분석에 필요한 데이터 수집을 위해 태그에서도 바로 사용될 수 있습니다.

 

 

1) 태그(tags)

 

웹분석 및 광고성과 추적 용도의 태그들

 

앞에서 설명한대로 태그는 주로 웹분석 및 광고 성과 추적 용도로 사용되는 자바 스크립트 코드 스니펫을 말하며, 사이트에서 데이터를 수집해서 외부 서비스로 전송하는 역할을 수행합니다.

웹분석 목적의 구글 애널리틱스 추적코드, 광고 타게팅 및 성과 추적을 위한 구글 애즈 리마케팅/전환 스크립트, 네이버 공통/전환 스크립트, 페이스북 기본/이벤트 픽셀 등을 포함하여 다양한 유형의 태그가 사용됩니다.

 

 

2) 트리거(triggers)

 

구글 태그관리자 트리거

 

트리거는 런타임(프로그래밍 언어가 구동되고 있는 환경, 참조: 위키백과 정의) 시 참 또는 거짓을 판별하는 조건이며, 태그의 실행 여부를 결정합니다. 태그가 실행되기 위해서는 최소 1개 이상의 트리거가 존재해야 합니다.

현재 페이지뷰, 클릭, 사용자 참여, 기타 네 가지 카테고리에 총 14개 유형의 트리거를 사용할 수 있습니다.

트리거는 변수의 값과 트리거를 정의할 때 지정한 값을  비교하는 방식으로 작동하며, 트리거 조건이 충족될 때 이와 연결된 태그가 실행되거나 혹은 실행에서 제외됩니다.

예를 들어 사전 정의된 변수인 ‘url’에는 항상 현재 로드 중인 페이지의 URL이 포함됩니다. example.com/purchase/receipt.html 페이지에서만 태그가 실행되게 하려면 트리거를 아래와 같이 지정합니다.

{{url}} 같음 example.com/purchase/receipt.html

 

 

3) 변수(variables)

 

구글 태그관리자 변수

 

변수는 런타임 시 값이 입력되는 이름-값 쌍입니다. 예를 들어 사전에 정의된 ‘url’ 변수는 해당 값이 현재의 페이지 URL이라는 뜻입니다.

변수는 트리거와 태그에서 사용됩니다. 트리거에서는 태그 실행 조건을 지정하는 필터를 정의하는 용도로 변수가 사용됩니다(예: url 변수가 ‘example.com/index.html’일 때 페이지뷰 트리거를 실행하는 용도). 태그에서는 동적 값을 포착하여 전송하는 데 변수가 사용됩니다(예: 거래 금액과 구매 제품을 전환추적 태그에 전달하는 용도)

구글 태그관리자에서는 페이지, 유틸리티, 오류, 클릭, 양식, 기록, 동영상, 스크롤, 공개 상태 등 다양한 유형의 사전 정의된 ‘기본 제공 변수’ 모음을 제공합니다. 기본 제공변수로 태그 및 트리거 구성에 필요한 대부분의 작업을 처리할 수 있습니다.

또한 개별 사용자의 요구사항에 맞춘 ‘사용자 정의 변수’도 추가로 만들 수 있습니다.

 

 

데이터 영역(Data Layer)

 

구글 태그관리자 데이터영역(Data Layer)

 

태그, 트리거, 변수 이외에 구글 태그관리자의 또 다른 중요한 구성 요소로서 데이터 영역이 있습니다. 데이터 영역이란 웹사이트에서 태그 관리자 컨테이너로 정보를 전달할 때 사용되는 자바스크립트 객체(JavaScript object)를 말합니다. 이렇게 전달된 정보는 태그 구성 시 변수에 담거나 트리거를 활성화하는 데 사용됩니다.

태그 관리자는 변수, 거래 정보, 페이지 카테고리 및 페이지 곳곳에 존재하는 기타 중요 정보를 직접 참조하는 대신 데이터 영역 소스 코드에 있는 정보를 쉽게 참조하도록 설계되었습니다. 데이터 영역에 변수(name)  및 관련 값(value)을 저장해 놓으면 태그 실행 시 이들 변수와 값을 바로 사용할 수 있습니다.

구글 애널리틱스 사용 시 전자상거래 구매 데이터나, 이벤트 설정의 대상이 되는 중요 사용자 행동 데이터, 맞춤 측정기준에서 사용하는 데이터 등은 기본 추적코드만으로는 수집할 수 없어 추가적인 설정이 필요하며, 이때 주로 웹페이지 내 소스 코드에 별도의 추적 코드를 넣어 이들 정보를 GA 서버로 직접 보내는 방식을 사용합니다. 구글 태그관리자(GTM)에서는 이와 같은 정보를 수집할 때 데이터 영역을 주로 사용한다고 이해하면 좋습니다.

 

데이터 영역 변수 만들기

 

데이터 영역 변수는 태그 관리자가 데이터 영역 구현에서 값을 읽어 와서 태그, 트리거 및 기타 변수에 전달할 수 있도록 해줍니다. 데이터 영역 객체는 키-값(key-value) 쌍  목록으로 구성됩니다.

 

데이터 영역 지정(초기화)

데이터 영역 변수를 사용하려면 우선 위와 같이 데이터 영역을 지정(초기화)한 후 이 안에 변수를 담아 사용합니다.

 

데이터 영역 변수 만들기

구글 개발자 문서에 따르면 데이터 영역 변수를 만드는 방법은 1. 데이터 영역에 변수 정보를 직접 입력하여 초기화 하는 방법과  2. 데이터 영역을 초기화한 후 dataLayer.push() 명령어를 사용하여 데이터 영역에 정보를 추가하는 것 두 가지 방식이 있습니다.

데이터 영역 지정 시 사용하고자 하는 변수 값이 존재하면 1번 방식을 사용하고, 그 외의 경우 해당 변수 값이 이용 가능할 때 2번 방식을 통해 데이터를 저장합니다. 물론  1번 방식에서도 dataLayer.push() 명령어를 사용하여 추후 언제든지 데이터 영역에 데이터를 추가할 수 있습니다.

참조: 구글 태그관리자 개발자 문서

 

데이터 영역 변수 만들기 – 권장 방법

하지만 앞에서의 설명에도 불구하고 Simo Ahava 등의 GTM 전문가들은 위와  같은 초기화 및 dataLayer.push은 방식을 항상 사용할 것을 권장합니다.

참조:  100+ Google Tag Manager Learnings

 

데이터 영역의 위치

 

데이터 영역의 위치 => 컨테이너 태그 앞에 위치해야 함

 

데이터 영역의 사용과 관련하여 유의해야 할 또 다른 특징으로 태그의 위치 문제가 있습니다. 태그관리자는 컨테이터 태그 실행 시 자동으로 데이터 영역을 생성하며, 이미 데이터 영역이 생성되어 있는 경우 그 안의 변수를 가져다 사용할 수 있습니다. 이를 달리 표현하면, 태그 실행 시 데이터 영역에 정보가 없는 경우, 이를 사용할 수 없습니다. 따라서 데이터 영역은 항상 GTM 컨테이너 태그 앞에 위치해야 합니다.

 

여기까지 구글 태그관리자가 무엇이지, 왜 사용해야 하는지와 함께 태그관리자를 이해하는 데 필요한 기본 개요와 구성 요소를 설명해 드렸습니다. 앞으로 수 차례에 걸쳐 좀 더 구체적인 활용 방법을 다루도록 하겠습니다.

 

 

# 구글 태그관리자 참조 사이트

– 구글 태그관리자 고객센터: https://support.google.com/tagmanager/?hl=ko#topic=3441530

– 구글 태그관리자 개발자문서: https://developers.google.com/tag-manager/quickstart

– 구글 애널리틱스 아카데미(구글 태그관리자 기초과정): https://analytics.google.com/analytics/academy/course/5

– 구글 공식 유튜브 동영상(구글 태그관리자 시작하기): https://www.youtube.com/watch?v=9A-i7EWXzjs&list=PLI5YfMzCfRtYLtw_djEwG0nR-F9r6B5JT

– 유튜브채널(Measureschool): https://www.youtube.com/channel/UClgihdkPzNDtuoQy4xDw5mA

– 블로그(Simo Ahava): https://www.simoahava.com/

 

 

—————————————————————————

국내 대표적인 온라인마케팅 커뮤니티/매체인 아이보스에서 구글 애널리틱스 4(GA4) 강의를 진행하고 있습니다. 커리큘럼 등 자세한 사항은 아래 링크를 참조하세요.

GA4 실무과정: https://www.ibossedu.co.kr/edu-goods-380

 

GA4 구축 문의하기(오컴데이터)
GA4 기업교육  문의하기(오컴데이터)

 

 

* 표시가 있는 항목은 필수 입력란입니다.

 

[GTM기본] 1. 구글 태그관리자란?
태그:                     

[GTM기본] 1. 구글 태그관리자란?”에 대한 2개의 생각

  • 2019년 10월 1일 8:16 오후
    고유주소

    안녕하세요, 구글애널리틱스를 공부하고 있는 사람입니다.
    혹시, 헤드와 바디 중 하나의 스크립트만 이용하면 되는 것인지 문의드립니다.
    헤드와 바디를 모두 삽입하였더니, 값이 트래킹이 되지 않는듯하여 문의글을 남깁니다.

    제가 삽입을 잘못한것인지, 확인차 문의드리는내용으로
    1. 헤드or바디 중 하나만 삽입
    2. 두개다 삽입
    에 대하여 답해주시면 너무너무 감사할것같습니다.
    확인부탁드리겠습니다.

    응답
    • 2019년 10월 6일 12:18 오후
      고유주소

      안녕하세요. 문의하신대로 구글 태그관리자 태그는 헤드에 넣는 태그와 바디에 넣는 태그 두 개로 구성되어 있습니다. 두 개 태그를 각각의 위치에 모두 추가하시면 됩니다. 두 개 태그 중 헤드에 추가하는 태그가 메인 태그에 해당합니다. 바디에 넣는 태그는 메인 태그가 작동되지 않을 때 작동하는 보조 태그로 보시면 됩니다. 따라서 어느 하나만 넣더라도 정상적으로 작동하긴 합니다.

      응답

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다