** ‘클릭 – 모든 요소’ 트리거가 아니라 ‘클릭 – 링크만’ 트리거 유형을 사용해서 링크 클릭을 추적하는 방법은 아래 포스팅을 참고 해 주시기 바랍니다.

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

 

이번 포스팅에서는 <a>태그 뿐만이 아니라 <button>, <input type=”submit”>, <div onclick=”script”> 등 어떤 요소에 대한 클릭도 잡아내는 ‘클릭 – 모든 요소’ 트리거의 사용법에 대해 알아보도록 하겠습니다.

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

‘링크’는 다른 페이지로의 이동, 문서 간 연결을 위해 <a> 태그로 생성하는 클릭 요소입니다. <a>태그가 아닌 다른 태그로도 이동과 연결에 사용되지만 브라우저나 GTM은 이런 요소를 링크로 인식하지 않습니다 . 그래서 GTM의 ‘클릭 – 링크만’ 트리거 유형을 사용하면 <a>태그 외에 다른 태그로 만든 클릭 요소는 추적을 하지 않습니다.

링크(O) - <a href="/about-ut.html/">About Us</a>

링크(X) - <div onclick="location.href='/about-us.html/'">About Us</div>

<a>외의 태그로 만든 요소들의 클릭을 잡기 위해 사용되는 것이 ‘클릭 – 모든 요소’ 트리거입니다.

링크 여부 확인하기

일단 클릭 요소가 링크인지 아닌지 확인 한 후 링크면 ‘클릭 – 링크만’ 트리거를, 링크가 아니면 ‘클릭 – 모든 요소’ 트리거를 선택해야 합니다.

추적하려는 요소에 마우스 포인터를 올려놓고 마우스 우측 버튼을 눌러 ‘컨텍스트 메뉴(context menu)’를 업니다.
‘구매하기(BUY IT NOW)’ 버튼의 컨텍스트 메뉴와 ‘장바구니(CART)’ 버튼의 컨텍스트 메뉴의 내용이 다릅니다. 굳이 개발자 도구를 열어보지 않아도 구매하기는 <a> 태그로 만들어졌다는 것을, 장바구니는 <a>가 아닌 다른 태그로 만들어졌다는 것을 알수 있습니다. 컨텍스트 메뉴(context menu)는 고정된 구성이 아니라 마우스로 선택한 요소에 따라 그 요소에 맞는 메뉴를 보여주는데 구매하기 버튼은 ‘새 탭에서 링크 열기’나 ‘다른 이름으로 링크 저장’ 같은 링크를 위한 기능이 표시되고 장바구니 버튼은 ‘뒤로’, ‘다른 이름으로 저장’ 같은 일반적인 요소를 위한 기능이 표시됩니다.

확인을 위해 컨텍스트 메뉴 하단의 ‘검사’ 버튼을 클릭해서 클릭 요소의 태그를 확인해 보면 장바구니 버튼이 <a>가 아닌 <button>으로 만들어 졌다는 것을 알수 있습니다.

이제 ‘장바구니’ 버튼이 링크가 아니며 class 속성이 ‘btnNormal’, ‘sizeL’, ‘actionCart’ 이렇게 세개의 값을 가지고 있고 id 속성 값은 ‘actionCart’라는것을 확인 했으니 이것을 이용해서 ‘클릭 > 모든 요소’ 유형 트리거를 만들어 보겠습니다.

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

<button type=”button” class="btnNormal sizeL actionCart" id="actionCart">CART</button>

트리거 만들기를 눌러 구성창을 연 후 트리거 유형을 ‘클릭 – 모든 요소’로 선택합니다. 실행 조건을 ‘일부 클릭’으로 선택하고 아래 이미지와 같이 클릭 ID가 ‘CART’ 버튼의 id 값인 ‘actoinCart’와 일치하도록 조건을 구성합니다.

html 문서 상에서 id값은 여러 번 사용할 수 없고 한번만 사용하는 것이 원칙이기 때문에 클릭 요소에 id 값이 있다면 다른 요소의 클릭까지 과수집 될 걱정을 안 해도 됩니다. 이 예시에서도 id 속성이 있기 때문에 그 값을 이용해서 트리거를 만든 것인데 이게 없다면 상황이 달라집니다. id 대신 class를 사용해야 하는데 class는 문서 내에서 여러번 사용될 수 있습니다. 그래서 추적하려는 요소 외에 동일한 class 값을 가지는 다른 요소의 클릭도 원치 않게 수집이 되는 것입니다.

CART 버튼에는 세개의 class가 있는데 개발자 도구의 콘솔(console)창에 아래 코드를 입력해 보면 아래와 같은 결과가 나옵니다.

document.querySelectorAll('.btnNormal')

querySelectorAll은 CSS 선택자에 일치하는 모든 html 요소를 찾아 반환하는 JavaScript 메서드입니다.
우리가 사용한 CSS 선택자는 ‘.btnNormal’입니다. class 명에는 ‘.’가 id 명에는 ‘#’이 사용됩니다. ‘.btnNormal’은 이름이 ‘btnNormal’인 클래스를 찾으라는 의미입니다.

그리고 결과로 7개의 요소를 반환했는데 문서상에서 7개의 요소가 이 클래스를 사용하고 있으니 장바구니 버튼 외에 어딘가에 있는 다른 버튼을 누를 때도 추적이 된다고 봐야 합니다.

id가 없어서 어쩔수 없이 class나 다른 선택자를 사용해야 하는 경우는 트리거 조건을 추가해서 교집합으로 만들거나 querySelectorAll 메서드를 이용해서 고유한 선택자를 찾아내거나 해야 합니다.

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

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

 

‘CART 버튼 클릭’ GA4 이벤트 태그 만들기

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

태그 메뉴에서 ‘새로 만들기’ 버튼을 클릭한 후 태그 유형으로 ‘Google 애널리틱스 : GA4 이벤트’를 선택하고 변수로 저장해 놓은 측정 ID를 불러오거나 저장해 놓지 않은 경우 직접 입력합니다.

이벤트 이름에는 ‘click_btn_cart’를 입력합니다.

‘CART 버튼 클릭’ 트리거를 연결하고 태그를 저장한 후 ‘제출’, ‘게시’ 버튼을 눌러서 배포, 변경 내용을 웹사이트에 적용합니다. 

구글 애널리틱스로 이동하기에 앞서 먼저 웹사이트에서 ‘CART’ 버튼을 눌러서 이벤트를 발생시킵니다.

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

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

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

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