Google Tag Manager 간단 정리

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

여기서 태그는 웹페이지의 HTML 태그를 말하는게 아니고 마케팅 업계에서 자바스크립트로 데이터를 수집해서 웹 분석 및 광고 성과 추적용도로 사용하기 위해 서비스 제공업체(구글,네이버,페이스북 등)로 전달하는 역할을 수행하는 기능을 말한다.

컨테이너 코드 스니펫(컨테이너 생성 시 헤더, 바디에 심으라고 하는 코드)이라는 기본 스크립트를 소스코드에 한번 추가하면 이후 개발자가 관여하지 않더라도 GTM에서 제공하는 UI를 통해 태그를 효율적으로 추가,삭제,변경 등 관리하기 위해 사용한다.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-A123456');</script>
<!-- End Google Tag Manager -->

컨테이너

태그를 관리하는 프로젝트 단위로 일반적으로 도메인별로 생성하며 태그,트리거,변수 3가지 요소를 사용해서 데이터를 추적

변수(How)

특정 값을 담아두는 가상의 메모리 영역으로 어떠한 데이터를 수집할 지 지정하고 여러 이벤트에서 재사용하여 효율증가

ex) 특정 페이지에 접속할때, 클릭할때 데이터를 수집할 경우 사전 정의된 url이라는 변수는 현재 로드중인 페이지의 URL을 변수로 사용할 수 있다.

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

기본 제공하는 변수로 처리할 수 없는 특정 요구사항에 맞추고 싶다면 사용자 정의 변수를 생성할 수 있다.

트리거(When)

태그(명령어)가 실행되는 조건을 정의하여 조건 충족 시 연결된 태그가 실행

ex) 페이지뷰, 클릭할때 등 이벤트 실행 조건

태그(What)

데이터를 추적하여 수집하기 위해 명령하는 명령어의 역할로 트리거의 조건이 충족되면 태그가 인식하여 데이터를 추적하여 Google Analytics 등의 툴에서 데이터를 수집

쉽게 생각해서 트리거가 실행 조건을 담고 있고 태그는 실행 내용을 담고 있다고 생각하면 된다.

데이터 영역(dataLayer)

웹사이트에서 태그 관리자 컨테이너로 정보를 전달할 때 사용되는 자바스크립트 객체

웹사이트 --> dataLayer <–> GTM --> 구글 애널리틱스, 네이버광고 등

구글 애널리틱스 사용 시 전자상거래 구매 데이터, 맞춤 측정기준에서 사용하는 데이터 등은 기본 추적코드만으로는 수집할 수 없어 추가적인 설정이 필요하다.

이때 주로 웹페이지 내 별도의 추적 코드를 소스코드에 삽입하여 이들 정보를 GA서버로 직접 보내는 방식을 사용하는데 GTM에선 이런 정보를 수집할 때 데이터 영역을 주로 사용한다.

코드 스니펫을 header에 추가하고

<script>
    window.dataLayer = window.dataLayer || [];
</script>

dataLayer.push() 명령어를 사용하면 데이터 영역에 정보를 추가할 수 있다.

<a href="#" onclick="dataLayer.push({
    'bookCategory': 'fiction',
    'bookTitle': 'Cien años de soledad',
    'bookAuthor': 'Gabriel García Márquez'
});">도서 세부정보</a>

주의사항으로 GTM은 컨테이너 스니펫 실행 시 자동으로 데이터영역을 생성하며 이미 있는 경우 그 안의 변수를 가져다 사용하기 때문에 데이터영역은 GTM 컨테이너 스니펫보다 앞에 위치해야 한다고 한다.

---

• 그 외 태그,트리커,변수 생성 과정에 대한 자세한 방법은 아래 링크 참고

  구글-태그-관리자-설치-및-사용법

• 태그, 트리거, 변수에서 설정가능한 유형에 대해선 태그 관리자 고객센터에서 각 항목 참고

  • 태그 관리자 고객센터