마케톨로지에서 관리 중인 업체 대부분이 구글 태그 관리자를 사용중이고 주요 요소에 대한 클릭을 전환으로 설정하고 있습니다. 이 포스팅에서는 태그 관리자를 이용한 클릭 이벤트 추적의 정의와 세부적인 방법에 대해 알아보도록 하겠습니다.

클릭 이벤트 추적이란?

웹페이지에서 클릭이 발생했을 때 ‘클릭 관련 정보’를 수집하고 저장하는 작업을 클릭 이벤트 추적이라고 합니다.

** 클릭 이벤트 추적에 필요한 환경 – GTM(구글 태그 관리자) 의 설치 및 추적 설정

구글 태그 관리자 설치 및 사용 전인 경우 아래 두 게시물을 미리 참고해 주시기 바랍니다.

구글 태그 관리자란 무엇이고 왜 사용하는가?
구글 태그 관리자 설치 및 사용법

클릭 관련 정보

클릭의 대상이 되는 요소
- 링크, 버튼, 이미지, div, span 등
클릭 요소에 부여된 속성, css 선택자
- href, alt, id, class 등
클릭을 한 사용자의 속성
- 소스/매체, 채널, 지역, 연령 등
클릭이 발생한 사용자의 웹사이트내 위치
- Page URL, Page Path

아래는 클릭 이벤트 추적으로 수집된 정보의 예입니다.

애널리틱스의 ‘행동/이벤트/인기 이벤트/라벨’ 보고서에서 확인할 수 있습니다.

클릭한 링크 :
<a href=”/about-us/” id=”nav_about-us” class=”nav-1depth”>About Us</a>

태그 관리자의 라벨 설정 :
{{Click ID}}+{{Click Classes}}+{{Click Text}}+{{Click URL}}@{{Page Path}}

수집된 클릭 이벤트 정보(라벨) :
nav_about-us+nav-1depth+About Us+/about-us/@/contact-us/

id, class, 앵커 텍스트, href의 속성값이 순서대로 나열되고 + 기호로 구분 되어 있습니다.

@기호로 구분된 마지막 정보는 클릭 사용자의 웹사이트 경로(Path)입니다.

‘보조 측정기준’에서 원하는 항목을 선택하면 클릭 사용자에 대한 정보를 확인할 수 있습니다.

보조 측정기준으로 ‘연령’을 선택한 보고서입니다.

같은 클릭에 대해 연령대별로 이벤트 수를 보여주기 때문에 인구통계 타겟팅을 할 때 활용될 수 있습니다.

그밖에도 ‘성별, 도시’와 같은 사용자 정보나 ‘채널, 소스/매체’ 등의 유입 관련 정보를 선택해서 클릭 사용자의 성향을 파악할 수 있습니다.

보조측정기준

추적할 수 있는 클릭 요소는?

브라우저에 표시되는 요소들, 즉 링크, 버튼, 이미지, 텍스트, 박스, 입력창 등과 심지어는 여백까지도 클릭 이벤트의 추적 대상이 될수 있습니다.

a, img, div, span 같은 html 태그에 의해 만들어진 요소들이 클릭 추적의 대상이 되는 것입니다.

태그관리자에서 클릭 요소에 따라 두개의 트리거의 유형을 만들어 놨는데 링크(a 태그) 추적만을 위해 사용되는 ‘링크’ 트리거와 모든 요소의 추적에 사용되는 ‘모든 요소’ 트리거가 그것입니다.

클릭 트리거 유형

‘링크’ 트리거
‘모든 요소’ 트리거

‘링크’ 트리거

링크 트리거는 <a> 태그에 대해서만 반응합니다.

따라서 <button> 이나 <input type=”submit”>, <img> 등의 태그에서 이뤄지는 클릭은 무시됩니다. 오로지 <a> 태그를 이용한 링크에 대해서만 클릭 이벤트를 추적합니다.

‘모든 요소’ 트리거

모든 요소는 <a>를 포함하여 모든 요소에 대한 클릭을 추적합니다.

여기서 ‘요소’란 html 태그라고 보시면 되는데 ‘모든 요소’ 추적시에는 html 소스에서 보여지는 모든 태그들이 추적 대상이 됩니다.

<a>HOME</a>
<span>안녕하세요?</span>
<div><hr></div>

html 소스가 이렇다면 <a>와 함께 <span>, <div> 도 추적이 이뤄집니다.

실제로 추적이 필요한 건 <a> 이고 나머지는 추적할 이유가 없습니다. 불필요한 작업이고 불필요한 데이터죠.

이렇게 세개 정도 되면 모르겠만 수백, 수천개의 태그가 있다면 문제가 됩니다.

이런 문제를 피하려면 트리거의 실행조건(필터)을 설정해서 꼭 필요한 추적만 이뤄지도록 해야 합니다.

실행조건 :
Click Classes : 같음 : header-menu

이 실행조건은 class가 header-menu 인 요소에 대해서만 트리거를 실행시킵니다.

실행조건 :
Click ID : 같음 : member-info & Click Element : 포함 : Button

이 실행조건은 id가 member-info 인 <button> 태그에 대해서만 트리거를 실행시킵니다.

기타 다양한 방법으로 클릭 요소를 식별할 수 있는데 세부적인 내용은 아래 ‘클릭 요소 식별방법’ 장을 참조해 주시기 바랍니다.

클릭 이벤트의 추적 방식

어떤 과정으로 추적이 이뤄지는지 알아보겠습니다.

클릭 이벤트 발생
트리거 실행
태그 실행

클릭 이벤트 발생

사용자가 링크 또는 그밖의 요소를 클릭합니다.

예를 들면 id가 ‘women-shoes’인 아래의 링크를 사용자가 클릭합니다.

클릭 트리거 실행

실행 조건이 아래와 같은 트리거가 있다면 실행됩니다. 클릭한 링크의 id에 ‘womens’가 포함되어 있으니까요.

Click ID : 포함 : womens

클릭 이벤트 태그 실행

트리거가 실행되면 트리거에 연결된 태그도 실행됩니다.

ID에 womens 포함을 조건으로 하는 트리거가 실행 되면 연결된 태그가 실행 되고 클릭 요소로부터 ID를 넘겨 받는 변수 {{Click ID}}와 {{Page Path}}가 라벨값이므로 아래와 같은 라벨이 서버로 전송됩니다.

womens-shoes@/category/all/

전송된 정보는 애널리틱스의 ‘행동/이벤트/인기 이벤트/라벨’ 보고서에서 확인할 수 있습니다.

클릭 요소 식별 방법

모든 요소를 추적하려면 아래와 같이 하면 됩니다.

‘모든 요소’ 트리거 유형과 ‘모든 클릭’ 실행조건을 선택했기 때문에 모든 클릭을 추적합니다.

이렇게 하면 애널리틱스에 필요없는 데이터가 쌓이게 되므로 필요한 요소만 식별해서 추적하도록 설정을 해줘야 합니다.

이 장에서는 클릭 요소를 식별하는 다양한 방법들을 정리해 봤습니다.

태그 속성으로 클릭 요소 식별

태그의 속성은 아래의 형식으로 사용됩니다.

<태그명 속성명=”속성값”>

위 예시에서,

a 태그의 속성은 href 이고 속성값은 ‘http://marketology.co.kr’입니다.

img 태그의 속성은 alt와 src이고 속성값은 ‘헤더 로고’와 ‘/img/header-logo.png’입니다.

예시의 링크(a)나 이미지(img)를 클릭할 때 태그 내에 있는 속성값을 식별자로 사용할 수 있습니다.

href 속성(Click URL)으로 클릭 요소 식별

<a href=”http://marketology.co.kr”>마케톨로지</a>

Click URL은 a 태그의 href 속성에 지정된 값입니다.

이 코드에서 Click URL은 http://marketology.co.kr 입니다.

필터(실행 조건)
Click URL: 같음 : http://marketology.co.kr

만약 www가 붙는 주소 혹은 https가 붙는 주소가 사이트 내 어딘가에서 Click URL로 사용될 가능성이 있다면 실행조건을 아래와 같이 적용할 수 있습니다.

Click URL : 포함 : marketology.co.kr

‘같음’이 아니라 ‘포함’ 이므로 아래 세개의 URL 모두 조건을 만족시킵니다.

http://marketology.co.kr
https://marketology.co.kr
http://www.marketology.co.kr

그런데 이렇게 되면 도메인 뒤에 경로가 포함된 URL도 모두 조건에 해당되므로 아래의 링크들도 추적 대상이 됩니다.

http://marketology.co.kr/products/
http://marketology.co.kr/shp/
http://marketology.co.kr/member/

경로가 붙지 않고 HOME으로 이동하는 링크만 추적하려면 연산자를 아래와 같이 수정해 줍니다.

Click URL : 다음으로 끝남 : marketology.co.kr

alt 속성으로 클릭 요소 식별

Click Element : CSS 선택 도구와 일치 : [alt=”헤더 로고”]

Click Element인 <img>의 속성 alt를 CSS 선택 도구를 이용해 비교한 후 조건 값과 일치하면 추적하는 방식입니다.

‘src’도 속성이므로 아래의 조건을 만족하면 추적합니다.

Click Element : CSS 선택 도구와 일치 : [src=”/img/header-logo.png”]

CSS 선택자로 클릭 요소 식별

ID 선택자로 클릭 요소 식별

id 속성은 원칙적으로 하나의 요소에 대한 선택자로 사용됩니다.

만약 <a> 태그에 id 속성이 있다면 이 속성을 조건으로 필터를 구성합니다.

<a href=”http://marketology.co.kr” id=”marketology”>마케톨로지</a>

Click ID : 같음 : marketology

Class 속성으로 클릭 요소 식별

id 속성과 달리 class 는 복수의 요소에 대한 선택자로 사용됩니다.

따라서 추적하고자 하는 링크 외에 다른 링크에서 같은 class 값이 사용될 수 있으므로 주의해야 합니다. 그렇게 되면 원치 않는 링크까지 추적이 이뤄지게 됩니다.

한편 class가 특별한 용도를 가지고 있다면 용도를 기준으로 클릭을 분류할 수 있는 장점이 있습니다.

<a href=”http://marketology.co.kr” class=”quick-link”>home</a>
<a href=”http://marketology.co.kr/customer” class=”quick-link”>customer</a>
<a href=”http://marketology.co.kr/member” class=”quick-link”>member</a>

quick-link가 퀵메뉴에만 적용되는 class라면 아래와 같은 조건으로 퀵메뉴만 추적할 수 있습니다.

Click Classes : 같음 : quick-link

앵커 텍스트(Click Text)로 클릭 요소 식별

<a href=”http://marketology.co.kr”>마케톨로지</a>

a 태그의 여는 태그 <a>와 닫는 태그 </a> 사이에서 들어가는 단어나 문구를 앵커 텍스트 라고 합니다. 위 예시에서 ‘마케톨로지’가 앵커 텍스트입니다.

GTM 트리거의 built-in 변수에는 ‘Click Text’ 라는 이름으로 사용되는데 ‘Click Text’ 가 곧 ‘Anchor Text’가 되겠습니다.

트리거 실행 조건
Click Text : 같음 : 마케톨로지

page path, page url로 클릭 요소 식별

정확히는 클릭 요소를 식별한다기보다 특정 위치(경로, url)에서의 클릭 요소만을 추적하는 설정입니다.

Page Path(경로)나 Page URL(웹주소)에 포함된 단어를 조건으로 정해 두면 그 단어가 포함된 경로 및 URL에서만 추적이 실행됩니다.

트리거 실행 조건
Page Path : 같음 : /about-us/
Page URL : 같음 : http://marketology.co.kr/about-us/

클릭 이벤트 추적의 중요성

페이지뷰가 정적인 정보라면 클릭 이벤트는 동적이고 적극적인 상호작용 정보입니다.

사용자가 어떤 제품에 열광하고 어떤 주문 경로에서 이탈하며 어떤 영상에 관심을 갖는가 하는 중대한 정보들이 클릭 이벤트를 통해 수집되고 분석될 수 있습니다.

분석이 이뤄지면 어떤 제품을 전면에 올려야 하고 어떤 부분을 보완해야 하며 어떤 콘텐츠를 추가해야 하는지 알수 있게 됩니다.

잠재고객의 의중을 알고 준비하는 것과 판매자의 감에 의존하는 것 중 어느 쪽이 더 우수한 성과를 이끌어 낼지는 굳이 설명이 필요치 않을 것 같습니다.

GTM과 GA를 활용하여 클릭 이벤트를 추적하고 효율적으로 활용해 보시기 바랍니다.