이보민
지금 간편하게 로그인하고 전문성 있는 정보를 확인해보세요.
데이터 분석가들이 직접 쓰는 다른 로그인 전용 글들도 무제한으로 이용할 수 있습니다.
클릭 데이터 제대로 수집해보고 싶어요
이전 글 ‘GA4 버튼 클릭 데이터 수집하기’에서 버튼 클릭 데이터를 수집하기 위해 GTM 트리거와 태그를 세팅하는 방법에 대해 알아보았습니다. 그런데 막상 우리 웹사이트에서 클릭 데이터를 수집하려고 보면 트리거를 정확히 어떻게 설정해야 할지 막막해하시는 경우가 있더라고요.
특히 ‘웹 사이트 배너 이미지 클릭한 경우 데이터를 쌓도록’ 하고 싶거나, ‘특정 버튼을 클릭한 경우에 데이터를 쌓도록’하고 싶은데 ‘배너 이미지를 클릭할 때’, ‘특정 버튼을 클릭할 때’라는 조건을 어떻게 설정해야 하는지 고민을 많이 하시는데요.
이런 분들을 위해 GTM에서는 사용자가 클릭한 요소를 식별할 수 있는 다양한 방법들을 제공하고 있습니다. 그중에서도 클릭 요소를 정확하게 구분하고 싶을 때 활용하는 간단하지만, 유용한 옵션 6가지에 대해 알려드리려고 합니다.
분량이 너무 길어져서 글을 2개로 나누었으니 GTM에서 클릭 이벤트를 자유롭게 세팅하고 싶다면 이번 글과 다음 글 모두 끝까지 읽어보세요. 각 옵션을 사용할 때 주의할 점부터 세팅할 때 무조건 활용해야 하는 꿀팁까지 모두 알려드릴게요 🙌
웹사이트에서 사용자가 클릭한 요소를 알아내는 방법 6가지
GTM에서 신규 트리거를 생성한 후 트리거 유형을 ‘클릭 - 모든 요소’로 선택하고, 트리거 실행 조건을 ‘일부 클릭’으로 선택하면, 아래와 같은 화면을 확인할 수 있습니다. 박스 안에 있는 내용을 수정하여 어떤 조건을 만족하는 클릭이 발생한 경우에 이 이벤트 트리거를 실행시킬 것인지 설정할 수 있습니다.
‘구글 애널리틱스 트래킹 코드’라고 쓰여진 드롭박스를 선택하면 어떤 조건에서 이 트리거를 실행시킬지를 세부적으로 설정할 때 사용하는 다양한 방법들이 나열되어 있는데요.
그중에서도 클릭 요소 식별을 위해 가장 많이 사용하는 것은 아래 여섯 가지 항목입니다. 우선 이번 글에서는 1번 ~ 3번 옵션이 각각 무엇인지, 어떻게 활용하면 좋은지 설명해 보도록 하겠습니다.
- Click Text
- Click URL
- Page Path
- Click ID
- Click Classes
- Click Element
1. Click Text : 가장 간단하게 클릭 요소 찾기
클릭 조건을 설정하는 6가지 옵션 중 가장 쉽게 사용할 수 있는 방법입니다. 클릭 요소 내의 텍스트를 기준으로 버튼, 링크를 특정하여 트리거를 실행하도록 설정할 수 있습니다.
예를 들어 데이터리안 웹사이트 상단의 메뉴에서 ‘세미나’ 탭을 클릭한 경우 트리거가 발생하도록 설정하고 싶다면 아래와 같이 트리거를 세팅하면 됩니다.
세미나로 시작하는 텍스트를 가진 버튼, 링크 등을 클릭하는 경우에 트리거를 모두 실행시키고 싶거나, 텍스트 중 일부에 ‘세미나’라는 단어가 들어가는 경우에도 트리거를 실행시키고 싶다면, 두 번째 드롭다운 항목을 수정하여 설정을 자유롭게 변경할 수 있습니다.
🚨 Click Text 을 사용할 때 주의할 점 2가지
아주 간단하게 클릭 요소를 잡을 수 있게 해주는 Click Text. 그런데 이 옵션을 사용할 때 주의해야 할 점이 2가지 있어요. 만약 트리거 조건을 정확히 설정했는데 데이터가 정확하게 쌓이지 않는다면 아래 두 가지 주의 사항을 꼭 확인해 보세요.
1. 동일한 텍스트를 가진 클릭 요소를 구분할 수 없습니다.
한 페이지 안에 ‘세미나’라는 텍스트를 사용하는 클릭 요소가 두 개 이상인 경우 다른 클릭 요소를 클릭할 때도 트리거가 실행될 수 있습니다.
아래 이미지 예시에서는 좌측 상단에 있는 ‘세미나’ 메뉴를 클릭할 때도 트리거가 실행되며, 오른쪽 하단, 블로그 카테고리에 있는 ‘세미나’ 태그를 클릭할 때에도 트리거가 실행됩니다.
2. 클릭 요소에서 텍스트를 변경하면, Click Text로 설정해 둔 트리거도 모두 변경해야 합니다.
예를 들어 데이터리안 웹사이트 상단 메뉴의 ‘세미나’ 탭 이름이 ‘데이터리안 세미나’로 변경된다면 기존에 사용하던 트리거에 세팅되어 있는 Click Text 조건을 ‘세미나’가 아니라 ‘데이터리안 세미나’로 변경해 주어야 합니다.
2. Click URL : 클릭 시 이동하는 페이지의 URL로 클릭 요소 구분하기
앞서 Click Text만 사용하면 아래와 같이 동일한 텍스트를 가진 클릭 요소를 구분할 수 없다고 이야기했었습니다. 그런데 만약 ‘세미나’라는 텍스트가 쓰인 두 클릭 요소를 클릭했을 때 이동하는 페이지의 URL이 서로 다르다면 어떨까요?
이 경우에는 ‘Click URL’ 이라는 옵션을 추가하여 내가 원하는 요소를 클릭했을 때만 트리거가 동작하도록 조건을 설정할 수 있습니다.
데이터리안 웹사이트 홈 화면 이미지에서 왼쪽 상단에 있는 ‘세미나’ 메뉴를 클릭하는 경우 세미나 페이지(https://datarian.io/seminar)로 이동하지만, 우측 하단에 있는 블로그 최신 글 하위의 ‘세미나’ 카테고리 버튼을 클릭하면 해당 페이지 내에서 블로그 글 콘텐츠가 변경될 뿐 다른 페이지로는 이동하지 않도록 설계되어 있습니다.
이때 ‘세미나’라는 텍스트를 가진 요소 중 클릭 시 이동되는 페이지의 URL이 ‘https://datarian.io/seminar’인 경우에만 클릭 트리거를 실행시키고 싶다면, 아래와 같이 Click URL 조건을 추가해주세요.
3. Page Path : 클릭하는 페이지의 경로를 기준으로 구분하기
앞서 Click URL이라는 옵션을 추가하면 버튼 또는 링크를 클릭 했을 때 이동하는 경로의 URL을 기준으로 조건을 나누어 트리거를 실행시킬 수 있다고 했습니다. 그런데 가끔은 이동하는 페이지의 URL이 아니라 클릭할 당시에 어떤 페이지에서 클릭했는지를 기준으로 트리거를 설정하고 싶을 수도 있거든요. 이럴 때 사용하는 것이 바로 Page Path 옵션입니다.
예를 들어 지금부터는 모든 페이지에서 세미나 메뉴를 클릭하는 경우가 아니라 ‘블로그 관련 페이지(블로그 목록 페이지, 블로그 글 상세 페이지)에 접속한 사람들이 세미나 메뉴를 얼마나 클릭하는 지’를 알고 싶어졌다고 생각해 보겠습니다.
이 경우 아래와 같이 Page Path 옵션을 이용하여 ‘블로그 관련 페이지 내에서 클릭하는 경우’라는 조건을 설정해 줄 수 있는데요.
이때 Page Path 값은 해당 사용자가 열어둔 웹페이지의 URL(https://datarian.io/blog) 에서 웹사이트의 도메인(https://datarian.io)을 제외한 ‘/blog’를 의미합니다. 여기서는 웹사이트 내 블로그 목록(https://datarian.io/blog)과 블로그 글 상세 페이지에서 트리거를 실행시키는 경우를 모두 포함하기 위하여 경로를 ‘/blog’으로 설정하고 조건은 ‘포함’으로 설정했습니다.
아래와 같이 트리거를 구성하는 경우 ‘https://datarian.io/blog’로 시작하지 않는 페이지에서 세미나 메뉴를 클릭하는 경우에는 데이터가 쌓이지 않게 됩니다.
Page Path 는 정확히 어디부터 어디까지인가요?
아래와 같은 URL에서 Page Path는 웹사이트 도메인(https://datarian.io)과 쿼리 문자열(?utm_source=resume) 사이에 있는 ‘/blog/books-for-data-analytics-beginner’를 의미합니다.
- URL 예시: https://datarian.io/blog/books-for-data-analytics-beginner?utm_source=resume
- Page Path: /blog/books-for-data-analytics-beginner
참고 자료: [GA4] Page path
그럼 지금까지 GTM에서 클릭 이벤트를 조금 더 정확히 설정하기 위해 가장 간단히 사용해 볼 수 있는 옵션 3가지에 대해 알아보았습니다.
다음 글에서는 웹사이트의 구조를 아는 경우 조금 더 편리하게 클릭 요소를 식별할 수 있는 Click ID, Click Classes, Click Element 옵션에 대해 알아보도록 하겠습니다. 웹사이트 배너 클릭 이벤트를 트래킹하고 싶다면, 다음 글 'Click ID, Click Classes, Click Element로 완벽한 GTM 클릭 트리거 만들기’를 꼭 확인해 주세요.
