brunch

You can make anything
by writing

C.S.Lewis

by 데이터리안 Sep 03. 2024

Click ID, Classes, Element

GTM으로 배너 클릭 이벤트까지 직접 세팅해 봅시다


클릭 데이터 제대로 수집해보고 싶어요  

1. GA4 버튼 클릭 데이터 수집하기

2. 간단한 GTM 클릭 트리거 만들기: Click Text, Click URL, Page Path [로그인 전용]

3. 완벽한 GTM 클릭 트리거 만들기: Click ID, Click Classes, Click Element [로그인 전용]



이전 글 ‘간단한 GTM 클릭 트리거 만들기: Click Text, Click URL, Page Path’에서는 클릭 요소의 텍스트, 클릭한 후 이동하는 URL, 클릭 당시 페이지 경로를 이용해 간단하게 클릭 요소를 식별하는 방법에 대해 알아보았습니다.

이번 글에서는 GTM에서 클릭 이벤트를 만들 때 자주 사용되는 트리거 옵션 6개 중 나머지 3개(Click ID, Click Classes, Click Element)에 대해 알아보도록 하겠습니다.

   

1. Click Text

2. Click URL

3. Page Path

4. Click ID

5. Click Classes

6. Click Element



웹사이트 구성 요소를 이용해 클릭 트리거 만들기

실무에서 데이터를 쌓다 보면 클릭 요소 내의 텍스트만 가지고 정확하게 내가 원하는 버튼, 링크의 클릭 데이터를 설정하기 어려운 경우가 많습니다. 그래서 GTM에서는 Click Text 옵션의 한계점을 보완하고 조금 더 정확하게 트리거 조건을 설정할 수 있는 Click Element, Click Classes, Click ID라는 옵션을 제공합니다.

그런데 이 세 가지 옵션을 잘 사용하기 위해서는 웹사이트 구성 요소인 'element' 그리고 'class', 'id에 대한 이해가 조금 필요합니다. 


데이터리안 웹사이트 예시를 한 번 살펴보겠습니다. 데이터리안 웹사이트 메인 페이지에 노출되고 있는 슬라이드 배너가 어떤 코드로 요소로 구성되어 있는지 확인해 보았습니다 (윈도우는 F12, 맥은 Command + Option + I를 누르면 아래와 같이 개발자 도구를 띄울 수 있습니다). 



개발자 도구 왼쪽 상단에 있는 선택 도구를 클릭하고, 왼ㅇ쪽 화면에 마우스를 가져다 대면 파란색으로 블럭이 생기는 것을 볼 수 있는데요.





배너 클릭 이벤트까지 자유롭게 설정할 수 있는 GTM 트리거 만들기! 

더 자세한 내용은 여기서 확인해보세요 ▼

더 자세한 내용은 여기서 확인해보세요 ▼





데이터리안 콘텐츠와 데이터 분석 능력 업그레이드 해볼까요?


 데이터 분석가들이 직접 발행하는 뉴스레터 무료로 받아보기


 데이터 분석 실무자들이 모여있는 오픈 카톡방 참여하기

(링크 클릭 후 오카방 메인 화면에서 참여 코드 확인 필수!)


 SQL 데이터 분석 캠프 커리큘럼 보러가기


 GA4 데이터 분석 캠프 커리큘럼 보러가기


 데이터리안 블로그에서 더 다양한 데이터 분석 콘텐츠 구경하기


 데이터 분석 전문 세미나 다음 주제 보러가기

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari