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

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


아래 포스팅에서 <a> 태그로 만들어진 링크의 클릭 이벤트 추적 방법을 알아봤습니다.

구글 애널리틱스 GA4에서 링크 클릭 이벤트 추적하기 (구글 태그 관리자 사용)

 

이번 포스팅에서는 <a>가 아닌 <button>, <input type=”submit”>, <div onclick=”script”> 등의 요소에 대한 클릭 이벤트 추적을 알아 보겠습니다.

링크가 아닌 요소의 클릭 추적하기

‘구매하기’ 버튼 위에 마우스 오른 쪽 버튼을 클릭하고 ‘검사’를 눌렀을 때 해당 요소의 html 소스가 이렇게 나온다면 <a> 태그에 의해 생성된 링크가 아니므로 ‘링크’용 트리거에 의해서는 추적이 되지 않습니다. 

크롬-개발자-모드에서-요소-ID-속성-확인

이 ‘구매하기’ 버튼을 추적하려면 트리거 중 ‘클릭 > 모든 요소’ 유형이 사용되는 별도의 트리거를 만들어 줘야 합니다. 

이 버튼의 소스가 아래와 같으므로 우리는 이 클릭 요소의 id가 ”btn_buy” 라는 사실을 알수 있습니다.

<button type=”button” id=”btn_buy”> 구매하기</button>

이 id를 식별자로 활용해서 이 요소의 클릭에 대한 트리거를 만들어 보겠습니다. 만약 id가 없다면 class나 클릭 텍스트를 식별자로 활용합니다. 이런 요소들마저 없는 경우 ‘css 선택자’를 활용할 수 있습니다.

id나 class 또는 그밖의 css 선택자를 활용하는 방법은 아래 링크를 참고합니다.

구글 태그 관리자(GTM) 클릭 이벤트 추적의 정의, 목적, 방법

 

일단 클릭 요소에 id가 있다고 가정하고 진행해 봅니다. 

‘구매하기 버튼 클릭’ 트리거 만들기

구글 태그 관리자에서 아래와 같은 구성으로 트리거를 생성합니다. 

모든-요소-클릭-이벤트-추적-트리거

트리거 이름 : 구매하기 버튼 클릭
트리거 유형 : 클릭 – 모든 요소
트리거 실행 조건 : Click ID | 같음 | btn_buy

이 트리거는 id 속성 값이 ‘btn_buy’인 요소에 클릭이 발생하면 연결된 태그를 실행합니다.

‘구매하기 버튼 클릭’ GA4 이벤트 태그 만들기

‘구매하기 버튼 클릭’ 트리거에 연결할 GA4 이벤트 태그를 생성합니다.

태그 메뉴에서 ‘새로 만들기’ 버튼을 클릭한 후 태그 유형으로 ‘Google 애널리틱스 : GA4 이벤트’를 선택하고 구성 태그는 ‘GA4 구성(G-L1ZVNY****)’를 선택합니다. 

아직 ‘GA4 구성(G-L1ZVNY****)’ 태그를 만들지 않았다면 아래 게시물로 이동해서 만들도록 합니다.

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

이벤트 이름은 ‘click_btn_buy’로 하고 매개변수는 필요에 따라 넣어줍니다.

모든-요소-클릭-이벤트-추적-태그

매개변수는 별로 필요치 않으므로 추가하지 않고 태그를 저장한 후 ‘제출’, ‘게시’ 버튼을 눌러서 배포, 변경 내용을 웹사이트에 적용합니다. 

구글 애널리틱스로 이동하기에 앞서 먼저 웹사이트에서 ‘구매하기’ 버튼을 클릭합니다.

브라우저에서-구매하기-버튼-클릭

구글 애널리틱스 실시간 보고서로 이동 후 ‘이벤트 이름별 이벤트 수’ 섹션을 확인합니다. 

구글-애널리틱스-실시간-보고서-이벤트-이름별-이벤트-수

‘click_btn_buy’가 표시되고 있다면 지금까지의 작업이 정상적으로 이뤄진 것입니다. 

지금까지 링크가 아닌 요소의 클릭을 추적해 봤습니다.

<a> 태그에 의한 링크가 아니면서 꼭 추적해야 할 요소인 경우 즉, ‘장바구니’나 ‘위시리스트’ 버튼과 같이 실적 확인을 위해 중요한 요소인 경우 ‘클릭 – 모든 요소’ 트리거를 이용하여 개별적으로 클릭 이벤트를 추적하도록 합니다.