⑫ GA의 한계와 GTM 소개
그로스마케팅 파트너 허들러스
안녕하세요. 그로스마케팅 파트너 허들러스의 유성민 대표입니다. 허들러스는 데이터에 기반한 비즈니스 성장의 방법론은 연구하며 컨설팅을 진행해드리고 있습니다. 앞으로 브런치에 구글 애널리틱스의 관련된 글을 순차적으로 연재해나갈 예정입니다 :) 오늘은 그 연재의 열두 번째 이야기를 진행해보도록 할게요.
12장 Google Analytics의 한계와 Google Tag Manager 소개
구글 애널리틱스에는 목표를 세팅하는 방법이 총 4가지 유형이 있습니다. 특정 페이지에 사용자가 도착하면, 전환을 발생시키는 도착 목표, 두 번째는, 사용자가 우리 웹사이트에 머문 시간이 지나면 전환을 발생시키는 시간 기반 목표, 세 번째는 사용자가 우리 웹사이트에 있는 웹 페이지를 n개 이상 보면 전환을 발생시키는 세션당 페이지 뷰 목표, 그리고 마지막으로 특정 상호작용(클릭, 스크롤, 유튜브 영상 조회)을 하면 전환을 발생시키는 이벤트 목표입니다.
나머지 3개는 굉장히 간단하지만, 마지막인 이벤트 목표는 우리에게 가장 필요한 목표임에도 불구하고, 세팅하기가 쉽지 않습니다. 이벤트 목표를 세팅하는 방법은 2가지가 있습니다. 사이트 코드를 수정하여, 구글 애널리틱스에 반영시키는 이벤트 목표 설정 방법과, 구글 태그 매니저를 연동하여 이벤트 목표를 발생시키는 방법입니다.
첫 번째 방법은 코딩을 할 줄 알아야 가능하고, 코드 수정, 유지 및 관리가 용이하지 못합니다. 그래서, 개발을 할 줄 모르는 우리는 다양한 코드를 유동적으로 , 용이하게 관리하기 위하여 구글 태그 매니저를 사용한 이벤트 목표 트래킹에 대해서 자세히 살펴볼 것입니다.
우선 우리는 [이벤트]라는 용어에 익숙해져야 합니다. 이벤트는 개발자들이 사용하는 단어로서의 이벤트를 의미합니다. 예를 들어, 제가 고등학생 3학년 수험생이라고 가정합시다. 학생의 본분은 당연히 공부입니다. 제가 하는 일은 공부일 것입니다. 그래서 계속 공부를 하고 있는 상황에서, 어머니가 부릅니다. “ 성민아! 밥 먹어라!”라고 부르는 순간, 저는 공부를 멈추고 식탁으로 가서 밥을 먹을 것입니다. 공부가 본분인 저에게 어머니가 부른다는 하나의 우연한 사건이 발생했습니다. 우리는 이를 [이벤트]라고 부릅니다.
컴퓨터도 마찬가지입니다. 컴퓨터도 본분이 있습니다. 바로 우리가 화면을 볼 수 있도록, 인간이 인지할 수 없는 속도로 화면을 깜빡이며 비춰주고 있는 역할입니다. 그래서 우리가 컴퓨터 화면을 계속 보고 있으면 눈이 침침해지는 것입니다. 여하튼, 컴퓨터의 원래 역할은 “지금 사용자가 보고 있는 화면을 깜빡이면서 보여주는 것"입니다.
근데, 사용자가 갑자기 어떤 버튼을 클릭했습니다. 버튼을 클릭하는 순간, 컴퓨터는 버튼을 클릭한 곳에 대한 다른 화면을 띄워주어야 합니다. 원래 하던 화면을 나타내 주는 본분에서, “사용자가 클릭을 했다"라는 컴퓨터 입장에서의 우연한 사건이 발생한 것이지요. 우리는 이를 [이벤트]라고 부릅니다.
이벤트는 사용자가 입력 도구(마우스, 키보드 , 스마트폰 터치)를 통해 진행되는 모든 행위의 집합입니다. 이벤트의 예시를 들어볼까요? 클릭, 더블클릭, 스크롤, KeyDown(키보드를 누른 상황) , KeyUp(키보드에서 손을 뗀 상황) 모두가 이벤트입니다. 더 나아가 스마트폰에서는, Tab(모바일 환경에서의 손가락 클릭) , 스와이프(끌어당김) 등의 행위들이 모두 이벤트가 될 수 있습니다. 구글 태그 매니저를 통해 이벤트 트래킹을 하게 되면, 위에 있는 모든 요소들을 트래킹 하여, 구글 애널리틱스에서 데이터를 조회하실 수 있습니다.
이벤트에 대해서 조금은 감이 오시나요?
자, 그러면 이제 구글 애널리틱스와 구글 태그 매니저에 대해서 살펴봅시다. 디지털 마케팅을 잘 모르시는 분들이라면, 이 구글 애널리틱스와 구글 태그 매니저의 차이를 구분하기가 어렵습니다. 아니면 막연하게나마 알고 있습니다. 우선 구글 애널리틱스는 데이터를 받아, 다양한 형태의 리포트를 조회할 수 있는 리포트 조회 툴입니다. 하지만 태그 매니저는 리포트와는 전혀 관련이 없는 도구입니다.
구글 태그 매니저(GTM)란, 구글 애널리틱스(Google Analytics)에 사용자들이 사이트에서 상호작용(클릭, 스크롤, 페이지뷰 등)했던 데이터를 보내기 위해, 추적에 필요한 태그(명령어 스크립트)를 생성하고 설치하는 일련의 과정을 관리하는 하나의 태그 관리 시스템입니다.
줄여서 GTM이라고 부릅니다. GTM을 사용하면 우리는 시간을 절약할 수 있고, 우리 웹사이트에서 더 많은 데이터를 추적할 수 있으며, 개발자가 아니더라도 개발 스크립트를 관리하기에 매우 편리합니다. 또한 구글 태그 매니저를 마스터하게 되면, 우리가 직접 추적 스크립트를 창조하여 다양한 상황과 공간에서 활용할 수 있습니다.
예를 들어, 구글 애널리틱스를 통해, [장바구니 버튼]을 클릭한 사람들의 데이터를 보고 싶다고 가정합시다. 그러면 순서는 하기와 같습니다.
1. 구글 태그 매니저를 통해, 장바구니 버튼을 클릭할 때마다 구글 애널리틱스로 데이터를 전송
2. 구글 애널리틱스에서 태그 매니저부터 전송된 데이터를 연동시키기 위한 목표 세팅
3. 데이터 조회
의 순서입니다.
구글 태그 매니저는 거시적으로 말하게 되면, 다양한 명령어를 설치하는 도구라고 볼 수 있습니다. 그리고 우리가 지금 하려는 사용자의 상호작용을 추적하는 일련의 행위도 수많은 명령어들 중의 하나가 될 것입니다. 웹사이트는 기본적으로 3가지의 언어로 구성되어 있습니다.
웹사이트의 모양이나 형태를 정의하는 레이아웃으로서의 역할을 관장하는 HTML, 만들어진 레이아웃에 텍스트 컬러, 버튼 색깔, 폰트 형태 등의 디자인의 역할을 관장하는 CSS, 그리고 마지막으로 사람으로 치면 뇌의 역할을 하는, 웹사이트가 동적으로 움직일 수 있도록 명령어를 부여하는 JavaScript입니다. 이 명령어의 단위를 우리는 “태그"라고 부르며, 구글 태그 매니저는 말 그대로, 명령어 관리 시스템이 되는 것입니다.
인간도 뇌에 많은 명령이 복합적으로 일어나면, 굉장히 혼란스러워집니다. 그것과 마찬가지로, 명령어도 웹사이트에 바로 설치하게 되면, 다른 명령어들끼리 서로 충돌이 발생하여, 심할 경우 웹사이트 자체가 다운될 수 있습니다. 그렇기 때문에, 웹사이트에 명령어를 설치하는 일은 전문적인 개발자가 매우 신중하게 설치해야 합니다. 개발자가 아닌 마케터들은 명령어를 쉽게 삽입하기도 어려우며, 명령어를 컴퓨터가 알아보게 코딩을 하는 것조차 다소 어렵습니다.
그렇기 때문에 우리는 [컨테이너]라고 불리는 데이터를 담아둘 수 있는 가상의 그릇을 만들 것입니다. 컨테이너를 그대로 직역하면 빈 용기를 뜻합니다. 컨테이너라는 그릇 안에 명령어를 담는 방법이 구글 태그 매니저의 원리입니다. 그래서 순서는 하기와 같습니다.
1. 구글 태그 매니저 가입을 통해 계정을 만들고, 컨테이너(명령어를 담아둘 수 있는 빈 그릇)를 생성한다.
2. 우선, 명령어를 컨테이너에 넣기 전에, 컨테이너를 먼저 우리 웹사이트에 설치한다.
3. 웹사이트에 컨테이너가 제대로 설치된 것이 확인되었다면, 우리가 넣어준 컨테이너 안에 명령어를 담아준다.
의 순서로 진행됩니다.
버튼 클릭 행위를 추적하는 명령어는 잠깐 잊어주세요. 우리는 컨테이너를 만들어서 우리 웹사이트에 설치해야 하는 것이 먼저이기 때문입니다. 이번 강의에서는 구글 태그 매니저 계정을 생성하여, 우리 웹사이트에 넣어보는 연습을 진행해 보겠습니다.
우선은 새 탭을 열어 구글 태그 매니저를 검색해봅시다.
링크를 누르면, 아직 우리는 태그 매니저 계정을 만든 적이 없기 때문에, 계정 영역이 비어있습니다. 오른쪽 상단 [계정 만들기]를 통해서, 태그 매니저 계정을 만들어봅시다. 구글 태그 매니저 계정은 구글 지메일 계정 하나당 무한대로 만들 수 있기 때문에, 테스트용으로 부담 없이 만들어주세요.
계정 만들기를 누르면, [새 계정 추가] 항목이 나타납니다. 첫 번째는 계정 설정 영역이고, 두 번째는 우리가 웹사이트에 설치할 빈 그릇인, 컨테이너 설정 영역입니다.
계정 이름은 , 브랜드명으로 보통 작성해주시면 됩니다. 당연히 국가는 [대한민국]입니다.
아래쪽 컨테이너 설정 영역 역시 컨테이너 이름은, 자유롭게 적어주셔도 무방합니다. 그다음엔 컨테이너를 어느 곳에 사용할 예정인지 물어보는 영역입니다. IOS나 안드로이드는 앱 기반이라, 설정을 위해서는 약간의 개발지식이 필요하기 때문에 바로 적용하여 배우기엔 어렵습니다. 우리는 우선 웹사이트 데이터 트래킹을 하므로 [웹] 영역을 클릭해주고, [만들기] 버튼을 눌러 최종 구글 태그 매니저 계정과 컨테이너를 생성해줍니다.
데이터 이용약관에 대해서도 오른쪽 상단 [예] 버튼을 눌러서 동의를 해주시면 됩니다.
태그 매니저 계정이 생성되었습니다. 이렇게 팝업이 나타나면 정상적으로 생성이 된 것입니다. 지금 팝업에 보시면, 코드가 총 2개 있습니다. 이 코드를 웹사이트에 붙여 넣어야, 우리 웹사이트에 구글 태그 매니저 컨테이너가 설치됩니다.
하지만 우리는 지금 마땅한 웹사이트가 없기 때문에, 제가 가지고 있는 연습용 웹사이트인 [티스토리 블로그]에 설치하는 것을 보여드리겠습니다. 웹사이트가 있으신 분들은 자신의 웹사이트를 기준으로 따라 하시거나, 티스토리 블로그를 하나 만들어서 따라 해 주셔도 괜찮습니다. 웹사이트가 없으신 분들은 그저 코드를 복사하여 붙여 넣는 수준이니까, 가볍게 봐주셔도 괜찮습니다.
여기는 제 개인 연습용 티스토리 블로그입니다. 아무 스킨과 아무 내용을 넣어두었으니 사이트를 구성하고 있는 내용들은 그냥 무시해주시면 됩니다. 이 티스토리 블로그의 [관리자] 페이지로 이동하여 코드 수정 영역으로 이동해보겠습니다.
해당 페이지가 관리자 영역이고, [꾸미기] 영역에서 [스킨 편집] 메뉴를 클릭합니다.
스킨 편집 영역까지 도달하였습니다. 왼쪽은 스킨을 편집할 때마다 , 편집 내용이 보이는 미리 보기 영역이고, 오른쪽 영역은 스킨을 직접 편집하는 영역입니다. [html] 편집을 눌러주세요.
자, 다시 태그 매니저로 돌아가서 팝업을 자세히 살펴봅시다. 이 코드들이 어떤 것을 의미하는지 세부적으로 알 필요는 없습니다. 그저, “웹사이트에 데이터를 트래킹 하는 명령어들을 담을 그릇을 설치해주는 코드구나" 정도로만 이해해주시면 됩니다. 우선 위에 있는 코드는 웹사이트 영역에서 <head>에서 가능한 한 높은 위치에 코드를 붙여 넣어 달라고 하고 있습니다. 그래서 코드를 복사하여, 다시 티스토리 블로그로 이동합니다.
그래서 저는 그저 시키는 대로 <head> 태그 최상단에 이 코드를 그대로 붙여 넣었습니다. 그리고 다시 태그 매니저로 돌아갑니다.
이번에는 아래 코드를 복사하여 <body> 태그를 찾아서 바로 뒤에 붙여 넣기를 하겠습니다.
바디 태그 바로 아래쪽에 코드를 붙여 넣기 하고, 수정사항을 적용하기 위해 [적용] 버튼을 클릭합니다. 이렇게 하면 구글 태그 매니저 설치가 완료된 것입니다. 간단하죠?
이젠 구글 태그 매니저가 웹사이트에 제대로 설치되었는지 확인해보기 위해, 구글 태그 매니저 창으로 넘어가서, 팝업을 지우고, 오른쪽 상단 미리 보기 버튼을 클릭합니다.
미리 보기 버튼을 누르면, 노란색 영역이 생기면서, ‘현재 미리 보기 중이다'라는 안내가 나타납니다.
이제 티스토리 블로그로 돌아가서 제 블로그를 새로고침 해봅시다. 그렇게 되면 사이트 하단에 컨테이너가 나타납니다. 이 컨테이너에, 태그 매니저를 통해 명령어를 생성하여 담아둘 것입니다. 컨테이너가 성공적으로 나타난다면, 제대로 구글 태그 매니저가 설치된 것입니다.
하지만 여러분들 중 대부분은 이 컨테이너가 나타나지 않습니다. 태그 매니저 설치는 정상적으로 되었더라도, 크롬 확장 프로그램인 Tag Assistant를 설치해야만 아래쪽에 보이시는 컨테이너가 나타납니다.
크롬 브라우저 메뉴(점 세 개 표시)를 눌러 [도구 더보기] - [확장 프로그램]으로 이동합니다. 확장 프로그램이란, 크롬 브라우저를 쓰시는 분들이 크롬을 좀 더 원활하게 활용하기 위하여, 도움이 되는 다양한 소프트웨어들을 개인 또는 회사가 만들어 무료/유료로 배포하는 영역입니다.
왼쪽 하단, [크롬 웹 스토어 열기] 버튼을 눌러, 크롬 확장 프로그램들을 제공하는 웹 스토어로 이동해 봅시다.
다양한 확장 프로그램들이 있는 것을 보실 수 있습니다. 우리는 여기서, 태그 매니저 컨테이너가 웹사이트에 나타나는 Tag Assistant라는 확장 프로그램을 검색해서 설치해 보겠습니다.
저렇게 웃고 있는 썸네일 모양의 Tag Assistant 가 나타납니다. 저는 이미 설치가 되어있어서, [평가하기]로 버튼이 나타나지만, 여러분들은 [Chrome에 추가]라는 버튼이 있을 것입니다. 해당 버튼을 통해 설치를 눌러주세요.
그렇게 되면 크롬 오른쪽 상단 메뉴바에, 그대로 웃고 있는 모양의 확장 프로그램이 있는 것을 알 수 있습니다. Tag Assistant는 구글 태그 매니저 컨테이너가 우리 웹사이트에 설치되었을 때, 그 컨테이너를 직관적으로 볼 수 있는 기능을 제공함과 동시에, 구글 관련 상품(구글 애널리틱스, 구글 애즈 , 구글 태그 매니저)들의 스크립트 설치에 오류는 없는지를 검토해주는 도구입니다.
