안녕하세요?
구글 공식 파트너 '마케톨로지'입니다.

온라인 마케팅 진단 및 컨설팅, 최적화 대행
Tel : 070-8883-4920
e-Mail : marketologykr@gmail.com


UA의 기본 추적 태그가 페이지뷰만을 추적하고 클릭이나 스크롤 이벤트 추적을 위해서는 별도의 태그를 만들어야 했던 것과 달리 GA4 기본 태그는 별도의 태그 작업 없이도 클릭이나 스크롤 이벤트를 추적합니다. 데이터 스트림 설정에서 아래와 같이 ‘향상된 측정’을 켜 두기만 하면 됩니다. 

GA4-웹-스트림-향상된-측정-옵션

하지만 클릭은 외부로 이동하는 링크(이탈 클릭)만, 스크롤은 90% 스크롤 뎁스만 추적한다는 한계가 있기 때문에 내부에서 이뤄지는 클릭이나 25%, 50% 스크롤 뎁스와 같이 보다 세부적인 추적을 원할 경우 태그 관리자를 이용해서 별도의 작업을 해줘야만 합니다. 

이번 포스팅에서는 ‘click’ 이벤트 추적 중 ‘모든 링크’를 추적하는 방법에 대해 알아보려고 합니다. 

‘모든 링크 클릭’은 button 태그나 input의 submit 속성 등에 의해서가 아니라 오로지 a 태그의 href 속성에 의해 만들어진 링크만을 대상으로 합니다.

GA4의 ‘향상된 측정’에서 수집하는 ‘click’과 달리 외부로 빠져나가는 링크  뿐 아니라 사이트 내 이동을 위한 내부 링크, 이메일, 전화번호 등에 대한 링크가 모두 해당 됩니다. 물론 외부 링크도 포함됩니다.

‘모든 링크’에 포함되는 링크의 예시입니다.

사이트 도메인 : abc.com

내부링크 : abc.com/aboutus/
소스 : <a href=”https://abc.com/aboutus/”>About Us</a>

외부링크 : efg.com/supports/
소스 : <a href=”https://efg.com/support/”>efg 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>

클릭 정보를 담은 변수 추가하기

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

태그-관리자-기본-제공-변수

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

태그-관리자-기본-제공-변수-클릭-관련-변수-설정

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

태그-관리자-기본-제공-변수에-클릭-관련-변수-추가

클릭 이벤트 추적이 이뤄질 때 클릭의 대상이 되는 링크에서 클릭 관련 정보를 수집한 후 이 변수에 담아두게 됩니다.

(링크 예시) :

<a href=”https://abc.com/aboutus” id=”menu-item-aboutus” class=”menu-item” target=”_self”>About Us</a>

위 링크에서 a 태그 안에는 href와 id, class라는 속성이 있고 여는 태그 <a>와 닫는 태그 </a> 사이에는 앵커 텍스트(클릭 텍스트)가 있습니다.

위 예시에서 태그 관리자는 클릭 관련 변수에 링크 관련 정보를 아래와 같이 저장합니다.

Click Text : About Us(앵커 텍스트)
Click ID : menu-item-aboutus
Click Classes : menu-item
Click URL : https://abc.com/aboutus
Click Target : _self

이 클릭 관련 변수들은 GA4의 ‘모든 링크 클릭’ 추적 태그를 만들때 태그 구성에 포함시켜서 클릭 이벤트에 할당되도록 할 것입니다. 

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

전 단계에서는 필요한 ‘변수’를 사용 가능한 상태로 만들었고 이제 트리거를 만들 시간입니다. 여기서 만들 트리거는 사이트의 모든 페이지에 상주하며 이벤트를 감시하다가 <a> 링크에 의한 클릭이 발생하면 연결된 태그를 실행할 것입니다.

태그나 트리거를 명명할 때 정해진 규칙은 없습니다. 나중에 다시 열어볼때 알아보기 쉬운 이름으로 해주면 됩니다.

그래서 이 트리거의 이름도 ‘모든 링크 클릭’ 이라고 알기 쉽게 지었습니다.

태그-관리자-모든-링크-클릭-트리거-생성

트리거 유형은 ‘클릭 – 링크만’을 선택하고 트리거 사용 조건은 아래와 같이 합니다.

태그 대기 : 체크 – 최장 대기시간 2,000밀리초
유효성 확인 : 체크
트리거 조건  : Page URL | 정규 표현식과 일치 | .*

모든 페이지에서 유효한 링크 클릭에 대해 추적을 하겠다는 설정입니다.

GA4에서 사용될 ‘모든 링크 클릭’ 태그 만들기

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

물론 GA4 측정 아이디를 담아둔 변수와 GA4 구성 태그도 준비되어 있어야 합니다. 이 태그가 없다면 아래 게시물을 참조해서 만드시기 바랍니다. 

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

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

  • 클릭 관련 기본 변수
  • ‘모든 링크 클릭’ 트리거
  • GA4 구성 태그(기본 추적 태그)

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

GTM ‘태그’ 페이지에서 ‘새로 만들기’를 클릭한 후 태그 유형 중 ‘Google 애널리틱스 : GA4 이벤트’를 선택합니다.

구성 태그는 ‘GA4 기본 추적 태그 만들기’에서 만들어 둔 ‘GA4 구성(G-L1ZVNY****)’ 변수를 선택하고 이벤트 이름은 태그 관리자에서나 애널리틱스에서나 알아보기 쉬운 이름으로 명명합니다.

생성 목적에 맞게 ‘click_all_links’라고 해보겠습니다.

‘all_links_click’이 더 와닿지만 애널리틱스 이벤트 목록에서 click 이벤트와 같이 정렬되는게 더 보기 편할테니 ‘click_all_links’로 합니다.

첫번째 이벤트 매개변수 이름은 link_id 로 하고 값은 {{Click ID}} 변수를 지정합니다

태그-관리자-모든-링크-클릭-태그-생성

 

레고 블럭처럼 생긴 변수 아이콘을 눌러서 변수 목록 패널을 열거나 입력창 안에 {{ 를 입력해서 드롭다운 방식으로 변수 목록이 표시되게 할수 있습니다.

태그-관리자-모든-링크-클릭-태그-생성시-변수-불러오기

뒤 이어서 두번째, 세번째 매개변수로 필요하다고 생각되는 클릭 관련 정보들을 지정해 줍니다. 

link_classes : {{Click Classes}}
link_url :  {{Click URL}}

모두 지정한다면 아래와 같은 그림이 될 것입니다.

태그-관리자-모든-링크-클릭-태그-생성-완료

매개변수 이름은 아래 링크를 참고해서 GA4에서 사용되고 있는 것을 사용하는게 좋습니다. 같은 성격의 매개변수가 따로 수집되어 데이터 분석이 난해해 지는 것을 막을 수 있습니다.

https://support.google.com/analytics/answer/9216061?hl=ko&ref_topic=9756175

이벤트 이름과 매개변수 이름 & 값을 모두 입력했다면 저장을 눌러줍니다.

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

‘제출’, ‘게시’ 버튼을 클릭해서 변경 내용을 배포한 후 구글 애널리틱스로 이동해서 실시간 보고서를 확인해 봅니다.

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

구글-애널리틱스-GA4-실시간-보고서-모든-링크-클릭-이벤트-목록

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

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

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