⑬ Tag Manager UI 정복하기

0
13장 Tag Manager UI 정복하기

안녕하세요. 그로스 해킹 에이전시, LABBIT의 유성민 이사입니다. LABBIT은 데이터에 기반한 비즈니스 성장의 방법론은 연구하며 컨설팅을 진행해드리고 있습니다. 앞으로 브런치에 구글 애널리틱스의 관련된 글을 순차적으로 연재해나갈 예정입니다 🙂 오늘은 그 연재의 열세 번째 이야기를 진행해보도록 할게요.

13장 Tag Manager UI 정복하기이번 장표에서는 구글 태그매니저의 UI(User Interface) 에 대해서 알아보겠습니다. 사실 이름에서도 아시다시피 구글 태그매니저 역시 구글이 만든 소프트웨어 응용 프로그램 입니다. 우선, 구글 애널리틱스는 꽤 오랜 시간 동안 존재해 왔습니다. 물론 대한민국에 구글 애널리틱스가 전반적으로 정착하기 시작한 시기는 그리 길지 않습니다. 하지만, 구글 애널리틱스의 단점은, 사용자들의 클릭, 스크롤, 유튜브 영상 조회 등 다양한 상호작용을 직접 구글 애널리틱스에서 트래킹하기 위해서는 우리 웹사이트 코드에 직접 이벤트를 정의해주는 하드 코딩 방식으로 진행되었습니다. 그렇기 때문에 코딩에 능숙한 개발자들이 직접 이벤트를 설치한다고 할지라도 다소 시간이 오래걸렸습니다.

그러던 어느날 2012년, 구글은 혁신적인 도구, 구글 태그매니저를 만들게 됩니다. 여기서 태그는 (일반적으로 자바스크립트 기반의) 명령어를 의미합니다. 구글 태그매니저가 혁신적인 이유 중 한 가지로 뽑는 것은 바로 GUI(Graphic User Interface)로 다양한 명령어들을 관리할 수 있다는 것입니다. 명령어를 다루는 방식은 크게 CUI GUI 로 나뉩니다.

CUI는 Command User Interface의 준말로써, 직접 개발자가 명령어 기반으로 소프트웨어나 하드웨어를 제어하는 것을 의미합니다. 대표적인 예로는 리눅스나 유닉스 같은 도구들이 있습니다. 보통 명령어를 다루는 개발자들이라 하면, CUI로 인터페이스를 제공해도 크게 문제는 없었습니다.

GUI는 위에서 설명한 것 처럼, 그래픽 기반의 사용자 인터페이스를 제공합니다. GUI의 대표적인 예는, 윈도우, 맥OS같이 우리가 쉽게 키보드나 패드를 이용하여, 컴퓨터를 제어할 수 있는 것들입니다. 그런데, 이 명령어를 비개발자인 우리가 직접 다룰 수 있도록 GUI를 제공한 것입니다. 이렇게, GUI 기반의 명령어들을 다룰 수 있도록 도와주는 도구가, 구글 태그매니저 입니다.

이번 장표에서는 구글 애널리틱스와 구글 태그매니저의 연동에만 집중을 해서 알려드리겠지만, 구글 태그매니저의 아주 기본적인 기능이고, 구글 애널리틱스와 태그매니저를 연동하는 방법론은 구글 태그매니저에서 제공하는 모든 기능의 5% 도 채 안된다고 이해해 주시면 좋을 것 같습니다.

제가, 구글 상품 영업사원이 된 것 같네요. 하지만 백번의 칭찬이 모자를 정도로 구글 태그매니저는 완벽한 도구 입니다. 개발자가 아닌데, 명령어를 다룰 수 있고, 안전하고 굉장히 직관적으로 유지 보수 및 관리가 가능합니다. 이제 구글 태그매니저의 사용자 인터페이스를 한번 살펴봅시다.

[사진] 구글 태그 매니저 홈 화면으로 이동구글 태그 매니저 홈 화면으로 이동해 봅시다. 우선 상단의 메뉴들을 우리는 [대카테고리] 라고 부르고, 왼쪽에 있는 메뉴들을 [소카테고리] 라고 부르게 됩니다. 이건 편의상 지은 이름이니, 우선은 [대 카테고리] 영역부터 하나씩 살펴봅시다. 대 카테고리의 첫번째 항목은 [작업 공간 : WorkSpace] 라고 합니다. 당연히, 우리가 다양한 명령어들을 만들고, 만든 명령어들을 오른쪽 상단 [미리보기] 버튼을 통해 먼저 테스트해보고, [제출] 버튼을 통해 명령어를 실제 웹사이트에 발행 하는 영역입니다.

 

두 번째는 버전 영역두 번째는 버전 영역입니다. 버전 영역은 쉽게 말해, 히스토리를 기록하는 영역입니다. 하나의 컨테이너를 다양한 이해관계자들이 사용할 때, 그들이 어떤 명령어를 발행할때 마다, 버전이 1씩 올라가게 됩니다. 당연히 아직은 별도로 발행한 명령어가 없기 때문에, 버전은 0이 됩니다.

 

[사진] 세번째 영역은 관리자 입니다.

세번째 영역은 관리자 입니다. 사실 이걸 보시면 어느정도 눈치가 빠르신 분들은 아시겠지만, 구글 태그매니저 역시 2단계의 트리구조로 구성되어 있습니다. 트리구조란 상위의 개념이 여러 갈래의 나무 가지처럼 뻗어져 하위 개념으로 이어지는 구조라고 보시면 됩니다. 일단, 왼쪽엔 [계정] 란이 있고, 오른쪽엔 [컨테이너] 란이 있습니다.

계정이 가장 상위의 단계이고, 컨테이너가 그 다음 하위의 관계 입니다. 그래서, 계정은 여러개의 컨테이너를 동시에 가질 수 있고, 컨테이너는 반드시 구글 태그매니저 계정 1개에 포함이 되어있어야 합니다. 추후 구글 태그매니저의 모든 기능을 다룰 수 있다면, [컨테이너] 영역의 [컨테이너 가져오기] 또는 [컨테이너 내보내기] 를 통해 우리가 만들어놓은 컨테이너를 다른 웹사이트에도 그대로 옮겨서 가져갈수도 있습니다. 복잡한 명령어를 다룰때나 컨테이너 가져오기나 내보내기를 작업하기 때문에, 아직은 태그매니저를 처음 접하는 여러분들이 아실 필요는 없습니다.

[계정] 열에서 [사용자 관리] 부분을 주목해주세요. [사용자 관리]는 말 그대로, 구글 태그매니저 계정에 대해서 다른 사람들이 접근을 할 수 있도록, 또는 명령어를 발행할 수 있도록 권한을 부여할 수 있는 영역입니다.

 

[사용자 관리]를 누르면 계정 권한 영역

[사용자 관리]를 누르면 계정 권한 영역이 나타납니다. 지금은 [래빗 마케팅] 이라는 계정 하나 밖에 없으나, + 버튼을 눌러 다른 계정의 초대가 가능합니다. 이렇게 관련 사용자들을 초대함으로써, 다양한 이해관계자들과 함께 구글 태그매니저 컨테이너를 다루고 공유할 수 있습니다. 광고 쪽에 관심이 많으신 분들이라면, 페이스북 픽셀, 카카오 픽셀과 같은 외부 스크립트들도 모두 구글 태그매니저로 관리가 쉽게 가능합니다.

 

[컨테이너 권한] - [모두 설정] 부분을 클릭해주세요.

초대는 당연히 구글 계정 또는 구글 회사 계정만 초대가 가능하며, 네이버 메일이나 다음 메일을 입력하게 되면, 없는 메일이라고 나타나게 됩니다. 그리고 초대하는 사람이 누구냐에 따라서 우리는 그들에게 권한을 부여할 수 있습니다.

[컨테이너 권한] – [모두 설정] 부분을 클릭해주세요.

 

[사진] 컨테이너 권한은 크게 4가지가 있습니다.

컨테이너 권한은 크게 4가지가 있습니다.

  1. 게시 : 컨테이너를 관리하는 최고 관리자 권한 으로서, 컨테이너에 있는 명령어를 조회하고, 수정하고, 읽을수도 있으며 최종 웹사이트 발행까지 가능하게 됩니다.
  2. 승인 : 명령어를 수정하고, 미리보기를 통해 확인은 가능하지만, 웹사이트에 직접 명령어를 발행할 수는 없습니다.
  3. 수정 : 명령어를 수정할 수는 있으나, 수정된 것을 적용하거나 발행할수는 없습니다.
  4. 읽기 : 명령어 수정이 불가하며, 다른 사람이 만들어놓은 명령어를 [조회] 만 할 수 있습니다.

 

[사진] 계정권한

이렇게 제 개인계정에 초대장을 날려보았습니다. 이 경우, 제 구글 메일로 초대장이 발송될 것이고, 구글 메일에 있는 초대 수락 버튼을 통해 구글 태그 매니저 계정에 접속할 수 있습니다.

 

[사진] 컨테이너 설정 영역

다음은 컨테이너 설정 영역입니다. 컨테이너 설정 영역에서는 컨테이너의 이름을 바꿀 수 있습니다.

 

[사진] 다시 뒤로가기를 눌러 Google 태그 관리자 설치

다시 뒤로가기를 눌러서, 4번째 행에 있는, Google 태그 관리자 설치를 눌러봅시다.

 

[사진] Google 태그 관리자 설치 누른 페이지

구글 태그 관리자 설치 영역을 누르면, 우리가 처음 구글 태그매니저 계정을 생성했을 때의 그 팝업창이 다시 나타납니다. 여기에 쓰이는 코드는 구글 태그 매니저 계정에서 만든 컨테이너 자체를 우리 웹사이트에 설치하는 빈 그릇이라고 이해해주시면 됩니다. 해당 코드는 구글 태그매니저 설치가 완료되면, 다시 사용하지는 않으나, 혹시라도 코드가 필요할 때에는 해당 메뉴로 들어와 다시 볼 수 있습니다.

 

[사진] 다시 작업 공간으로 돌아와 왼쪽에 위치하고 있는 소카테고리

이제 대 카테고리에 있는 메뉴들은 현재 수준에서 충분하게 설명을 마쳤습니다. 다시 작업 공간으로 돌아와 주세요. 사실 중요한 것은 이 작업공간의 왼쪽에 위치하고 있는 소카테고리에 있는 메뉴들 입니다.

물론 여러분들이 그저 보고 따라하면 되겠지만, 그럼에도 불구하고 추후 좀 더 수준 높은 태그 매니저 활용법을 위하여, 태그 . 트리거 , 변수에 대해서 자세히 설명해드리려고 합니다. 이해가 어렵다면, 가볍게 넘어가시고 필요하실때 다시 한번 봐주시면 좋을 듯 합니다.

 

⑫ GA의 한계와 GTM 소개-5

작업공간에 있는 소 카테고리를 자세히 살펴보고 그 역할을 하나씩 열거해 드리겠습니다.

  1. 개요 : 전반적인 태그, 트리거, 변수들의 설치 상황이나 발행 상황을 볼 수 있는 영역입니다.
  2. 태그 : 말 그대로 “명령어” 입니다. 예를들어, 구글 애널리틱스로 데이터를 보내라 ! 라던지, 페이스북 광고 관리자로
  3. 트리거 : 트리거는 한국어로 직역하면, 방아쇠 라는 뜻이지요 ?즉, 트리거는  “태그(명령어)” 가 발동하는 시점 입니다. 예를들어, “사용자가 우리 웹페이지를 보면 구글 애널리틱스로 데이터를 보내라” 라는 명령어가 있을 때, “사용자가 우리 웹페이지를 보면 !” 이라는 태그가 발동하는 조건을 정의하는데 우리는 트리거 라고 부릅니다.
  4. 변수 : 변수는 어떤 특정 요소를 정의할 때 입니다. 예를들어, “구매하기 버튼을 누르면 구글 애널리틱스로 데이터를 쏴라” 라는 문장이 있을 때, 우리는 모든 버튼이 아니라, [구매하기 버튼] 이 무엇인지 컴퓨터가 알아볼 수 있게 정의해주어야 합니다. 이를 변할 수 있는 값, 변수라고 부릅니다.
  5. 폴더 : 태그, 트리거, 변수가 많아지면 가독성이 떨어지고 다른 이해관계자들과의 커뮤니케이션 효율성이 떨어집니다. 그렇기 때문에 [폴더] 기능을 통해, 태그 트리거 변수를 마치 파일을 폴더에 넣듯이 저장하는 역할을 합니다.
  6. 템플릿 : 이미 전 세계에서는 구글 태그매니저를 적극적으로 활용하고 있습니다. 다양하고 창의적인 기능을 전 세계에 있는 태그매니저 전문가들이 템플릿으로 만들어 배포하고 있습니다. 그러한 템플릿을 적용할 때, 우리는 템플릿 기능을 통해 우리들만의 태그들을 하나의 집합으로 묶을 수 있습니다. 감이 오시겠지만, 사실 구글 태그매니저 소 카테고리에서 진짜 태그를 발행하는데 필요한 구성요소는 3가지 입니다.

바로 태그 , 트리거 , 변수 입니다. 

태그, 트리거, 변수를 제가 예를들어서 간단히 설명해보겠습니다.

빨간 모자를 쓴 사람이,
문을 열고 들어오면
박수를 쳐라
라는 문장이 있습니다.

여기서 [태그]는 무엇일까요? 네 바로 명령하는 말, “박수를 쳐라” 가 태그가 됩니다. 트리거는 당연히 , 박수를 치는 시점을 정의해야 하니까, “문을 열고 들어오면” 이 트리거의 역할을 수행합니다. “빨간 모자를 쓴 사람이” 는 당연히 특정 한 사람을 가르키는 것이기 때문에, 변수의 역할을 수행하게 됩니다.

여기서 한 문장을 더 써보겠습니다.

장바구니 페이지에
사용자가 들어오면
우리 구글 애널리틱스 계정으로 데이터를 쏴라

여기서는 당연히, “장바구니 페이지가 [변수], 사용자가 들어오면~ 이 [트리거], 우리 구글애널리틱스 계정으로 데이터를 쏴라 !” 가 [태그] 가 될 것입니다. 자 그러면 각각의 역할은 판단했으니, UI는 어떻게 되어있는지 살펴봅시다.

 

태그 영역으로 이동하면, 아직 만들어둔 태그가 별도로 없기 때문에, [새로 만들기] 버튼을 눌러, 살펴봅시다.

태그 영역으로 이동하면, 아직 만들어둔 태그가 별도로 없기 때문에, [새로 만들기] 버튼을 눌러, 살펴봅시다.

 

새로만들기 버튼을 누르면 왼쪽 상단에는 [이름 없는 태그]로 되어있고, 태그의 이름을 우리가 알아볼 수 있게 정의할 수 있습니다.새로만들기 버튼을 누르면 왼쪽 상단에는 [이름 없는 태그]로 되어있고, 태그의 이름을 우리가 알아볼 수 있게 정의할 수 있습니다. 그리고 2개의 비어있는 사각형이 나타나는데, 위쪽에 있는 사각형은, 태그를 설정하는 영역입니다. 구글 애널리틱스로 데이터를 쏠 것인지, 페이스북으로 데이터를 쏠 것인지 등등 명령어를 정의하는 영역입니다. 아래 쪽에 있는 사각형은 트리거 이지만 잠시 접어두고, 위쪽에 있는 네모칸을 클릭해 봅시다.

 

태그의 유형을 선택하라는 안내 팝업이 나타나며, 구글 애널리틱스, 구글 애즈 전환 추적, 구글 애즈 리마케팅, 구글 옵티마이즈 등, 구글에서 제공하는 다양한 솔루션들이 나타나는 것을 볼 수 있습니다. 구글에 있는 다양한 툴을 구글 태그매니저라는 매개체를 이용해 사용할 수 있습니다. 아래 쪽으로 스크롤을 더 해 볼까요 ?

 

데이터 분석을 하기 위해 만든 제3자 소프트웨어와도 쉽게 연동이 가능하도록 목록아래쪽으로 이동하면, FoxMetrics, Hotjar Tracking Code 등 다양한 소프트웨어 회사에서 데이터 분석을 하기 위해 만든 제3자 소프트웨어와도 쉽게 연동이 가능하도록 목록을 만들어두었습니다.

 

이제 모든 창을 잠시 다 끄고, 트리거 쪽으로 이동합시다. 역시나 [새로 만들기] 버튼을 클릭해 봅시다.이제 모든 창을 잠시 다 끄고, 트리거 쪽으로 이동합시다. 역시나 [새로 만들기] 버튼을 클릭해 봅시다.

 

트리거 역시 UI가 비슷하지만 이번에는 트리거만 설정하는 영역이 네모칸으로 나타나 있는 것을 볼 수 있습니다. 네모칸에 빈 영역을 클릭해 봅시다.트리거 역시 UI가 비슷하지만 이번에는 트리거만 설정하는 영역이 네모칸으로 나타나 있는 것을 볼 수 있습니다. 네모칸에 빈 영역을 클릭해 봅시다.

 

트리거 유형을 선택하라는 옵션들이 나타납니다.

트리거 유형을 선택하라는 옵션들이 나타납니다. [페이지뷰] , [클릭] , [사용자 참여] 등등의 다양한 사용자들의 상호작용을 미리 정의해 놓았습니다. 페이지뷰는 당연히, 어떤 사용자가 우리 웹사이트 내에서 특정 페이지에 방문했을 때, 태그를 발동시키도록 시점을 정의하는 영역입니다. 하지만 구글 애널리틱스가 웹사이트에 설치되어 있는 사이트라면, 이 페이지뷰 영역에 있는 트리거 유형은 사용하지 않는 것이 좋습니다.

예를들어서, 구글 애널리틱스가 웹사이트에 설치되어서, 실시간 리포트에서 내가 우리 웹사이트에서 어딘가에 있을 때마다 데이터를 전송하고 있는 상태라고 가정합시다. 그런데 구글 태그매니저에서, [결제완료 페이지 뷰가 발생하면 ~ 구글 애널리틱스로 데이터를 쏴라 !] 라는 태그를 만들었다면, 구글 애널리틱스에서 내포하고 있는 페이지뷰와, 구글 태그 매니저에서 새롭게 발행한 페이지뷰가 중복으로 발생되면서, 1명이 결제 완료 페이지에 도착해도, 페이지뷰가 2번 발생하게 됩니다.

그렇기 때문에 구글 애널리틱스가 이미 설치된 웹사이트에서는 구글 태그매니저에서, 페이지뷰 유형으로 태그를 만들게 되면 위험도가 있습니다. 이 부분은 추후 실습 과정에서 좀 더 자세히 다루도록 하겠습니다.

 

이번에는 [변수] 영역입니다.

이번에는 [변수] 영역입니다. 변수는 크게 구글 태그 매니저에서 기본적으로 제공해주는 [기본 제공 변수] 와 , 우리가 직접 변수를 생성해서 다룰 수 있는 [사용자 정의 변수] 로 나뉩니다. 우선 [기본 제공 변수] 영역의 [구성] 버튼을 눌러, 태그매니저에서 기본적으로 제공해주는 변수들이 무엇이 있는지 살펴봅시다.

 

[사용자 정의 변수] 쪽으로 이동해 봅시다.기본적으로 제공해주는 변수들이 굉장히 많죠 ? 조금 스크롤을 하게 되면, [클릭수] 라는 카테고리에 모여있는 Click Element, Classes, ID, Target, URL, Text 등의 변수들이 있습니다. 이 변수들이 바로, [구매하기 버튼] , [구독하기 버튼] , [장바구니 버튼] 등 특정 버튼 요소들을 정의하기 위해서 사용되는 변수들입니다. 일단은 기본 제공 변수 구성은 살펴만보고, [사용자 정의 변수] 쪽으로 이동해 봅시다.

 

사용자 정의변수에서 [새로 만들기] 버튼을 클릭하면, 직접 우리가 변수들을 만들 수 있습니다. 하지만, 변수를 직접 만들기 위해서는 대부분 JavaScript를 통해서 만들어지기 때문에, 개발 지식이 없다면 변수를 만들기가 다소 어려울 수 있습니다. 결국 궁극적으로 여러분들이 태그매니저를 더 높은 수준으로 활용하기 위해서는 개발을 공부해야만 합니다.

저 역시, 구글 태그매니저를 하다가, 개발 공부를 하고 있습니다. 하지만 , 지금은 하나의 변수만 먼저 만들어봅시다.우리가 지금 태그 매니저의 구성요소를 배우는 이유는 구글 애널리틱스 데이터 리포트에 데이터를 전송하고, 결과적으로 구글 애널리틱스와 구글 태그매니저를 서로 연동하기 위해 배우는 것입니다. 그렇기때문에, 우리가 지금 만든 구글 태그매니저 계정에서 연동할 구글 애널리틱스 계정의 ID를 직접 변수로 만들어줄 필요가 있습니다. 변수 정의 영역의 빈 공간을 클릭해 주세요.

 

변수 유형을 누르면 다양한 형태의 변수들이 나타납니다. 아직은 아무것도 모르셔도 괜찮습니다. 아래쪽으로 스크롤을 해봅시다.변수 유형을 누르면 다양한 형태의 변수들이 나타납니다. 아직은 아무것도 모르셔도 괜찮습니다. 아래쪽으로 스크롤을 해봅시다.

 

아래쪽으로 가면, [Google 애널리틱스 설정] 이라는 변수 유형이 있습니다. 이 변수를 선택합니다. 아래쪽으로 가면, [Google 애널리틱스 설정] 이라는 변수 유형이 있습니다. 이 변수를 선택합니다.

 

⑫ GA의 한계와 GTM 소개-18

이젠 구글 태그 매니저가 웹사이트에 제대로 설치되었는지 확인해보기 위해, 구글 태그 매니저 창으로 넘어가서, 팝업을 지우고, 오른쪽 상단 미리 보기 버튼을 클릭합니다.

 

변수에 이름을 GAID로 알아보기 쉽게 적어두고, 추적 ID란이 비어있는 것을 볼 수 있습니다.

변수에 이름을 GAID로 알아보기 쉽게 적어두고, 추적 ID란이 비어있는 것을 볼 수 있습니다. 이 추적 ID란에 우리 구글 애널리틱스 추적 ID를 그대로 복사해서 붙여주면 됩니다. 만들어둔 구글 애널리틱스 계정으로 이동합시다.

 

톱니바퀴 설정 버튼을 눌러 구글 애널리틱스의 홈 화면으로 들어옵니다.

톱니바퀴 설정 버튼을 눌러 구글 애널리틱스의 홈 화면으로 들어옵니다.

 

[추적 정보] – [추적 코드] 쪽으로 이동합니다.

 

이렇게 우리 구글 애널리틱스의 추적 ID가 있는 것을 볼 수 있습니다.

이렇게 우리 구글 애널리틱스의 추적 ID가 있는 것을 볼 수 있습니다. 이 ID는 고유값이기 때문에 사용자들마다 모두 다를 것입니다. 해당 추적 ID를 복사하여 붙여넣어주세요.

 

복사하여 붙여넣은 다음 , 오른쪽 상단 [저장] 버튼을 클릭합니다.

복사하여 붙여넣은 다음 , 오른쪽 상단 [저장] 버튼을 클릭합니다.

 

사용자 정의변수에 우리의 GAID가 들어가 있는 것을 볼 수 있습니다.이렇게 되면, 사용자 정의변수에 우리의 GAID가 들어가 있는 것을 볼 수 있습니다. 오른쪽 상단에 [제출] 버튼을 눌러, 실제로 변수를 태그매니저가 가지고 있도록 발행해줍니다.

 

버전을 제출하기 전, [버전 이름]과 [버전 설명] 란이 있습니다.

버전을 제출하기 전, [버전 이름]과 [버전 설명] 란이 있습니다. 이것은 어떠한 태그매니저 계정 내에서 변경사항을 적용할 때, 다른 사람들이 쉽게 그 변경사항을 알아볼 수 있도록 설명 내용을 기록하는 영역입니다. 물론 혼자 태그매니저를 사용한다고 할지라도, 예전 버젼을 조회하기 위해서, 이 부분은 미리 본인이 알아보기 쉽게 적어두는 것이 좋습니다.

 

알아볼 수 있도록 변경사항의 이름과 그 변경사항에 대한 설명을 적어주신 다음, 오른쪽 상단 [게시] 버튼을 눌러줍니다.

알아볼 수 있도록 변경사항의 이름과 그 변경사항에 대한 설명을 적어주신 다음, 오른쪽 상단 [게시] 버튼을 눌러줍니다.

 

그러면 버전이 발행되면서, [대카테고리]의 [버전] 영역으로 창이 넘어갑니다. 적어놓은 버전 이름과 버전 설명이 반영된 것을 볼 수 있습니다. 

그러면 버전이 발행되면서, [대카테고리]의 [버전] 영역으로 창이 넘어갑니다. 적어놓은 버전 이름과 버전 설명이 반영된 것을 볼 수 있습니다.

자 이제는 구글 애널리틱스에 데이터를 전송하기 위한 태그 매니저 연동 실습을 진행해보겠습니다. 하지만 주의할 점이 있습니다. 지금 하게 되는 실습은, 실제 웹사이트에 구글 애널리틱스가 설치되지 않은 분들이 태그 매니저 만으로 구글 애널리틱스 데이터를 조회하는 방법입니다.

만약에 구글 애널리틱스가 설치되어 있는 사이트라면, 해당 실습 과정은 태그, 트리거, 변수의 사용 방법과 구조를 파악하기 위함으로 실습만 해보시되, 실제 사이트에는 적용하시면 안됩니다.

 

우선 [태그] 영역으로 이동하여, 구글 애널리틱스로 데이터를 보내기 위하여, [새로 만들기] 버튼을 클릭합니다.

우선 [태그] 영역으로 이동하여, 구글 애널리틱스로 데이터를 보내기 위하여, [새로 만들기] 버튼을 클릭합니다.

 

태그의 이름을 [페이지 뷰]라고 우선 정의합시다.

태그의 이름을 [페이지 뷰]라고 우선 정의합시다. 우리는 버튼 클릭이나 스크롤과 같은 사용자 상호작용을 잡는 것이 아니라, 지금 당장은 우리 웹사이트에 들어온 사람들을 구글 애널리틱스 데이터로 보내는 연습을 진행할 것입니다.

 

태그의 유형은 당연히 우리가 지금 사용하고 있는 [범용 애널리틱스] or [유니버셜 애널리틱스] 를 선택해 줍니다.

태그의 유형은 당연히 우리가 지금 사용하고 있는 [범용 애널리틱스] or [유니버셜 애널리틱스] 를 선택해 줍니다.

 

추적의 유형은 당연히 페이지뷰가 발생하는대로, 데이터를 보낼 것이기 떄문에 [페이지 뷰] 라고 설정을 해두고, 두 번째 영역인 구글 애널리틱스 설정 영역을 주목해주세요.

추적의 유형은 당연히 페이지뷰가 발생하는대로, 데이터를 보낼 것이기 떄문에 [페이지 뷰] 라고 설정을 해두고, 두 번째 영역인 구글 애널리틱스 설정 영역을 주목해주세요. 당연히 데이터를 구글 애널리틱스로 보내기 위해서는 어떤 구글 애널리틱스 계정에 보낼 것인가에 대한 설명이 필요합니다. 그렇기 때문에 우리는 아까 만들어준 우리들의 GAID로 데이터를 전송할 수 있도록 설정 할 수 있습니다. 여러분도 똑같이 따라와주셨다면 GAID가 있는 것을 확인하실 수 있습니다. GAID를 눌러주세요.

 

그런 다음 아래쪽 트리거 설정의 빈 영역을 눌러주시면, 트리거를 선택하라고 나타납니다.

그런 다음 아래쪽 트리거 설정의 빈 영역을 눌러주시면, 트리거를 선택하라고 나타납니다. 우선 우리는 ‘우리 웹사이트에 사람들이 들어오는대로, 우리 구글 애널리틱스 계정에 데이터를 보내라 ! “ 라는 명령어를 만들어줄 것이기 때문에 구글 태그매니저에서 기본적으로 제공해주고 있는 [All Pageview] 트리거를 선택해 줍니다. 이 트리거는, 우리 웹사이트에 모든 웹페이지에 트래픽이 들어오면 ~ 이라는 의미를 내포하고 있습니다.

 

자 이러면 태그가 모두 완성되었습니다. 우리는 사람들이 우리 웹사이트에 방문할때 마다 구글 애널리틱스에 데이터를 보내주기 위하여,

자 이러면 태그가 모두 완성되었습니다. 우리는 사람들이 우리 웹사이트에 방문할때 마다 구글 애널리틱스에 데이터를 보내주기 위하여,

  1. 구글 애널리틱스 태그 유형 선택
  2. 추적 유형을 페이지뷰로 설정
  3. 우리 구글 애널리틱스 계정으로 데이터를 보내기 위해, 미리 만들어둔 사용자 정의 변수 GAID 설정
  4. 트리거 영역은 당연히 모든 데이터를 누락 없이 보내기 위해, 구글 태그매니저에서 기본적으로 제공해주는 All pages 트리거를 설정

하는 절차를 거쳤습니다.

 

저장 버튼을 누르면, 여러분들의 태그 영역에 지금 우리가 만들어준 태그가 들어가 있는 것을 확인할 수 있습니다.

저장 버튼을 누르면, 여러분들의 태그 영역에 지금 우리가 만들어준 태그가 들어가 있는 것을 확인할 수 있습니다.

자 ! 여기서 주의할점은, 구글 애널리틱스 코드와 구글 태그매니저 코드를 혼동하지 않는 것입니다. 만약에 우리 웹사이트에 구글 애널리틱스 코드가 이미 설치되어 있다고 가정합시다. 구글 애널리틱스 코드에는 “페이지 뷰” 라는 명령어가 내포되어 있어, 데이터를 정상적으로 트래킹하고 있습니다.

하지만  이 와중에 지금 우리가 실습을 해본것 처럼, 구글 태그 매니저에 다시 [all page view] 트리거를 사용해, 페이지 뷰 유형의 태그를 우리 구글 애널리틱스로 보낸다면 어떻게 될까요 ? Pageview가 바로 2번 발생하는 것입니다. 2번 발생하게 되면, 1명이 들어와도 그 사람의 페이지 뷰는 2가 집계 될 것이라, 데이터가 뻥튀기 될 수 있습니다. 또, 2번의 페이지 뷰가 연속으로 일어나면, 이 사용자는 어떤 상호작용을 했기 때문에, 페이지 뷰가 두번 발생했다고 구글 애널리틱스가 판단합니다. 상호작용을 했다고 판단하게 되면, 이탈률에 집계되지 않습니다. 방문하자 마자 상호작용이 일어나는 이 같은 경우가 이탈률을 급감하게 만드는 주요 원인이 됩니다. 실제 실무자들도 많이들 겪고 있는 오류라서 난이도가 다소 높으니, 반복해서 봐주시고 이해해주시면 좋을 듯 합니다.

 

그로스 해킹 에이전시, LABBIT 바로가기
구글 애널리틱스 가이드 만나보기
페이스북 광고 가이드 만나보기


 

원문보기

LABBIT
안녕하세요. 그로스해킹 에이전시 LABBIT 입니다. LABBIT은 고객사의 비즈니스를 데이터 기반으로 단시간안에 성장시키는 팀이며, 개발, 마케팅, 디자인팀이 협업하여 그로스해킹 관련 서비스를 제공하고 있습니다.

댓글

귀하의 의견을 입력하십시요.!
여기에 이름을 입력하십시요.