클릭 이벤트 추적이란?

웹페이지에서 클릭이 발생했을 때 ‘클릭’이 발생했다는 사실과 클릭과 관련된 정보를 GA4 서버로 전달하는 작업을 클릭 이벤트 추적이라고 합니다.

클릭 관련 정보

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

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

클릭한 링크

<a href=”/about-us/” id=”gnb_about_us” class=”gnb strong active”>About Us</a>

태그 관리자에서 사용되는 클릭 관련 변수

  • {{Click Element}} – 클릭 요소: <a>태그
  • {{Click ID}} – 클릭 요소에 부여된 ID: gnb_about_us
  • {{Click Classes}} – 클릭 요소에 부여된 클래스: gnb strong active
  • {{Click Text}} – 클릭 요소의 앵커텍스트: About Us
  • {{Click URL}} – 클릭시 이동하는 URL: /about-us/

GA4로 전송되는 클릭 관련 변수

  • link_id – {{Click ID}}의 값이 담겨져 GA4로 전달
  • link_classes – {{Click Classes}}의 값이 담겨져 GA4로 전달
  • link_text – {{Click Text}}의 값이 담겨져 GA4로 전달
  • link_url – {{Click URL}}의 값이 담겨져 GA4로 전달

정리해 보면, 누군가가 위 예시의 링크를 클릭하자 웹페이지에 로드되어 있던 GTM 콘테이너가 click 이벤트를 감지하고 링크의 href 속성에 부여되어 있는 값인 ‘/about-us/’를 GTM 변수인 {{Click URL}} 매개변수에 넣은 후 click 이벤트와 함께 GTM으로 보냅니다. GTM은 click 이벤트가 감지되었으므로 click 트리거에 연결된 GA4 click 이벤트 태그를 실행 시키는데 이 태그의 link_url 이라는 매개변수에 {{Click URL}}에 담긴 값을 넣도록 태그가 구성되어 있으므로 가져온 값인 ‘/about-us/’를 넣어서 click 이벤트와 함께 GA4서버로 전송합니다. GA4는 링크의 URL이 ‘/about-us/’인 click 이벤트가 발생했다는 사실을 전달받고 DB에 저장합니다.

클릭 이벤트가 중요한 이유

웹사이트에서 가장 많이 발생하는 이벤트는 page_view와 click 이벤트입니다.

페이지뷰 이벤트 관련 정보

  • 페이지 제목: 조회한 페이지의 제목(title 태그 안의 값)
  • 페이지 위치: 조회한 페이지의 경로(예: https://marketology.co.kr/about-us/,
  • 페이지 리퍼러: 현재 페이지로 이동하기 직전 페이지의 URL(동일 사이트 또는 외부 사이트 포함)
  • 방문 페이지: 사용자가 해당 세션에서 처음 방문한 페이지, 세션이 시작된 첫 번째 페이지
  • 페이지 이탈: 사용자가 세션을 종료한 마지막 페이지, 세션에서 마지막으로 조회한 페이지

이정도의 정보를 얻을 수 있고 페이지뷰 이벤트의 대상인 웹페이지는 사용자에게 유용한 정보를 담은 문서라는 점 특별한 성격을 가지지 않습니다. 기능면에서 다양한 유형을 가지지 않는 것이죠.

반면 클릭은

클릭 관련 정보

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

‘클릭 관련 정보’ 외에 ‘클릭 대상의 기능’이라는 관점에서 여러 갈래로 분류가 가능해 집니다

  • 클릭 대상의 기능
    • navigation 기능: GNB, LNB
    • 콜투액션 기능: 버튼, 링크, 배너 등
    • 전자상거래 기능: 구매 버튼, 장바구니 버튼, 옵션 선택 등
    • 파일 다운로드 기능: pdf, docx, xlsx, zip 등
    • 양식 입력 및 전송 기능: 특정 입력란 클릭, 전송 버튼 클릭

페이지뷰에 비해 클릭 이벤트는 이벤트의 대상과 목적이 다양하기 때문에 정교하게 추적 설정을 해놓을 경우 다각적이고 유용한 인사이트를 확보할 수 있게 해줍니다. GNB, LNB를 추적하면 인기 있는 콘텐츠를 알수 있고 배너를 클릭하면 어떤 행사나 혜택에 관심을 보이는지 확인할 수 있습니다. 입력 항목이 12개인 양식의 몇번째 항목에서 사용자들이 작성을 포기하는지 알게 되면 항목 옆에 유인책이나 격려문구를 넣어 작성을 마치게 할수 있을 것입니다. 사이트 곳곳에 사용자 행동에 대한 추적장치를 두고자 할때 가장 효과적으로 활용될 수 있는 것이 클릭 이벤트이기 때문에 클릭 요소를 활용하고 추적, 분석하는 방법에 대해 많이 연구해둘 필요가 있습니다.

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

브라우저에 표시되는 요소들 – 링크, 버튼, 이미지, 텍스트, 레이아웃 박스, 입력창 등과 심지어는 여백까지도 클릭 이벤트의 추적 대상이 될수 있습니다. a, img, div, span, input 같은 html 태그에 의해 만들어진 시각적인 요소들이 모두 클릭 추적의 대상이 되는 것입니다.

태그 관리자에서는 클릭 요소를 크게 두가지 트리거 유형으로 분류해 놨는데 링크(a 태그) 추적만을 위해 사용되는 ‘링크’ 트리거와 모든 요소의 추적에 사용되는 ‘모든 요소’ 트리거가 그것입니다.

클릭 트리거 유형

  1. ‘링크’ 트리거
  2. ‘모든 요소’ 트리거

‘링크’ 트리거

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

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

‘모든 요소’ 트리거

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

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

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

html 소스가 이렇고 트리거 유형이 ‘클릭 – 모든 요소’, 트리거 실행 조건이 ‘모든 클릭’이면 <a> 뿐 아니라 <span>, <div>도 추적이 이뤄집니다. <span>태그 안의 ‘안녕하세요?’, <div> 태그 안의 수평 구분선(<hr>) 그리고 수평 구분선 주변에 <div> 태그의 여백(padding)에 의해 생긴 공간도 클릭하면 click 이벤트가 수집됩니다.

추적하는 요소가 서너개 정도 되면 모르겠만 태그가 수백, 수천개인 상황에서는 문제가 됩니다. 너무 많은 이벤트가 발생해서 브라우저도 부하가 걸리고 의미없는 이벤트 정보가 DB에 쌓이면서 보고서도 압도적인 수치로 집계가 될것입니다.

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

트리거-실행조건

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

이 실행조건은 class가 header-menu 인 요소에 대해서만 트리거를 실행시킵니다.
클릭 요소를 class 값으로 식별해서 필터링 하는 것입니다.

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

이 실행조건은 id가 member-info 인 <button> 태그에 대해서만 트리거를 실행시킵니다. id가 member-info 이더라도 클릭 요소가 submit이나 img, div로 되어 있으면 추적하지 않습니다.
클릭 요소를 두가지 조건의 교집합으로 보다 엄격하게 식별해서 필터링 하는 것입니다.

기타 다양한 방법으로 클릭 요소를 식별 하는 방법에 대해서는 아래 ‘클릭 요소 식별 방법’을 참고해 주시기 바랍니다.

클릭 이벤트의 추적 방식

GTM에서 어떤 과정으로 클릭 이벤트의 추적이 이뤄지는지 알아보겠습니다.

  1. 클릭 이벤트 발생
  2. 트리거 실행
  3. 태그 실행

클릭 이벤트 발생

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

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

<a id=”womens-shoes” href=”#”>여성용 신발</a>

클릭 트리거 실행

로드되어 있는 GTM 컨테이너가 이 클릭이 아래 트리거의 실행조건과 일치한다는 것을 감지하고 이 트리거에 연결된 태그를 실행시킵니다.

트리거 실행 조건 = Click ID | 포함 | womens-shoes

GTM 여성 신발 클릭 트리거

클릭 이벤트 태그 실행

‘여성 신발 클릭’이라는 트리거에 연결되어 있는 ‘GA4_여성 신발 클릭’이라는 태그가 실행됩니다. 태그는 GA4 이벤트 태그 유형으로 GA4에 이벤트 정보를 전달해 주는 기능을 합니다. 태그 구성에서 ‘이벤트 이름’을 click_womens_shoes로 명명했으므로 GA4 이벤트 보고서에 click_womens_shoes가 집계될 것입니다.

클릭 요소 식별 방법

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

모든-요소-추적

앞서 설명한대로 이런 식으로 추적하면 안 되고 이렇게 해야 하는 상황도 거의 없기 때문에 추적할 클릭 요소를 식별해서 그 클릭 요소만 추적이 되도록 트리거에 조건을 걸여줘야 합니다. 클릭 요소를 식별하는 기준이 트리거의 조건이 되는 것입니다.

지금부터 설명하는 방법으로 클릭 요소를 식별할 수 있습니다.

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

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

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

<a href=”https://marketology.co.kr”>
<img alt=”헤더 로고” src=”/img/header-logo.png”>

위 예시에서,

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

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

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

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

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

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

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

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

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

Click URL | 포함 | marketology.co.kr/

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

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

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

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

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

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

alt 속성으로 클릭 요소 식별 

<img alt=”헤더 로고” src=”/img/header-logo.png”>

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

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

만약 메뉴로 사용되는 이미지들이 메뉴별로 아래와 같은 alt 값을 가지고 모두 추적하고 싶다면

  • alt=”GNB 메뉴 – 회사소개”
  • alt=”GNB 메뉴 – 제품소개”
  • alt=”GNB 메뉴 – 연락처”
  • alt=”GNB 메뉴 – 고객지원”

Click Element | CSS 선택 도구와 일치 | img[alt*=“GNB 메뉴”]

alt와 값 사이에 = 이 아닌 *=을 사용하면 alt 값에 ‘GNB 메뉴’가 포함된 모든 이미지 요소의 클릭을 추적합니다.

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

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

CSS 선택자로 클릭 요소 식별

ID 선택자로 클릭 요소 식별

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

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

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

Click ID | 같음 | marketology

Class 속성으로 클릭 요소 식별

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

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

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

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

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

Click Classes | 같음 | quick-link

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

<a href=”https://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 | 같음 | https://marketology.co.kr/about-us/