클릭 이벤트 태깅하기

클릭 이벤트 태깅

사이트에 구글 태그매니저가 설치된 상태일 경우, 이를 활용하여 별도의 개발작업 없이 이벤트를 추적할 수 있습니다.

구글 태그매니저 설치가 안되어 있는 경우에는 [구글 태그매니저 설치하기]를 참고해주세요.

사이트에는 많은 클릭 요소들이 있습니다. 사용자들은 페이지를 이동하는 것에서 부터 상품을 결제하는 등 클릭을 이용해서 다양한 상호작용을 합니다.

각 클릭 요소에 추적코드를 심는다면, 사이트를 구성하는 영역별로 클릭이 얼마나 발생하는 지 그리고 어떤 컨텐츠에 사용자가 반응을 많이하는 지를 파악할 수 있습니다.

참고. 이 강의에서 언급하는 태깅이란 구글 태그매니저를 활용하여 클릭 요소에 추적코드를 심는 것입니다.

이번 강의에서는 게시글 우측에 있는 태그 버튼에 대한 이벤트 태깅을 진행하겠습니다.

구글 태그매니저 기본 변수 추가

구글 태그매니저는 클릭한 요소에 대한 정보를 저장하는 변수를 제공합니다. 이 변수를 사용하기 위해서는 아래의 방법으로 사용 설정을 해야합니다.

먼저, 구글 태그매니저에 접속하여 기존에 생성한 컨테이너를 선택합니다. 컨테이너에서 좌측의 [변수] 메뉴를 클릭한 다음, 화면 우측 상단에 있는 [구성] 버튼을 클릭합니다.

변수 구성창에서 스크롤을 조금 내리면 보이는 [Click Element], [Click Text]를 선택 후 창을 닫습니다.

변수 목록에 선택한 변수들이 추가된 것을 확인할 수 있습니다. 사이트에서 특정 요소를 클릭할 경우, 그 요소에 대한 정보가 해당 변수에 저장이 됩니다.

트리거 생성하기

버튼이 클릭되었음을 감지할 수 있게 트리거를 생성합니다. 컨테이너에서 좌측의 [트리거] 메뉴를 클릭한 다음, 화면 우측 상단에 있는 [새로 만들기] 버튼을 클릭합니다.

트리거 유형 중 클릭을 위한 트리거는 2가지가 존재합니다. 각 트리거는 버튼의 태그 유형에 따라 구분해서 사용합니다. 그리고 이를 위해서는 버튼을 구성하는 소스 코드를 확인해야합니다.

• 링크만 : 버튼이 <a>태그로 구성되어 있다면 링크만을 사용하는 것을 권장합니다.
• 모든 요소 : 버튼이 <a>태그가 아닌 <button>, <div>, <span>등의 다른 유형의 태그일 경우에는 모든 요소를 활용합니다.

태깅 영역 요소 검사하기

그렇다면, 버튼에 대한 소스 코드를 어떻게 확인할 수 있을까요? 이는 브라우저에서 제공하는 [개발자 도구]를 활용하는 방법을 추천드립니다.

Chrome 브라우저에서 개발자 도구를 실행하는 단축키는 아래와 같습니다.

• Window : Ctrl + Shift + I 또는 F12
• Mac : ⌥⌘I ( Alt + Cmd + I )

브라우저 하단에 뜨는 개발자 도구창에서 아래 표시한 버튼(요소 검사 모드)을 클릭합니다.

요소 검사 모드가 활성화되면 화면의 각 요소들을 클릭할 수 있습니다. 태깅을 원하는 버튼을 클릭하면 아래와 같이 버튼에 대한 소스 코드를 확인할 수 있습니다.

여기서 이 버튼들이 <a> 태그로 구성되어 있음을 확인할 수 있습니다.

• 요소 검사모드는 아래 방법을 통해서도 바로 실행이 가능합니다.
  – Window : Ctril + Shift + C
  – Mac : ⌥⌘C ( Alt + Cmd + C )
  – 버튼을 마우스 우클릭 -> [검사]

구글 태그매니저로 돌아와서 <a> 태그를 감지하기 위한 [링크만] 트리거를 선택합니다. 트리거 명칭은 이후 생성할 다른 트리거와 구분할 수 있도록 명확하게 입력합니다.

CSS Selector 값 구하기

사이트의 많은 버튼 중 특정 버튼이 클릭되었다는 것을 어떻게 구분할 수 있을까요? 이를 구분하기 위해서 [CSS Selector]라는 문법을 활용합니다.

CSS는 홈페이지의 HTML 태그에 스타일을 적용하기 위한 스타일 시트이며, Selector는 이 스타일을 적용하기 위한 요소를 지정하는 문법입니다.

클릭 요소에 대한 CSS Selector를 구하기 위해서 다시 개발자 도구를 활용합니다. 앞서 요소 검사 모드에서 찾은 소스 코드를 보면 앞쪽 여백의 크기가 다르다는 것을 알 수 있습니다.

이는 HTML 태그가 계층 구조로 이뤄져있기 때문에 여백으로 계층을 구분하는 것으로, 여백이 적을수록 상위에 있는 요소(부모 노드)입니다.

클릭 요소의 주변 코드를 간략히 정리하자면 아래와 같습니다.

이 경우 CSS selector는 상위에 있는 태그 순으로 다음과 같이 작성할 수 있습니다. 이때 클릭되는 버튼의 태그가 반드시 마지막에 위치해야하며 부모 노드의 입력 순서가 제대로 입력되어야 합니다.

aside div section div a

이렇게 작성한 Selector가 원하는 영역만을 가리키는지 확인하기 위해 개발자 도구의 [Console] 창에서 아래 스크립트 중 하나를 입력합니다.

• document.querySelectorAll('aside div section div a');
• jQuery('aside div section div a'); <– 사이트에 jQuery가 설치되어 있을 경우 사용 가능합니다.

해당 CSS Selector로 검색을 한 결과 24개의 요소가 선택되는 것을 확인할 수 있습니다.

클릭 이벤트를 태깅할 버튼은 아래와 같이 16개이나 앞서 작성한 CSS Selector는 하단에 있는 다른 버튼들도 포함하여 총 24개의 요소를 지정하므로 조건을 수정해야합니다.

이때는 소스 코드에 있는 id와 class를 활용합니다. 일반적으로 상위 요소에는 해당 버튼의 위치를 특정하는 고유한 id나 class가 있습니다.

앞서 구한 CSS Selector에 id는 아래와 같이 해당 위치의 태그에 '#'을 붙여서 추가하고, class는 '.'을 붙여서 원하는 요소를 명확하게 지정할 수 있습니다.

aside div section#tag_cloud-2 div.tagcloud a

추가적으로 모든 상위 요소의 태그들을 입력할 필요는 없습니다. 중간에 불필요하다고 생각되는 요소가 있다면 아래와 같이 제거하여도 무방합니다. 단, 마지막의 클릭 요소는 반드시 필요합니다.

aside section#tag_cloud-2 div.tagcloud a <- div 제거

최종적으로 작성한 CSS Selector를 다시 확인하면 정상적으로 16개의 요소만 잡히는 것을 확인할 수 있습니다.

트리거 조건 설정

트리거 생성 화면에서 [일부 링크 클릭]을 선택한 후 앞서 작성한 CSS Selector를 아래와 같이 입력하고 [저장]합니다. 이때, 반드시 Click Element와 CSS 선택 도구와 일치를 조건으로 선택해야합니다.

특정 페이지에서만 트리거를 발동시키려면 아래와 같이 Page Path 조건도 추가할 수 있으나 생략해도 됩니다.

참고. 필자는 다른 페이지의 예상치 못한 버튼 클릭에 해당 트리거가 발동하는 것을 방지하기 위해 습관적으로 이 조건을 추가합니다.

클릭 이벤트 태그 생성

트리거가 발동했을 때 데이터를 전송할 수 있게 태그를 생성합니다. 좌측에서 [태그]를 눌러 화면을 이동한 다음, [새로 만들기]를 클릭합니다.

태그 유형과 트리거를 아래와 같이 선택하고, 태그 명칭도 이벤트에 대한 구분이 가능하게 입력합니다.

• 태그 구성 : Google 애널리틱스: GA4 이벤트
• 트리거 : 위에서 생성한 트리거를 지정

앞서 강의에서 생성한 GA4 구성 태그를 지정하고, 보고서에서 확인할 이벤트 이름을 입력합니다. 그 외에도 아래와 같이 클릭한 버튼을 구분하기 위해 이벤트 매개변수를 추가합니다.

매개변수 이름은 GA4에서 추가할 맞춤 측정기준과 동일하면 되고, 값은 {{ }}를 활용해서 Click Text 변수안에 저장된 값을 동적으로 입력하고 저장합니다.

참고. Google Tag Manager에서 변수는 {{변수명}} 형태로 태그, 트리거에서 활용이 가능합니다.

GA4 매개변수 추가

click_text에 대한 값을 수집하기 위해 구글 애널리틱스 4의 [구성]-[맞춤 정의] 메뉴에서 [맞춤 측정기준 만들기]를 클릭합니다.

범위는 이벤트로 설정하고, 이벤트 매개변수는 태그에 입력한 매개변수 명칭과 동일하게 입력한 뒤 저장합니다.

맞춤 측정기준이 생성되고 앞서 작업한 구글 태그매니저의 내용을 게시하면 실시간 보고서에서 해당 이벤트가 클릭될 때마다 데이터가 수집되는 것을 확인할 수 있습니다.

목록에서 해당 이벤트를 클릭할 경우 함께 수집한 매개변수를 통해서 클릭한 영역에 대한 텍스트 정보를 추가적으로 확인할 수 있습니다.

다음 강의에서는 GA4의 화면 구성과 주요 기능에 대해 알아보겠습니다