웹 분석(Web Analytics)을 위해서 태그 생성 및 변경을 도와주는 GTM(Google Tag Manager)의 개괄적인 특징과 예제를 다룹니다.
먼저, GTM의 아름다운 구조(Architecture)를 사용자 입장에서 설명합니다.
준비 작업으로 GA와 GTM의 계정 그리고,
GTM의 컨테이너에서 발급 받은 태그 코드를 분석하고자 하는 모든 페이지에 붙여 넣습니다.
-END-
GTM 컨테이너에서 트리거(TRIGGER)/변수(VARIABLE)를 활용해 태그(TAG)들을 생성하고 게시(Publishing)합니다.
페이지에서 규칙을 만족하는 태그들은 실시간으로 GA로 전송됩니다.
달리 표현해서, 웹브라우저에서 태그 매니저 코드가 있는 사이트에 접속을 하면, GTM 서버로 부터 (사용자가 웹으로 설정한) 태그 정보를 받게 되고, 규칙에 해당되는 태그들을 GA로 발송(Fire) 합니다.
다음은 데이터 영역 변수(Data Layer)를 활용한 버튼 클릭 이벤트를 예제와 함께 다룹니다.
- 사용할 변수 및 트리거를 생성합니다.
- 생성한 변수와 트리거를 가지고 태그를 만듭니다.
- 미리 보기를 통해서 태그가 잘 동작하는지 확인 합니다.
- 생성한 태그를 게시 하고 GA 실시간 이벤트를 확인 합니다.
버튼 클릭 트리거를 만들고, 데이터 영역 변수 값들을 태그를 통해서 보내기 위한 설정입니다.
* 트리거 : "id"가 "demo"이고 "class name"이 "GTM click"인 클릭에 대해서 동작합니다.
* 변수 : 태그에서 사용할 GA 추적 ID를 상수로 미리 지정했고, 페이지의 데이터 영역(Data Layer)에 myLabel,myValue 두 가지 변수를 정의 했습니다.
* 태그 : "버튼 클릭" 트리거가 발생했을때, "my*" 변수를 "GAID"로 전송하는 "버튼 클릭" 태그를 만들었습니다. "링크 클릭"은 무시하면 됩니다.
GTM 웹에서 제공하는 미리 보기 기능으로 잘 동작하는지 확인 합니다.
* 이벤트 버튼을 클릭하면 실행되는 태그와 변수들에 대한 정보를 바로 보여줍니다.
GTM 컨테이너 게시 후에는 GA의 실시간 이벤트 보기에서도 확인 가능합니다.
일반적인 태그의 추가나 변경 작업 시에 IT 부서에 티켓을 발행하고 기다릴 필요가 없습니다. 미리 보기 기능으로 오류를 미연에 방지하고, 버전 관리 기능으로 언제든 복구 가능합니다.
참고
* 본문에서 사용한 HTML 코드
https://bitbucket.org/snippets/juhoon26/5Rkjg
* 구글 공식 도움말
https://support.google.com/tagmanager
* 구글 태그 매니저 학습 코스
https://analyticsacademy.withgoogle.com
0 개의 댓글:
댓글 쓰기