GTM 이란

HaydenOH·2022년 1월 12일
0

웹개발공부

목록 보기
7/10

구글 태그 관리자란?

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

태그 매니저가 필요한 이유?

웹사이트에 꼭 필요한 기능 중 하나는 사용자들의 특정 행동을 트래킹하는 것이다. 예를들어 로그인 페이지가 떴을때 카카오톡 로그인을 많이 하는지 아님 회원가입페이지로 이동하여 자기의 이메일로 회원가입을 많이하는지를 트래킹하여 이에 맞춘 마케팅 전략을 펼칠 수 있다.

Tags

애널리틱스 및 마케팅 업계에서 태그라고 할 때는 HTML의 태그를 말한다.
우선 구글 애널리틱스 추적코드, 네이버 공통 스크립트(프리미엄 로그분석), 페이스북 기본 픽셀(페이스북 애널리틱스) 등이 웹분석 용도의 태그에 해당된다.

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

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

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

Triggers

태그가 실행되기 위해서는 최소 1개 이상의 트리거가 존재해야 한다.
현재 페이지뷰, 클릭, 사용자 참여, 기타 네 가지 카테고리에 총 14개 유형의 트리거를 사용할 수 있다. 트리거는 변수의 값과 트리거를 정의할 때 지정한 값을 비교하는 방식으로 작동하며, 트리거 조건이 충족될 때 이와 연결된 태그가 실행되거나 혹은 실행에서 제외된다.

Variables

변수는 런타임 시 값이 입력되는 이름-값 쌍이다.
태그 실행 조건을 지정하는 필터를 정의하는 용도로 변수가 사용. 태그에서는 동적 값을 포착하여 전송하는 데 변수가 사용 또한 개별 사용자의 요구사항에 맞춘 ‘사용자 정의 변수’도 추가로 만들 수 있다. 태그에서는 동적 값을 포착하여 전송하는 데 변수가 사용

Data Layer

데이터 영역이란 웹사이트에서 태그 관리자 컨테이너로 정보를 전달할 때 사용되는 자바스크립트 객체(JavaScript object)
이렇게 전달된 정보는 태그 구성 시 변수에 담거나 트리거를 활성화하는 데 사용. 데이터 영역에 변수(name) 및 관련 값(value)을 저장해 놓으면 태그 실행 시 이들 변수와 값을 바로 사용할 수 있다.
즉, 웹페이지 안의 특정 엘리먼트의 이벤트를 전송받는다.

데이터 영역에 변수 만들기

데이터 영역 변수는 태그 관리자가 데이터 영역 구현에서 값을 읽어 와서 태그, 트리거 및 기타 변수에 전달할 수 있도록 해준다. 데이터 영역 객체는 키-값(key-value) 쌍 목록으로 구성되어있다. 데이터 영역 변수를 사용하려면 우선 테이터 영역을 초기화 한 후 안에 변수들을 담아 사용한다.

데이터 영역과 이벤트 핸들러

초기화한 데이터 영역에 이벤트를 동적으로 추가 하기 위해서는

dataLayer.push({'event' : 'event_name'});
dataLayer.push({'variable_name': 'variable_value'});

라는 syntax를 사용한다.
또한, 여러 변수를 한번에 Push 할 수 있다.

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customize'
});

모든 페이지에 같은 정적인 이벤트 변수를 넣고 싶다면? dataLayer를 선언한 자리 바로 밑에 push를 하면 된다.

https://developers.google.com/tag-platform/tag-manager/web/datalayer#use_a_data_layer_with_event_handlers

profile
underdog

0개의 댓글