[Tagmanager_#5] 구글태그매니저, 클릭 이벤트 추적(클릭, 링크)

 

 

 

[Tagmanager_#5] 구글태그매니저, 클릭 이벤트 추적(클릭, 링크)

 

이 글은 클릭과 관련된 이벤트를 추적하는 방법과 관련된 정보를 포함하고 있습니다.

 

  구글태그매니저, 클릭 이벤트 추적이란?

 

 

버튼, 링크 등에 대한 클릭

 

  클릭 이벤트란?

이벤트(Event)는 웹사이트 방문자, 사용자와 웹사이트 구성 사항 등의 상호작용이 이뤄지는 모든 행동을 이야기합니다. 스크롤을 내리거나, 버튼이나 링크를 클릭하는 사용자의 행동을 뜻하는 것이죠. 그중 클릭 이벤트는 말 그대로 클릭과 관련된 이벤트를 뜻합니다. 신청하기 버튼, 각각 카테고리, 다운로드, 링크 연결 등 마우스나 손가락의 클릭 및 탭이 어떻게 이뤄졌고, 몇 번이나 이뤄졌는지를 추적할 수 있습니다.

 

 

 

  클릭 이벤트를 추적할 때

클릭 이벤트는 특정 버튼이나 링크의 클릭 횟수를 추적할 때 사용합니다. 예를 들어, 무료 카탈로그, 맛보기 강의, 무료 자료 등을 공유하고 해당 자료를 통해 구매로의 전환을 유도할 때, 상담신청, 구매버튼의 성과를 추적할 때 사용합니다.

 

이렇듯 유의미한 클릭 데이터를 수집하여 얼마나 많은 사람이 전환에 이르렀는지, 구글애널리틱스의 다른 기능들과 함게 사용하여 어떤 그룹의 사용자가 전환에 이르는지 확인할 수 있습니다. 

 

 

  구글태그매니저, 클릭 이벤트 추적 방법

 

  버튼 클릭 이벤트 추적하기

클릭 이벤트를 추적하는 방법의 예시로 티스토리 블로그의 소셜버튼 클릭 추적 방법을 예시로 보여드릴텐데요. 위의 전환 추적에 대한 설명이 쉽게 이해되지 않으셨다면 이 예시를 통해 이해를 도울 수 있을 것 같습니다.

 

예시) 티스토리 소셜 버튼 추적(공감, 공유, 카카오스토리, 트위터, 페이스북 버튼 클릭)

제가 추적해볼 버튼은 티스토리에서 제공하는 '공감', '공유', '카카오스토리', '트위터', '페이스북' 버튼을 방문자들이 얼마나 클릭했는지, 그리고 어떤 콘텐츠에서 클릭했는지를 확인할 수 있는 클릭 추적 태그를 생성해보겠습니다.

 

 

1. 클릭 요소 확인하기

먼저 확인해야 할 것은 해당 버튼이 어떤 클릭 요소를 갖고 있는지 확인해야 하는데요.

태그매니저에서 우측 상단 Preview 모드를 활성화 시키면, 주황색 박스로 프리뷰 모드가 활성화 되었다는 문구를 확인하실 수 있습니다. 해당 상태에서 클릭을 추적하려는 웹사이트로 접속하세요.

(단, 태그매니저에서 프리뷰 모드를 활성화시킨 브라우저와 웹사이트에 접속한 브라우저가 동일해야 합니다.)

프리뷰 모드를 활성화 시킨 뒤 웹사이트에 접속을 하면 위의 이미지와 같이 태그매니저의 상태창이 표시됩니다. 이때 추적하려는 버튼을 클릭해보면 왼쪽 'Summary'에 'Click'이라는 텍스트가 나타납니다. 나타난 'Click'을 먼저 클릭한 뒤, 'Variables'에 들어가면 버튼을 클릭했을 때 어떤 요소가 활성화 되는지 확인할 수 있습니다.

 

이 요소들 중 제가 이번에 활용할 것은 'Click Classes'입니다. 이 'Click Classes'를 활용해 공감하기 버튼을 추적하는 방법에 대해 알아보겠습니다.

 

우선 공감 버튼에 포함된 아이콘들을 살펴보니, 하트, 공감 수, 공감 텍스트로 구성이 되어있었습니다. 그리고 위의 방법대로 확인해보면 이 버튼들의 클래스명은 다 다르게 설정되어 있는 것을 알 수 있습니다. 각각 클래스명을 통해 해당 버튼이 클릭되었을 때 GA 보고서로 클릭 이벤트 활성화 여부를 전송할 수 있습니다.

위 3개의 버튼 중, 하트 아이콘으로 설정을 해본다면 위와 같이 설정할 수 있습니다. 트리거 유형(Trigger Type)으로는 'Click - Just Links', 트리거 발동 유형(This trigger fires on)에서는 특정 버튼이 클릭 될 때만 GA 보고서로 이벤트 데이터를 전송하는 태그가 실행되어야 하기 때문에 'Some Link Clicks'를 설정합니다.

 

그 아래 있는 태그의 실행 조건을 설정하는 부분(Fire this trigger when an Event occurs and all of these conditions are true)에서는 이미지와 같이 'Click Classes', 'Contains', 'ico_like'로 설정합니다. 위의 설정내용을 설명해드리면, '클릭되는 클래스(Click Classes)가 위에서 확인했던 공감 아이콘의 클래스인 'ico_like(ico_like)'를 포함(Contain)했을 때 태그를 실행한다'라는 의미를 갖고 있습니다. 즉, 공감 아이콘이 클릭되었을 때만 해당 태그를 실행하라는 뜻인거죠.

 

다음은 태그 설정입니다. 먼저 태그 유형(Tag Type)은 GA 보고서로 데이터를 보내기 위해 '구글애널리틱스(Google Analytics:Universal Analytics)'로 설정합니다. 추적 유형(Track Type)은 사용자의 특정한 행동을 추적하기 때문에 '이벤트(Event)'로 설정합니다.

이벤트에 대한 카테고리는 원하는 이름으로 설정합니다. 여기서 저는 소셜 버튼 클릭으로 설정했습니다. 그리고 액션(Action)과 라벨(Label)은 어떤 페이지, 어떤 버튼을 클릭했는지 알 수 있게 하기 위해 각각 클릭된 클래스명(Click Classes), 페이지 경로(Page Path)로 설정했습니다. 이 부분은 마음대로 설정할 수 있지만, 데이터 분석에 필요한 정보로 채우는 게 좋습니다.

 

 

 

 

 

---

 

 

 

 

 

---