이보민
지금 간편하게 로그인하고 전문성 있는 정보를 확인해보세요.
데이터 분석가들이 직접 쓰는 다른 로그인 전용 글들도 무제한으로 이용할 수 있습니다.
클릭 데이터 제대로 수집해보고 싶어요
이전 글 ‘간단한 GTM 클릭 트리거 만들기: Click Text, Click URL, Page Path’에서는 클릭 요소의 텍스트, 클릭한 후 이동하는 URL, 클릭 당시 페이지 경로를 이용해 간단하게 클릭 요소를 식별하는 방법에 대해 알아보았습니다.
이번 글에서는 GTM에서 클릭 이벤트를 만들 때 자주 사용되는 트리거 옵션 6개 중 나머지 3개(Click ID, Click Classes, Click Element)에 대해 알아보도록 하겠습니다.
- Click Text
- Click URL
- Page Path
- Click ID
- Click Classes
- Click Element
웹사이트 구성 요소를 이용해 클릭 트리거 만들기
실무에서 데이터를 쌓다 보면 클릭 요소 내의 텍스트만 가지고 정확하게 내가 원하는 버튼, 링크의 클릭 데이터를 설정하기 어려운 경우가 많습니다. 그래서 GTM에서는 Click Text 옵션의 한계점을 보완하고 조금 더 정확하게 트리거 조건을 설정할 수 있는 Click Element, Click Classes, Click ID라는 옵션을 제공합니다.
그런데 이 세 가지 옵션을 잘 사용하기 위해서는 웹사이트 구성 요소인
element 그리고 class, id에 대한 이해가 조금 필요합니다.데이터리안 웹사이트 예시를 한 번 살펴보겠습니다. 데이터리안 웹사이트 메인 페이지에 노출되고 있는 슬라이드 배너가 어떤 코드로 요소로 구성되어 있는지 확인해 보았습니다 (윈도우는 F12, 맥은 Command + Option + I를 누르면 아래와 같이 개발자 도구를 띄울 수 있습니다).
개발자 도구 왼쪽 상단에 있는 선택 도구를 클릭하고, 왼쪽 화면에 마우스를 가져다 대면 파란색으로 블럭이 생기는 것을 볼 수 있는데요.
이 상태로 우리가 알고 싶은 웹사이트 구성 요소를 클릭하면, 오른쪽에 해당 부분 코드가 어떻게 구성되어 있는지를 보여줍니다. 아래 스크린샷 이미지에서는 GA4 캠프 배너를 만들기 위해 필요한 코드가 오른쪽에 표시되고 있습니다.
이 코드를 정리하면 아래와 같이 나타낼 수 있습니다.
여기서
<div> ~ </div> 라고 쓰여진 것들은 HTML의 element이고, 그 안에 class, id 값이 들어있는 것을 볼 수 있어요.누군가 데이터리안 웹사이트에 접속해서 GA4 캠프 배너를 클릭한다면, 컴퓨터는 아래와 같이 이 요소의 element가 무엇인지, class 값이 무엇인지, id 값이 무엇인지를 알 수 있습니다.
GTM은 이 HTML의 id, class, element 값을 이용해서 사용자가 클릭한 요소를 구분하여 트리거를 만들 수 있도록 옵션을 제공하고 있는데요. 각 옵션의 특징들을 정리하면 아래와 같습니다.
Click ID
- ID 속성을 기준으로 클릭 트리거를 설정할 수 있음.
- 한 HTML 페이지 내에서 ID는 유일한 값이어야 함. 다른 요소와 중복된 값을 가질 수 없음.
Click Classes
- Class 속성을 기준으로 클릭 트리거를 설정할 수 있음.
- 한 HTML 페이지 내에 같은 Class 값을 가지는 요소가 여러 개 있을 수 있으며, 같은 Class 값을 가진 요소가 여러 개 있는 경우 어떤 요소를 클릭하든 동일하게 트리거가 작동.
Click Element
- HTML element, CSS selector 를 이용하여 비교적 자유롭게 트리거를 설정할 수 있음.
- Class, ID 값이 없는 HTML element를 클릭하는 경우에도 트리거 설정 가능.
그럼 이제 각 옵션들을 어떻게 활용할 수 있는지 데이터리안 웹사이트 예시를 통해 설명해 보도록 하겠습니다.
1. Click ID : 유일한 ID 값을 가진 요소 찾기
먼저 데이터리안 웹사이트 홈 화면에 있는 슬라이드 배너 중 GA4 데이터 분석 캠프 배너를 클릭할 때만 동작하는 트리거를 만들어보겠습니다. 앞서 간소화 해둔 슬라이드 배너 코드를 다시 가져와서 살펴볼게요.
데이터리안 웹사이트 홈 화면 배너의 경우 해당 배너를 개발할 당시 각 배너 콘텐츠를 구분할 수 있는 유일한 값인 ID 를 설정해 주었습니다. 덕분에 이 ID 값을 이용하면 쉽게 사용자가 클릭한 배너가 어떤 콘텐츠를 담고 있는 배너인지 알 수 있습니다.
main_banner_click_seminar: 세미나 배너
main_banner_click_SQL: SQL 캠프 배너
main_banner_click_GA4: GA4 캠프 배너
이렇게 ID 값으로 클릭 요소를 구분할 수 있는 경우 아래와 같이 Click ID 조건만 설정해 주면 간단히 트리거를 설정할 수 있습니다.
🚨 Click ID, Click Classes, Click Element를 사용할 때 주의할 점
Click ID, Click Classes, Click Element 모두 클릭한 요소의 가장 마지막에 있는 element가 가진 값을 기준으로 조건을 설정합니다.
만약, 웹사이트 구조가 아래와 같이 변경되었다면, 가장 마지막에 위치한 Element는 <div>가 아니라 <a> 이므로 <div> element에 포함된 class, id 값을 사용하여 트리거를 세팅할 수 없습니다. 조건을 세팅하기 전 마지막 HTML 요소가 무엇인지 한번 더 확인해 주세요.
2. Click Classes : 동일한 Class 값을 가진 요소들 찾기
이번에는 Class 속성의 값을 이용해서 슬라이드 배너 안의 여러 광고 이미지 중 하나라도 클릭할 때 동작하는 트리거 만들어보겠습니다. GA4 캠프 배너를 클릭했는지를 알 필요는 없고, 슬라이드 배너 중 하나라도 클릭하는지 궁금한 경우 이렇게 트리거를 설정해 볼 수 있는데요.
아래 코드에서
class 값이 swiper-slide인 경우에 트리거를 실행시키도록 설정해 주면 됩니다.
Click Element : HTML Element를 이용해 클릭 요소 찾기
이번에는 HTML Element를 이용해 웹사이트 헤더를 클릭할 때 동작하는 트리거를 만들어보겠습니다.
슬라이드 배너 코드를 확인했을 때와 마찬가지로 개발자 도구를 열어 코드를 확인해 줍니다 (윈도우는 F12, 맥은 Command + Option + I를 누르면 아래와 같이 개발자 도구를 띄울 수 있습니다).
위 코드를 간소화 해보면 아래와 같이 나타낼 수 있습니다.
위와 같은 구조의 HTML element 를 클릭할 때 트리거가 실행되도록 설정해 주고 싶다면 아래와 같이 조건을 작성해 주면 됩니다.
이때 클릭되는 버튼의 태그(이 경우 a 태그)가 반드시 마지막에 위치해야 하며, 부모 태그들의 순서가 임의로 변경되면 안 됩니다.
header div div div ul li a
단, 특정 요소의 위치를 구분하는 데에 큰 문제가 없는 경우 중간 태그들을 생략해도 동일하게 트리거가 실행됩니다.
header div div div ul li a
→ header div ul li a (div 생략)
→ header div li a (div, ul 생략)
잘 설정한 것 같은데 여전히 트리거가 실행되지 않는다면,
지금까지 클릭요소를 식별하기 위해 가장 많이 사용하는 방법 6가지(Click Text, Click URL, Page Path, Click ID, Click Classes, Click Element)에 대해 이야기해 보았습니다. 이제 GTM으로 클릭 태그를 설정하는 것이 마냥 두렵지는 않으실 것 같은데요. 그래도 실무에서 이 내용들을 적용하려고 보면 내 맘처럼 잘 동작하지 않는 경우가 많이 있을 거예요.
그런 분들을 위해 다음 글에서는 태그 설정을 알맞게 한 것 같은데 제대로 데이터 수집이 안될 때 왜 안되는지를 확인할 수 있는 디버깅 방법에 대해 알아보도록 하겠습니다.
