⑭ GTM 버튼 클릭 트래킹
그로스마케팅 파트너 허들러스
14. Google Tag Manager로 버튼 클릭 트래킹 하기
안녕하세요. 그로스마케팅 파트너 허들러스의 유성민 이사입니다. 허들러스는 데이터에 기반한 비즈니스 성장의 방법론은 연구하며 컨설팅을 진행해드리고 있습니다. 앞으로 브런치에 구글 애널리틱스의 관련된 글을 순차적으로 연재해나갈 예정입니다 :) 오늘은 그 연재의 열네 번째 이야기를 진행해보도록 할게요.
구글 애널리틱스만으로 , 사용자들의 이벤트 (클릭, 더블클릭, 스크롤)를 추적하기 위해서는 , 우리 웹사이트에 직접 각 상호작용을 트래킹 하는 자바스크립트 명령어를 짜서, 직접 웹사이트에 코드를 통해 적용하여 구글 애널리틱스와 연동하는 하드 코딩을 해야 합니다. 하지만, 명령어를 GUI(그래픽 기반의 User Interface)를 통해서 유연하고 쉽게 다룰 수 있는 구글 태그 매니저를 사용한다면, 개발 지식이 없더라도, 정상적으로 사용자들의 상호작용을 트래킹 할 수 있습니다. 이번 강의에서는 구글 태그 매니저의 버튼 클릭 트래킹과 스크롤 트래킹에 대해서 살펴보면서, 구글 태그 매니저의 원리에 대해서 익혀보도록 하겠습니다.
사용자들의 상호작용 중 우리가 가장 많이 추적을 하고 싶어 하는 요소가 바로 버튼 클릭 일 것입니다. 예를 들어, 쇼핑몰에서 구글 애널리틱스 만으로 결제 완료 페이지에 도착한 사람들을 트래킹 하기 위한 [도착] 유형의 목표 세팅은 가능하지만, 대한민국의 경우 쇼핑몰에서 발생하는 대부분의 매출이 [네이버 페이]로 이루어집니다. 네이버 페이는 버튼을 클릭해야 추적이 가능하다 보니, 이런 경우 구글 태그 매니저를 통해 네이버 페이 버튼을 얼마나 클릭하는지 트래킹 할 필요성이 생깁니다. 그 밖의 콘텐츠 중심의 웹사이트는 [구독하기] , [공유하기] 등등의 버튼들도 클릭하게 되면 얻게 되는 인사이트가 매우 많아집니다.
저는 구글 태그 매니저가 설치되어 있는 저의 개인 티스토리 블로그를 가지고 실습을 진행해 보겠습니다. 여러분들도 직접, 티스토리 블로그를 만들어, 구글 태그 매니저를 설치한 다음, 따라 하면서 시작해보세요.
자, 이곳은 교육용으로 진행하고 있는 제 개인 블로그이며, 이 개인 블로그에 구글 태그 매니저를 설치한 모습입니다. 여러분도 보시다시피 티스토리 블로그 사이트 하단에, 구글 태그 매니저 컨테이너가 나타나는 것을 볼 수 있습니다. 우선 저는 해당 화면에서, [share this post] 즉, 공유하기 버튼을 얼마나 클릭하는지에 대한 전환율을 구글 애널리틱스에서 조회하고 싶습니다. 그렇기 때문에, 해당 공유하기 버튼을 클릭하는 시점에, 구글 애널리틱스에 데이터를 보낼 수 있도록 구글 태그 매니저에서 명령어를 만들어볼 것입니다. 우선 가장 먼저 해주어야 할 것은 이 버튼의 HTML 요소가 어떻게 생겼는지 보아야 합니다.
특정 요소의 HTML을 보는 방법은 해당 요소 위에다가 마우스를 갖다 놓고, 오른쪽 마우스를 누른 다음, [검사] 버튼을 눌러주면 볼 수 있습니다. 당연히 크롬 브라우저에서만 지원이 가능한 기능이기 때문에, 실습을 진행하시는 분들은 크롬 브라우저를 통해서 실습을 진행해주세요.
검사 버튼을 누르면, 오른쪽 div class라는 영역에 파란색으로 커서가 칠해지면서, 동시에 제가 이 커서가 칠해진 부분에 마우스를 갖다 대면 그곳에 해당하는 영역인 [share this post] 버튼도 커서로 잡히게 됩니다. 즉, 동시에 커서가 잡히는 것으로 보아, <div class ~~~~> </div> 요소는 제가 지금 커서로 잡고 있는 버튼을 가리키는 것입니다. 코드가 나왔다고 너무 어려워 마세요. 별거 없습니다. 우선 가볍게 이해를 돕기 위해, 간단한 개발 상식을 짚고 넘어가겠습니다.
현재 버튼 쪽에 커서가 되어있는 부분은,
<div class=”shareButton btn btn-default btn-sm”>share this post </div>
라고 나타나 있습니다. 여기서 div는 HTML의 요소 태그 중 하나로써(태그 매니저의 태그와는 다른 의미입니다.). Block으로 구분 짓는 영역이라고만 이해해주시면 됩니다. 그러면 div 뒤 쪽의 class는 무엇일까요?
class는 이 div 요소의 이름이자, [속성]이라고 부릅니다. 하나의 div에 속성은 여러 가지가 있을 수 있습니다. 대표적인 것으로는 class, id 등이 있습니다. 보통은 이 class와 id가 각 요소들을 정의하는 이름을 나타냅니다. 당연히 두 가지를 구분 짓는 이유는 차이가 있겠지요?
class : 그룹, 단체라는 의미를 가지고 있습니다. 즉, 각각 다른 요소라도, 클래스 이름이 똑같다면, 우리는 해당 클래스에 집합적으로 스타일을 적용해줄 수 있습니다. 예를 들어, share this post라는 버튼과 submit라는 버튼 2개가 있다고 가정합시다. 이들은 각기 용도도 다르고 이름도 다르지만, 검은색 배경색에 하얀색 글씨체를 동일하게 가지고 있습니다. 그러면 우리는 이들에게 각각 “검은색 배경과 하얀색 글씨를 가지도록 해라"라고 스타일 CSS 언어를 짜줄 수 있지만, 굉장히 비효율적이죠? 그래서 같은 class를 만들어, 동시에 적용시킬 수 있습니다. “class 값이 shareButton인 요소들에게는 모두 다 검은색 배경과 흰색의 폰트 색을 적용하라"라고 쉽게 코드를 짤 수 있지요. 이렇게 집합적으로 묶어서 스타일을 동일하게 적용시키기 위해 만든 속성이 바로 class입니다.
id : ID는 좀 감이 오시나요? identification의 준말로써, 이 ID는 집합이 아니라, ‘고유한’ 요소를 의미합니다. 하나의 웹페이지에 똑같은 id가 있으면 안 됩니다. 집합적으로 스타일을 적용하더라도, 어느 한 요소에만 다른 스타일을 적용시켜야 하는 경우는 매우 빈번하게 발생합니다. 그렇기 때문에 어떤 요소는 id와 클래스 속성을 동시에 가질 수 있습니다.
자, 다시 본론으로 돌아와서, 클래스와 id는 HTML을 구성하는 각 요소들에게 공통적인 또는 개별적인 스타일을 지정하기 위한 이름값입니다. 클래스와 아이디를 부여하는 것은 웹사이트를 만든 개발자가 짜기 나름입니다. 지금 같이 [공유하기 버튼]의 경우, 개별적으로 스타일을 적용할 필요가 없기 때문에, id는 넣지 않고, class 속성만 넣은 것을 볼 수 있습니다. 즉, 각 요소들이 어떤 이름의 속성을 가지고 있는지는 아무도 모릅니다. 심지어, class와 id가 모두 없는 경우도 있습니다. 그럴 경우에는 또 다른 속성을 가지고 잡아야 하는 것이지요.
이때까지 설명한 개발적인 용어가 이해되지 않는다면 가볍게 넘어가셔도 좋습니다. 다만, 우리가 기억해야 할 것은 “요소들을 정의하는 속성이 있는데, 이 속성들은 개발자들이 짜기 나름이라서, 무엇이 정의될지는 직접 검사를 해보아야 확인할 수 있다" 정도입니다.
이제, [공유하기] 버튼이 class 값을 가지고 있다는 것을 우리는 [검사] 기능을 통해 인지하였습니다. 이제 구글 태그 매니저 쪽으로 이동합니다.
구글 태그 매니저에서, 이벤트 상호작용(클릭, 스크롤, 유튜브 영상 조회 등)을 잡기 위한 순서는 하기와 같습니다.
1. 상호작용에 필요한 변수 정의
2. 태그 생성
3. 트리거 정의
여기서 변수에 대해서는 추후 세팅을 하면서 알려드리겠습니다. 우선은 구글 태그 매니저의 [변수] 영역으로 이동해주세요. 변수 영역에는 당연히 [기본 제공 변수]와, [사용자 정의 변수]가 있습니다. 다행히도 우리가 트래킹 하기 위한 [클릭 행위]에 대한 변수는 우리가 직접 변수를 만들어줄 필요가 없습니다. [기본 제공 변수] 영역에서 [구성하기] 버튼을 눌러봅시다.
스크롤을 좀 하다 보면, [클릭수]라는 카테고리에 Click Element, Click Classes, Click ID, Click Target, Click URL, Click Text 변수들이 보입니다. 지금 나타나는 이 기본 제공 변수들이 우리가 사용자가 어떤 요소에 대해서 클릭이라는 행위를 발생할 때, 어떤 요소를 정의하기 위한 속성들의 이름입니다. 아까 전 잠깐 배웠던 Class와 ID도 있다는 것을 볼 수 있습니다.
하지만 계속 강조하듯이, 어떤 속성이 들어갈지는 개발자들이 코드를 짜기 나름입니다. 내가 개발한 사이트가 아니라면, 우리는 클릭 쪽에 있는 변수들을 일단은 모두 체크해두어, 나중에 선별적으로 사용할 수 있습니다. 클릭에 관련된 변수들을 모두 체크해주세요.
이제는 2번째 과정입니다. 태그 쪽으로 들어가, 새로운 태그를 만들어봅시다. 태그는 명령어입니다. 그래서 저는 지금 “공유하기 버튼을 클릭하면, 우리 구글 애널리틱스로 데이터를 쏴라!”라는 명령어를 만들어 볼 것입니다. [새로 만들기]를 눌러 새롭게 태그를 정의해 봅시다.
우선은 태그의 이름을 붙여줍니다. 저는 그냥 알아보기 쉽게 [공유하기 버튼 클릭]이라고 태그의 이름을 붙였습니다. 위에 네모칸인 태그를 먼저 정의하고, 아래쪽 트리거 영역을 정의해보겠습니다.
당연히 우리는 구글 애널리틱스로 데이터를 보낼 것이기 때문에, 태그의 유형은 Google 애널리틱스입니다. 해당 태그 유형을 선택해주세요.
태그를 선택하면, [추적 유형] 영역이 페이지뷰로 되어있습니다. 하지만 우리는 지금 페이지뷰를 선택하는 것이 아니라 사용자의 상호작용인 [이벤트]를 잡아서 데이터를 보낼 것이기 때문에, [추적 유형]을 [이벤트]로 바꿔줍니다.
이벤트로 추적 유형을 바꾸는 순간, 이벤트 추적 매개변수라는 것이 나타납니다. 변수라는 말이 너무 많이 등장하죠? 그만큼 변수는 굉장히 중요한 개념입니다. 우선 , 매개변수의 의미는 서로 다른 A , B를 연결해주는 매개체로서의 변수라고 생각해주시면 됩니다. 지금 같은 경우엔, 우리가 데이터를 트래킹 하게 되는 구글 태그 매니저가 A가 되는 것이고, 데이터를 받는 리포트 조회 툴인 구글 애널리틱스가 B가 되는 것입니다. 여기서 적어줄 우리의 매개변수는 바로, 구글 태그 매니저와 구글 애널리틱스를 연동시킬 수 있는 변수라고 생각해주시면 됩니다.
매개변수의 종류는 크게 4가지가 있습니다. 카테고리, 작업, 라벨, 값 영역입니다. 이 4가지 영역 중, 카테고리와 작업은 필수적으로 기입을 해주어야 하는 값이고, 라벨과 값 영역은 추가적인 정보를 더 넣고 싶을 때 선택적으로 사용하는 매개변수입니다. 라벨과 값에 대해서는 우리가 아직 배우기엔 너무 복잡해집니다.
우선은 카테고리와 작업 값에 저는 제가 알아볼 수 있게끔 매개변수를 적어주었습니다. 카테고리 값에는, 클릭하는 요소의 대상이 되는 [공유하 기버 튼]이라고 적어주었습니다. 그리고, 액션 값에는 사용자의 행위를 정의하는 [클릭]이라고 적어주었습니다. 이 카테고리 값과 라벨 값을 잘 기억해두셨다가, 마지막에 다시 구글 애널리틱스에서 써먹을 예정입니다.
3번째는 구글 애널리틱스 설정 영역입니다. 구글 애널리틱스에다가 데이터를 보낼 텐데, 어느 계정에 데이터를 보낼지를 선택하는 영역입니다. 저는 미리 만들어준 사용자 정의 변수인 GAID를 선택하여, 제가 데이터를 보낼 대상이 되는 구글 애널리틱스의 고유한 ID를 넣어주었습니다.
이제 태그 설정은 모두 다 끝났습니다. 태그, 트리거, 변수의 정의를 자세히 아셔야 합니다. 태그는 명령어, 트리거는 명령어가 발동하는 시점, 그리고 변수는 요소를 정의하는 값입니다. “공유하기 버튼을 클릭하면, 우리 구글 에널리틱스 계정으로 데이터를 보내라"라는 명령어에서, 우리는 지금 “구글 애널리틱스 계정으로 데이터를 보내라!” 까지만 정의해준 것입니다. 이제 , “공유하기 버튼을 클릭하면 ~”을 정의해주기 위한, 명령어가 발동하는 시점! 트리거를 클릭합시다.
지금 트리거를 선택하려고 보니, 구글 태그 매니저에서 기본적으로 제공해주는 [All page view] 트리거 밖에 없습니다. 우리는 버튼 클릭이라는 상호작용을 트래킹해야 하기 때문에, [Page view]가 아닌, 클릭 트리거를 만들어주어야 합니다. (+) 버튼을 눌러 트리거를 하나 새롭게 만들어봅시다.
트리거에도 각각 여러분들이 알아볼 수 있는 이름을 적어주시면 됩니다. 저는 [공유하기 버튼 클릭 트리거]라고 이름을 지었습니다. 이제 트리거 구성 영역을 클릭하여 트리거를 만들어 줍시다.
어떤 유형의 트리거 유형을 선택해야 할지 딱 봐도 감이 오시죠? 바로 [클릭] 카테고리에 있는 [링크만] 또는 [모든 요소]를 선택해주실 수 있습니다. 우리가 추적하고자 하는 특정 버튼이, 다른 페이지로 이동하는 링크 값을 가지고 있다면, [링크만] 트리거 유형을 선택해줘도 되지만, 지금 우리가 추적하고자 하는 [share this post] 버튼은 어떤 페이지로 이동하는 것이 아닌, [공유하기] 역할의 버튼만 합니다. 그렇기 때문에 우리는 [클릭] 카테고리에서 [모든 요소]를 선택해 줍니다.
모든 요소로 트리거의 유형을 선택하니, 옵션이 2가지가 나타납니다. 바로, 모든 클릭과 일부 클릭입니다. 우리는 다양한 클릭 요소들 중에서 [share this post] 버튼, 즉, 특정 버튼의 클릭을 잡아야 하기 때문에, [모든 클릭] 이 아닌, [일부 클릭]을 잡아야 합니다. 만약 [모든 클릭]으로 트리거를 지정하게 되면 어떻게 될까요? 사용자가 웹사이트에 들어와서, 어떤 빈 공간을 클릭해도 모두 다 트리거가 발동됩니다. 그러면 카오스가 되겠죠?
일부 클릭 옵션을 선택하니, 아래쪽에 네모칸이 3개가 나옵니다. 왼쪽부터, 오른쪽 순서대로 우리는 키값, 수식, Value값이라고 부르게 됩니다. 여기가 바로 변수의 값을 지정해주는 영역입니다. 여기서 변수에 대한 설명을 간략하게 하고 넘어가겠습니다.
변수는 말 그대로 변할 수 있는 값들을 담아놓은 하나의 그릇이라고 생각해주시면 됩니다. 예를 들어 철수가 가지고 있는 돈이 2000원이라고 가정을 합시다.
철수가 가지고 있는 돈 = 2000원
자 , 근데 여기서 철수가 1000원짜리 아이스크림을 사 먹었습니다. 그러면 철수가 가지고 있는 돈은 당연히 1000원이 되겠죠.
철수가 가지고 있는 돈 = 1000원
1000원짜리 아이스크림을 사 먹고 난 후, 철수가 가지고 있는 돈의 값이 2000원에서 1000원으로 바뀐 것을 알 수 있습니다. 하지만, 이 값을 담고 있는 그릇인, “철수가 가지고 있는 돈"이라는 이름은 변하지 않았습니다.
여기서 좌항에 속하는 “철수가 가지고 있는 돈"을 우리는 Key 값이라고 부릅니다. 그리고 [ = ]는 수식이 될 것입니다. 그리고 마지막으로, 2000원에서, 1000원으로 변해버린 값은 Value 값이라고 부릅니다. 모든 변수는 이러한 형태로 제공되고 있습니다. 우리가 지금 정의해주려고 하는 키값도 사실은 고정된 채로 있고, 해당 키값이 가지고 있는 Value 값이 변할 뿐이지요.
그런데 키값을 보니까 익숙한 변수명들이 눈에 띕니다. Click Text, Url, Classes, ID 등등이 보이시죠? 이 변수들이 보이는 이유는 우리가 세팅 초반에 [기본 제공 변수] 영역에서 클릭에 관련된 변수들을 모두 체크하여 추가해주었기 때문에 나타납니다. 아까 [share this post] 버튼에 검사 버튼을 눌렀을 때, 어떤 속성을 가지고 있었는지 기억나시나요? 네 바로 Class 속성을 가지고 있습니다. 그래서 우리는 키값을 Click Classes로 지정할 수 있습니다.
사이트로 다시 돌아가 해당 버튼이 클래스 요소를 가지고 있는지 다시 한번 확인하고, 해당 클래스의 Value 값도 살펴봅시다. 당연히 클래스라는 속성을 가지고 있고, shareButton btn btn-default btn-sm이라는 Value 값을 가지고 있습니다. 여기서 띄어쓰기는 클래스 1개의 단위입니다. 즉 이 버튼을 클래스를 총 4개를 동시에 가지고 있는 버튼입니다.
자 그래서, 이 클래스의 Value값을 그대로 복사해서 가져와주시면 됩니다. 해당 큰따옴표가 시작되는 영역에서, 더블클릭을 해주시면, 그대로 값을 가져올 수 있습니다. 이 값을 복사해준 다음에, 구글 태그 매니저로 돌아갑니다.
저는 수식을 이렇게 만들었습니다. 클릭하게 되는 요소의 클래스 이름이 [shareButton btn btn-default btn-sm]와 같으면, 공유하기 버튼 클릭 트리거로 지정해라!라고 할 수 있습니다. 다르게 하고 싶으신 분들은 수식 영역을 [포함]으로 바꾼 다음 단순히 Value 값에 [shareButton]만 넣어줘도, 클래스 이름이 shareButton을 포함하고 있으면, 공유하기 버튼 클릭 트리거로 지정하는 변수 정의를 할 수 있습니다.
그렇지만, 클래스 이름은 우리가 추적하고자 하는 버튼이 아닌, 다른 웹사이트의 요소들과 같이 공유하고 있을 수도 있기 때문에 최대한 우리가 추적하고자 하는 버튼만 고유하게 가질 것 같은 Class Value 값으로 수식을 지정해주는 것이 좋습니다.
이렇게 수식 지정이 완료되면, 오른쪽 상단 [저장] 버튼을 눌러줍니다.
자, 이렇게 되면 태그가 완성됩니다. 제가 하나씩 해석해드릴게요.
“사용자가 클릭이라는 행위를 발생시킬 때, 클릭하는 요소의 Classes 값이 shareButton btn btn-default btn-sm과 같다면, 이를 공유하기 버튼 클릭 트리거라고 정의하고, 공유하기 버튼 클릭 트리거가 발동하면, 구글 애널리틱스에 데이터를 보내라! 그리고 데이터를 보낼 때, 카테고리 값에는 [공유하 기버 튼] , 액션 값에는 [클릭]이라는 값을 매개변수로 지정하여 데이터를 보내라! “라는 하나의 태그가 만들어집니다.
아마 바로 이해하시긴 어려울 수도 있겠습니다만, 최대한 자세히 설명을 해보았으니, 다시 한번 해보면서 여러분들 몸에 익히셨으면 좋겠습니다. 해당 원리를 이해하지 못하면, 구글 태그 매니저를 활용하기가 어렵습니다.
자 이제 새로운 태그를 만들어주고, 목록에 [공유하기 버튼 클릭]이라는 명령어 태그가 나타난 것을 볼 수 있습니다. 이제 태그를 발행하기 위해 오른쪽 상단 [제출] 버튼을 눌러줍니다. (물론 안전하게 하시려면, 미리보기를 눌러주시고 테스트를 하신 다음에, 진행해주시길 바랍니다.)
이제 태그를 정식으로 발행할 것이기 때문에, 버전 이름과 버전 설명을 다른 이해관계자들이 알아볼 수 있도록 적어줍니다.
게시가 완료되면 제가 적어준 버전과, 새롭게 추가해준 태그, 트리거가 나타나는 것을 볼 수 있습니다.
이제 확인을 하기 위해 태그 매니저 홈 화면으로 돌아온 뒤, [미리 보기]를 한번 더 눌러주신 다음, 여러분의 블로그를 새로고침 해주세요.
저 역시 새로고침을 했더니, 구글 태그 매니저 컨테이너에 [태그]가 한 개 더 생긴 것을 볼 수 있습니다. 하지만 해당 태그는 아직 이 페이지에서 Fired 되지 않았습니다. 왜 그럴까요? 제가 아직 [share this post] 버튼을 누르지 않았기 때문에, fired가 되지 않은 것입니다. 해당 태그가 fired 되는 순간 구글 애널리틱스로 데이터를 보낼 것입니다. 제가 한번 눌러보겠습니다.
공유하기 버튼을 눌렀더니. 아까 컨테이너의 아래쪽에 있던, [공유하기 버튼 클릭]이 위쪽으로 올라가 fired 된 것을 볼 수 있습니다. 정상적으로 제가 버튼을 누를 때 명령어가 작동을 했으니, 이 사용자 클릭 이벤트가 구글 애널리틱스 실시간 리포트에 반영이 되는지 확인해 보겠습니다.
사용자의 이벤트를 실시간으로 확인하는 방법은 [실시간] - [이벤트] 리포트에서 확인 가능합니다. 실제로 한 명이 데스크톱으로 들어와서, 카테고리 값에는 공유하기 버튼이라는 Value를, 액션 값에는 클릭이라는 Value를 매개변수로 지정하여 이벤트가 발생된 것을 확인할 수 있습니다.
그렇다면 여기서 끝일까요? 당연히 끝이 아닙니다. 구글 애널리틱스에서 [목표 세팅]을 하지 않으면, 지금 실시간 리포트에 잡힌 이 이벤트는 날아갈 것입니다. 즉, 데이터 리포트에 저장이 되지 않는다는 것이지요. 우리의 원래 목표는 구글 애널리틱스에서 제공하는 다양한 측정 기준 별로, [공유하기 버튼]을 얼마나 클릭하는지에 대한 전환율을 보고 싶은 것입니다. 외우세요! 전환율을 보려면 목표를 설정해야 한다!
목표 세팅을 위해 구글 애널리틱스 설정 영역으로 돌아가 목표를 만들어줍시다.
[새 목표]를 눌러 새로운 목표를 정의해주는 과정을 시작합니다.
당연히, 템플릿이 아닌, [맞춤 설정]을 눌러줍니다.
목표의 이름은 여러분들이 알아볼 수 있으면 괜찮습니다. 저는 [공유하기 버튼 클릭]으로 목표의 이름을 지정하였습니다. 이번에는 목표의 유형이 도착, 시간, 세션당 페이지 수도 아닌, 사용자의 상호작용을 의미하는 [이벤트]입니다. [이벤트]를 누르면, 우리한테 익숙한 UI가 나타납니다.
바로, 카테고리, 액션, 라벨, 값 영역입니다. 이것이 바로 구글 태그 매니저에서 설정해두었던 매개변수와 구글 애널리틱스가 데이터를 받을 매개변수를 서로 연동해주는 과정입니다. 카테고리 값과 액션 값을 무엇으로 정의해두었는지 기억이 나지 않는다면, 구글 태그 매니저로 돌아가 확인할 수 있습니다.
작업 공간 영역에서 제가 만들어놓은 [공유하기 버튼 클릭] 태그를 클릭해 줍니다.
카테고리 값에는 [공유하 기버 튼] 이 띄어쓰기 없이 들어가 있고, 작업 값에는 [클릭]이라는 키워드가 있습니다. 이 부분을 기억하고 구글 애널리틱스에 들어가 그대로 적어주면 됩니다.
카테고리 값과 액션을 띄어쓰기까지 구분하여 반드시 적어주세요. 해당 매개변수 값이 완전히 일치해야 목표 데이터에 집계되며, 최종적으로 전환율을 관측할 수 있습니다.
이제 비로소 공유하기 버튼 클릭을 만들어냈습니다.
아직은 데이터가 없지만, 추후 데이터가 쌓이면, 연령별, 성별별, 소스/매체별로 [공유하기 버튼 클릭]에 대한 완료 수와 전환율을 동시에 파악할 수 있겠지요? 이것이 이벤트 트래킹의 첫 단추입니다.
전체 과정은 모두 끝났고, 한 가지 더 팁을 드리고 싶습니다. 해당 티스토리 블로그에서, 저는 “지금 보고 있는 페이지에서만, 공유하기 버튼을 클릭하고 싶은" 경우가 있을 수 있습니다. 사실 티스토리 블로그에 있는 모든 상세페이지에 공유하기 버튼 클릭을 Class 값을 통해 트래킹하고 있으나, 간혹 특정 페이지의 클릭만 따로 집계하고 싶을 때가 있을 것입니다. 이 경우, 교차 조건을 만족해야 합니다.
일단 똑같이 [공유하기 버튼] 이니까 당연히 Click Classes 값은 shareButton ~ 일 것입니다. 하지만, 이 페이지에서 만의 버튼을 트래킹 하고 싶은 경우이기 때문에, Page URL 조건을 한 개 더 추가해야 합니다. URL을 잘 봐주시고, 구글 태그 매니저로 넘어가 봅시다.
발동하는 시점을 정의해주는 [트리거] 영역으로 들어왔습니다. 우리가 미리 만들어 놓은 [공유하기 버튼 클릭 트리거]를 눌러주세요.
해당 트리거가 보이는데, 여기서 조건을 한 가지 더 추가해주기 위해서는 (+) 버튼을 통해 조건 추가가 가능합니다. 여기서 추가되는 조건들은 몇 개가 되든 상관없으나, 이 조건들은 동시에 만족해야만, 클릭 트리거가 발생합니다.
당연히 이 페이지에서 만의 버튼을 클릭하고 싶기 때문에, 저는 Key 값을 Page URL로 선택합니다.
다시 사이트로 돌아가 제가 보고 있는 페이지의 URL을 자세히 볼까요? 왠지 페이지 URL은 1개에 웹페이지에 고유한 1개만 존재하다 보니, 이 상세 페이지만인 610114라는 숫자를 페이지 URL에 포함하고 있을 것으로 추측됩니다. 그래서 저는 이 숫자만 그대로 가져옵니다.
그대로 숫자를 페이지 URL에 포함하는 조건으로 붙여 넣기를 해주면, “클래스가 shareButton btn btn-default btn-sm 이면서, page URL이 610114를 포함하고 있는 조건을 동시에 만족한다면 , 공유하기 버튼 클릭 트리거로 간주하라!”라고 명령어 조건을 바꿔줄 수 있습니다. 여기서 (+) 버튼을 통해, 추가로 정의해주는 조건은 두 조건이 모두 만족해야만 하는 AND 조건입니다. 그렇다면 OR 조건은 어떻게 하면 될까요?
다시 제 티스토리 블로그로 돌아왔습니다. 저는 share this post 버튼과 , 제 블로그 최하단에 있는 submit 버튼을 클릭할 때 둘 다 어느 것을 클릭해도, 같은 태그가 발동되도록 정의하고 싶습니다.
이 경우, OR 조건을 만들어주어야 하는데, 이는 태그 영역에서 가능합니다.
우선 Submit 버튼에 오른쪽 마우스를 눌러 어떤 속성을 가지고 있는지 확인합니다. class 속성이 다행히 있군요. 제가 새롭게 조건으로 추가할 클릭 트리거 역시, Classes 변수로 잡으면 될 것 같습니다.
제가 아까 만든 태그들 중 [공유하기 버튼 클릭] 태그로 이동합니다.
해당 태그의 트리거 영역에 마우스를 갖다 대면, 연필 모양의 수정 버튼이 나타납니다. 이 버튼을 눌러주세요.
여기서 (+) 버튼을 통해, submit 버튼을 클릭했을 때 발동되는 트리거를 하나 더 만들어야 합니다.
역시나 (+) 버튼을 통해 새로운 트리거를 정의해 줍니다.
트리거 이름 역시 여러분들이 알아볼 수 있게 적어주시고, 아까와 같이 클릭 트리거를 만들어봅시다.
트리거 유형도 동일하게 [클릭] - [모든 요소]를 선택합니다.
그다음에 Submit 버튼도 Classes라는 속성을 가지고 있었던 것, 기억나시죠?
submit 버튼의 클래스는 share this post 버튼의 클래스와 당연히 다르네요. btn btn-default btnComment btn-sm을 그대로 복사하여 태그 매니저로 가져옵니다.
그다음 저장 버튼을 눌러봅시다.
자 이렇게 버튼 클릭 조건이 “또는"이라는 연산자 사이에 두 개 다 묶인 것을 볼 수 있습니다. 이 경우, 구글 애널리틱스로 보내는 매개변수의 값은 같지만, submit 버튼 클릭이나 , 공유하기 버튼 클릭이 둘 중 하나만 발생해도, 데이터를 전송하게 됩니다. 어렵지 않으시죠? 정리를 하자면, AND 조건은 트리거 안에서! OR 조건은 태그 안에서 지정한다는 것! 잊지 말아 주세요.
