GA4의 추적 코드(gtag)를 사이트에 설치하면 페이지 조회(page_view) 이벤트는 추적을 하지만 클릭(click) 이벤트는 추적을 하지 않습니다. click 이벤트를 추적하려면 ‘데이터 스트림’ 설정에서 ‘향상된 측정’이라는 옵션을 켜놔야 합니다. 하지만 향상된 측정을 통해 수집하는 클릭 이벤트는 현재 사이트에서 외부로 빠져나가는 이탈 클릭만 추적합니다. 현재 사이트가 a.com인 경우 b.com처럼 도메인이 다른 사이트에 대해서만 클릭 이벤트를 수집하고 a.com/a.html, a.com/b.html 처럼 동일한 사이트(도메인) 내에서의 이동은 추적하지 않습니다.

하지만 이탈 클릭보다는 내부 클릭에 대한 정보가 더 유용하기 때문에 내부, 외부 그리고 메일 주소나 전화번호가 연결된 링크까지 모두 잡을 수 있는 ‘모든 링크 클릭’ 이벤트를 직접 만들어서 사용해 보려고 합니다.

‘모든 링크 클릭’으로 수집하게 될 링크의 예시입니다.

GA4가 설치된 사이트: a.com

내부링크: https://a.com/about-us/
소스: <a href=”https://a.com/about-us/”>About Us</a>

외부링크: https://b.com/supports/
소스: <a href=”https://b.com/supports/”>B Supports</a>

이메일: info@abc.com
소스 : <a href=”mailto:info@abc.com”>info@abc.com</a>

전화번호: 00-1111-2222
소스 : <a href=”tel:0011112222”>00-1111-2222</a>

이 작업(모든 링크 클릭 추적)을 마치고 나서는 데이터 스트림의 향상된 측정 옵션의 설정으로 이동해서 ‘이탈 클릭’ 항목을 off로 바꿔 줍니다.
향상된 측정의 이탈 클릭 이벤트 이름이 click이고 지금 만드는 이벤트의 이름도 click으로 할것이기 때문에 on 상태로 두면 이탈 클릭 발생시 click이 두번 잡히게 됩니다.

GTM에 클릭 이벤트 변수 추가(등록)하기

GTM이 내비게이션 메뉴에 대한 클릭을 추적할 때 click 이벤트가 발생하는 대상은 아래와 같이 html 소스로 만들어 진 클릭입니다.

메뉴 링크의 html 소스 : <a href=”https://a.com/data.html” class=”gnb’ id=”data”>데이터</a>

a 태그는 href, class, id 라는 세개의 속성과 그 속성에 = 기호로 연결된 값을 가지고 있습니다. 그리고 <a> 태그와 닫는 </a> 사이에 렌더링된 웹페이지에 표시될 텍스트도 있습니다.

GA4가 click 이벤트를 수집할 때 이 4개의 정보가 각각 click_url, click_classes, click_id, click_text 라는 이름의 변수에 담기고 이 변수들은 click 이벤트와 함께 GA4 서버로 전송됩니다.
그러니까 click 이벤트가 전송될때 아래의 형식으로 이벤트 정보가 구성되는 것입니다.

• 이벤트: click
  • 이벤트 변수:
    • link_url = https://a.com/data.html
    • link_classes = gnb
    • link_id = data
    • link_text = 데이터

이 변수들을 사용하려면 GTM의 기본 제공 변수 목록에 추가해 줘야 합니다.

GTM 메뉴에서 ‘변수’를 클릭하고 ‘기본 제공 변수’ 섹션의 우측 상단에 있는 ‘구성’ 버튼을 누릅니다.

클릭과 관련된 정보를 담아두게 될 변수들이 체크되어 있지 않다면 그림과 같이 모두 체크해서 추가해 줍니다. 이미 체크되어 있다면 그대로 둡니다.

‘기본 제공 변수 구성’ 패널을 닫았을 때 ‘기본 제공 변수’ 목록에 아래와 같이 클릭 관련 변수들이 추가되어 있어야 합니다. 

click 이벤트 구성 만들기

지금 하려는 작업은 click 이벤트에 대한 ‘이벤트 설정’ 변수를 만드는 것입니다.
‘이벤트 설정’ 변수는 이벤트 변수를 미리 설정해 놓고 그 변수를 필요로 하는 이벤트 태그를 만들때 불러다 적용할 수 있도록 저장해 놓는 것으로 보면 됩니다.

만약 ‘click 이벤트 설정’ 변수가 없으면 우리는 click 유형의 이벤트를 만들때마다 아래의 매개변수들을 추가해 줘야 하고 수정이 필요할 때마 모든 이벤트를 열어서 바꿔줘야 합니다.
click_gnb, click_banner, click_footer_info 등등 클릭 유형의 이벤트를 추가할 때마다 아래 클릭 관련 변수를 일일히 추가하는 수고를 덜어주는 것이죠.

• link_url
• link_classes
• link_id
• link_text

태그 관리자의 좌측 탐색 메뉴 중 ‘변수’를 클릭하면 ‘기본 제공 변수’ 카드 아래 ‘사용자 정의 변수’ 카드가 보입니다. 우측의 ‘새로 만들기 버튼’을 눌러 변수 구성 화면으로 이동합니다.

‘변수 구성’ 화면이 열리면 ‘이름 없는 변수’라는 텍스트가 들어가 있는 입력창을 눌러 커서를 활성화 시키고 ‘click 이벤트 설정’이라는 이름을 입력해 줍니다. click 이벤트에 대한 설정을 저장해 둔 변수라는 의미입니다. ‘변수 구성’ 카드의 레고 블럭같이 생긴 아이콘이나 바닥 아무 곳을 클릭하면 변수 유형 목록이 나올 것입니다.

변수 유형 중에서 ‘유틸리티 > Google 태그: 이벤트 설정’을 선택합니다.

‘매개변수’ 추가 버튼을 네번 눌러서 8개의 입력란을 만듭니다.
좌측 열 ‘이벤트 매개변수’에는 직접 타이핑 해서 아래 이벤트 매개변수명을 입력해 줍니다.

• link_url
• link_classes
• link_id
• link_text

이 네이밍은 GA4에서 기본적으로 사용하는 변수명이니 그대로 사용하는 것이 좋습니다.

‘값’ 열은 직접 입력하지 말고 입력란 우측의 + 기호가 있는 블럭 아이콘을 클릭해서 기본 제공 변수 목록을 열고 그중에 해당 되는 것을 클릭합니다.
아래와 같이 매칭시키면 됩니다.

• link_url = Click URL
• link_classes = Click Classes
• link_id = Click ID
• link_text = Click Text

‘저장’ 버튼을 눌러 빠져나오면 ‘사용자 정의 변수’ 목록에 방금 만든 ‘click 이벤트 설정’이 추가되어 있을 것입니다. 이제 이 설정은 click 유형의 이벤트를 만들 때 불러다 적용할 수 있습니다. 불러다 적용하는 방법은 태그 만드는 과정에서 실습하게 됩니다.

‘모든 링크 클릭’ 트리거 만들기

사이트에서 링크 클릭 이벤트가 발생하면 click 이벤트 태그를 실행시킬 트리거를 만들어야 합니다.

좌측 탐색 메뉴에서 ‘트리거’를 누르고 변수 만들때처럼 이름을 입력하고(이름: 모든 링크 클릭), 우측의 ‘새로 만들기 버튼’을 눌러 트리거 구성화면을 연후 ‘트리거 구성’ 카드의 아무 곳이나 눌러 ‘트리거 유형’ 목록을 엽니다.

‘클릭 > 링크만’을 선택하고 구성 화면이 열리면 아래 이미처럼 구성합니다.

• 태그 대기: 체크 – 최장 대기시간 2000밀리초
  • 클릭시 click 이벤트 태그가 실행 되기 전에 페이지가 이동하는 것을 막기위해 페이지 이동을 2초간 대기시킵니다
• 유효성 확인: 체크
  • 클릭이 유효한 경우에만 트리거가 작동합니다
• 트리거 사용 설정 : Page URL | 정규 표현식과 일치 | .*
  • 일부 조건에서만 실행 시킬 경우 조건을 설정합니다
  • 모든 페이지에서 트리거를 작동시키려면 위와 같이 정규식을 이용해 조건을 설정합니다
• 모든 링크 클릭: 체크
  • 모든 링크를 추적할 것이므로 ‘모든 링크 클릭’을 체크합니다

모든 구성을 마친 후 ‘저장’ 버튼을 누르면 트리거 목록 화면으로 빠져 나옵니다. 조금 전에 만든 ‘모든 링크 클릭’ 트리거가 목록에 추가 되어 있습니다.

‘모든 링크 클릭’ 태그 만들기

이벤트 설정 변수와 트리거를 만들었으면 이제 구글 애널리틱스 서버로 ‘클릭 이벤트’ 관련 정보를 전달할 태그를 만들어야 합니다.. 

그러기 위해서는 GA4 설정을 담아둔 변수와 GA4 추적을 위한 Google 태그도 준비되어 있어야 합니다. 이 태그가 없다면 아래 게시물을 참조해서 만드시기 바랍니다. 

구글 태그 관리자 사용하여 구글 애널리틱스 GA4 기본 추적 설정하기

GA4 클릭 이벤트 추적 태그를 위한 준비사항

• ‘click 이벤트 설정 변수‘ – 이 페이지 가이드대로 생성
• ‘모든 링크 클릭’ 트리거 – 이 페이지 가이드대로 생성
• ‘GA4 추적용 태그(기본 추적 태그)’ – 위 링크 가이드대로 생성

준비사항이 다 완료 됐으면 태그를 만들어 보도록 하겠습니다.

좌측 탐색 메뉴에서 ‘태그’ 클릭 -> ‘태그’ 페이지에서 ‘새로 만들기’를 클릭 후 ‘태그 구성’ 카드 아무 곳이나 클릭해서 태그 유형 목록을 엽니다.
‘추천 > Google 애널리틱스 > Google 애널리틱스 : GA4 이벤트’를 선택합니다.

• 측정 ID: 실제로 사용할 GA4 데이터 스트림의 측정 ID를 입력합니다
• 이벤트 이름: click 이벤트 중 가장 기본이 되는 이벤트이므로 아무 수식 없이 click로 명명합니다
• 이벤트 매개변수: 만들어 놓은 ‘click 이벤트 설정’을 불러 옵니다. 드롭다운을 누르면 목록에 추가되어 있습니다
  • 만약 여러 태그에서 공용으로 쓰는 게 아니라면 이벤트 설정을 저장해서 불러올 필요 없이 이 구성 화면에 있는 ‘매개변수 추가’ 버튼을 눌러 입력창을 추가한 후 직접 입력하면 됩니다
• 트리거: 만들어 둔 ‘모든 링크 클릭’ 트리거를 연결합니다.

변경 내용 배포하고 이벤트 작동 여부 확인하기

작업이 완료되었으면 우측 상단의 ‘제출’ 버튼과 이어서 나오는 ‘게시’ 버튼을 눌러 사이트에 배포합니다.

변경 내용을 배포한 후 구글 애널리틱스로 이동해서 실시간 보고서를 확인해 봅니다.

click 이벤트가 잡히는 것을 알수 있습니다. 

이벤트 목록에서 click을 클릭하면 매개변수 목록이 표시되고 매개변수 이름을 클릭하면 그안에 할당된 값이 표시됩니다.

실시간 보고서에서 click 이벤트와 매개변수 이름 & 값이 정상적으로 표시되고 있다면 지금까지의 과정이 모두 순조롭게 이뤄진 것입니다. 

한두 시간쯤 후(더 걸릴 수도..)에 구글 애널리틱스에서 ‘이벤트’ 보고서를 열어 보면 click 이벤트가 수집되고 있는 걸 확인할 수 있으실 겁니다.

작업 개요

이벤트 매개변수들로 이뤄진 ‘click 이벤트 설정’과 사이트 내 모든 링크 클릭 이벤트를 수집하는 ‘모든 링크 클릭’ 트리거를 만들었고 클릭이 발생하면 GA4에 이벤트 발생 사실과 이벤트 관련 정보를 전달할 ‘모든 링크 클릭’ 태그를 만들면서 이 두 요소를 연결했습니다.

사이트에서 어떤 형태의 링크든 클릭이 발생하면 트리거가 이를 감지해서 태그를 작동시킬 것이고 태그는 해당 클릭의 정보(변수&값)를 담은 click이라는 이벤트를 전송할 것입니다.

향상된 측정 설정에서 이탈 클릭을 꺼놔도 이탈 클릭 또한 <a> 태그로 만들어지는 링크이므로 click 이벤트가 모두 수집할 것입니다. 이탈 클릭은 계속 꺼두면 됩니다.