GTM 클릭 이벤트 추적: 트리거·변수·GA4 설계 4단계 기준

GTM 클릭 이벤트 추적은 트리거를 하나 만들면 끝난다는 말은 절반만 맞습니다.
실제로 쓸 만한 클릭 데이터를 얻으려면 트리거보다 "어떤 기준으로 클릭을 구분할지"를 먼저 정해야 합니다.

GTM 클릭 이벤트 추적에서 가장 중요한 건 세 가지입니다. 클릭 대상에 맞는 트리거 유형, 사이트가 바뀌어도 유지되는 식별 변수, GA4에서 바로 분석할 수 있는 이벤트 구조입니다.
셋 중 하나라도 어긋나면 태그는 발동하는데 보고서에서는 쓸 수 없는 데이터가 쌓입니다.

아래에서 트리거 선택 → 변수 선택 → GA4 이벤트 설계 → 검증 순서로 단계별로 설명합니다.

※ 이 글은 메뉴, 탭, 외부 링크, 배너처럼 여러 클릭을 분석용으로 함께 추적하는 방법을 다룹니다.
전환으로 잡을 버튼 하나를 정확하게 세는 방법은 GTM 버튼 클릭 전환 설정: 오집계 막는 트리거 4단계 기준에서 따로 설명했습니다.

1. GTM 클릭 이벤트 추적, 트리거 유형부터 정한다

GTM의 클릭 트리거는 두 가지입니다.
이름은 비슷하지만 클릭을 인식하는 방식이 완전히 달라서, 처음에 잘못 고르면 뒤에서 아무리 조건을 손봐도 데이터가 맞지 않습니다.

① 클릭 - 모든 요소 (All Elements)

• 페이지에서 클릭된 모든 요소에서 발동합니다(gtm.click)

• 사용자가 실제로 누른 가장 안쪽 요소를 기준으로 값을 읽습니다

• 버튼(button), div로 만든 탭, 아코디언, 이미지 배너처럼 링크가 아닌 요소에 사용합니다

-> 링크가 아닌 요소 / 화면 안에서 동작하는 UI 추적에 적합합니다

② 클릭 - 링크만 (Just Links)

• <a> 태그 클릭에서만 발동합니다(gtm.linkClick)

• 안쪽 아이콘이나 span을 눌러도 가장 가까운 상위 <a> 요소를 기준으로 값을 읽습니다

• '태그 대기(Wait for Tags)' 옵션이 있어 페이지가 넘어가기 전에 태그가 실행될 시간을 확보할 수 있습니다(기본 2,000ms)

-> 외부 링크, 메뉴 이동, 다운로드 링크처럼 페이지 이동이 일어나는 클릭에 적합합니다

잘못 고르면 생기는 일

실무에서 가장 자주 보는 경우는 '모든 요소' 트리거에 Click Text 조건을 거는 경우입니다.

예를 들어 버튼 안에 텍스트와 화살표 아이콘(svg)이 함께 들어 있으면, 사용자가 아이콘을 눌렀을 때 Click Text가 비어 있습니다.
테스트할 때는 글자를 눌러서 잘 잡히지만, 실제 사용자는 버튼 아무 곳이나 누르기 때문에 일부 클릭이 빠집니다.

반대로 '링크만' 트리거를 걸었는데 개발 구조상 CTA가 <button> 태그라면 클릭이 하나도 잡히지 않습니다.
화면에서는 같은 버튼처럼 보여도 코드에서는 다른 요소일 수 있다는 점을 먼저 확인해야 합니다.

판단 기준은 간단합니다.

• 브라우저 개발자 도구로 대상 요소를 열어봤을 때 <a href="...">라면 → 링크만

• <button>, <div>, <li>라면 → 모든 요소 + 하위 요소까지 포함하는 조건

'모든 요소'를 쓸 때 하위 요소 문제를 막으려면, 트리거 조건에서 Click Element가 CSS 선택기와 일치하도록 설정하고 선택기를 .cta-btn, .cta-btn *처럼 적습니다.
뒤에 붙은 *가 "이 버튼 안의 모든 하위 요소"를 뜻하기 때문에 아이콘을 눌러도 같은 클릭으로 잡힙니다.

2. GTM 클릭 변수 선택 기준: 오래 유지되는 식별자를 쓴다

트리거 유형을 정했다면, 이제 "어떤 클릭인지"를 구분할 변수를 고를 차례입니다.
GTM에는 클릭 관련 기본 제공 변수가 있지만 처음에는 꺼져 있습니다.
변수 → 기본 제공 변수 → 구성에서 Click Element, Click Classes, Click ID, Click Target, Click URL, Click Text를 먼저 켜야 합니다.

문제는 이 변수들이 얼마나 오래 유지되는지가 서로 다르다는 점입니다.

식별 변수별 안정성 비교

실무에서 자주 보는 실패 사례

가장 흔한 사례는 사이트 리뉴얼 직후 클릭 이벤트가 0건으로 떨어지는 것입니다.

Click Classes에 main-banner-btn 같은 클래스명을 조건으로 걸어뒀는데, 디자인을 바꾸면서 퍼블리싱팀이 클래스명을 바꾼 경우입니다.
태그에는 오류가 없고 트리거만 조용히 안 맞기 때문에, 누군가 보고서를 열어보기 전까지는 아무도 알아채지 못합니다.

React, Vue 같은 프레임워크에서 CSS-in-JS를 쓰는 사이트라면 더 자주 일어납니다.
sc-a1b2c3처럼 빌드할 때마다 바뀌는 클래스는 조건으로 쓰면 안 됩니다. 다음 배포 때 바로 깨집니다.

Click Text도 마찬가지입니다.
"지금 구매하기"를 "바로 구매"로 바꾸는 작은 카피 테스트 하나로 추적이 끊깁니다.
버튼 문구를 A/B 테스트하는 사이트라면 Click Text를 식별 조건으로 쓰지 않는 것이 원칙입니다.

가장 안정적인 방법: 데이터 속성 + 자동 이벤트 변수

개발 협조가 가능하다면 추적할 요소에 data-track="header_menu"처럼 추적 전용 속성을 붙이는 방식이 가장 오래 유지됩니다.

1) 개발 단계: 추적 대상 요소에 data-track 속성 추가
2) GTM 변수: 새 변수 → '자동 이벤트 변수' → 변수 유형 '요소 속성' → 속성 이름 data-track
3) 트리거 조건: 해당 변수가 비어 있지 않을 때(또는 특정 값과 일치할 때) 발동

이렇게 만들면 디자인과 문구가 바뀌어도 속성값이 그대로인 한 추적은 유지됩니다.
속성값 자체를 GA4 파라미터로 넘기면 "어느 영역 클릭인지"까지 별도 작업 없이 보고서에 나옵니다.

단, '모든 요소' 트리거에서는 하위 요소를 눌렀을 때 속성을 못 읽는 문제가 그대로 남습니다.
이럴 때는 Click Element에서 가장 가까운 [data-track] 상위 요소를 찾아 값을 가져오는 맞춤 자바스크립트 변수를 하나 두면 해결됩니다.
변수에 들어갈 값이 dataLayer 구조와 엮여 있다면 GTM 데이터영역 변수: 설정 기준과 값이 안 잡힐 때 확인할 4가지도 함께 참고하시기 바랍니다.

-> 개발 협조가 어렵다면: Click ID → Click URL → Click Classes 순서로 고르고, Click Text는 마지막 수단으로만 씁니다

3. GA4 클릭 이벤트 설계: 이벤트 이름으로 나눌지, 파라미터로 나눌지

GTM에서 클릭을 잡았다면, 그 데이터를 GA4로 어떤 모양으로 보낼지 정해야 합니다.
여기서 구조를 잘못 잡으면 보고서에 이벤트 이름이 수십 개 쌓이고 정작 비교 분석은 할 수 없게 됩니다.

① 이벤트 이름 하나 + 파라미터로 구분

ui_click 같은 이벤트 하나에 아래 파라미터를 붙이는 방식입니다.

• click_area: header_menu, main_banner, product_tab

• click_text: 실제 버튼 문구(참고용)

• link_url: 이동하는 주소

-> 메뉴·탭·배너처럼 "어디를 더 많이 누르는지" 비교하는 분석용 클릭에 적합합니다

② 클릭마다 이벤트 이름을 따로 생성

click_kakao_inquiry, click_download_brochure처럼 이벤트를 따로 만드는 방식입니다.

-> GA4에서 키 이벤트로 지정하거나 광고 전환으로 가져갈 클릭에 적합합니다

판단 기준은 "이 클릭을 키 이벤트로 지정할 것인가"입니다.
GA4 키 이벤트는 이벤트 이름 단위로 지정되기 때문에, 파라미터로만 구분된 클릭은 그중 하나만 골라 전환으로 쓰기가 번거롭습니다.
전환으로 쓸 클릭만 별도 이벤트로 빼고, 나머지는 하나의 이벤트로 묶는 혼합형이 실무에서 가장 관리하기 쉽습니다.

GA4 한도와 이름 규칙

설계할 때 아래 기준을 미리 확인해야 나중에 다시 만들 일이 없습니다(GA4 표준 속성 기준, Google 애널리틱스 고객센터 문서).

특히 놓치기 쉬운 부분은 파라미터를 보낸다고 보고서에 바로 나오지 않는다는 점입니다.
click_area 같은 파라미터는 GA4 관리 → 맞춤 정의에서 맞춤 측정기준으로 등록해야 탐색 분석과 표준 보고서에서 쓸 수 있습니다.
등록 이전에 수집된 데이터는 소급 적용되지 않으므로, 태그를 게시하기 전에 등록부터 해두는 것이 순서입니다.

향상된 측정과의 중복

GA4 데이터 스트림의 '향상된 측정'을 켜두면 외부 링크 클릭이 click이라는 이벤트 이름으로, 파일 다운로드가 file_download로 자동 수집됩니다.

이 상태에서 GTM으로 외부 링크 클릭을 또 만들면 같은 클릭이 두 번 들어갑니다.
GTM 이벤트 이름을 click으로 지으면 자동 수집 이벤트와 섞여서 어느 쪽이 보낸 데이터인지 구분할 수도 없습니다.

• 외부 링크를 자동 수집으로 충분히 볼 수 있다면 → GTM에서는 만들지 않습니다

• 외부 링크에 click_area 같은 맥락이 필요하다면 → 향상된 측정의 외부 링크 클릭을 끄고 GTM 이벤트로 대체합니다

• 어떤 경우든 GTM 이벤트 이름에 click은 쓰지 않습니다

4. GTM 클릭 이벤트 검증 순서: 미리보기부터 GA4 보고서까지

클릭 이벤트는 다른 이벤트보다 검증 단계에서 문제가 많이 발견됩니다.
사람마다 누르는 위치가 다르고, 같은 버튼도 기기에 따라 구조가 다르게 렌더링되기 때문입니다.

1단계: GTM 미리보기에서 이벤트 유형 확인

미리보기(Tag Assistant)를 켜고 대상 요소를 누른 뒤, 왼쪽 이벤트 목록에 무엇이 찍히는지 봅니다.

• '클릭'으로 찍히면 → 모든 요소 트리거로 잡히는 요소입니다

• '링크 클릭'으로 찍히면 → 링크만 트리거로 잡히는 요소입니다

• 아무것도 안 찍히면 → 클릭 트리거가 하나도 없거나, 페이지가 클릭 이벤트를 막고 있는 경우입니다

참고로 GTM은 컨테이너에 해당 유형의 클릭 트리거가 하나 이상 있어야 클릭을 감지합니다.
아직 트리거를 만들지 않았다면, 조건 없이 '모든 클릭'으로 임시 트리거를 만들어 구조를 먼저 확인합니다.

2단계: 변수 탭에서 값 확인

클릭 이벤트를 선택한 뒤 변수 탭에서 Click Text, Click Classes, 자동 이벤트 변수 값이 기대한 대로 들어왔는지 확인합니다.

이때 같은 버튼의 글자, 아이콘, 여백을 각각 눌러보는 것이 중요합니다.
세 곳 모두에서 같은 값이 나와야 실제 사용자 클릭이 빠지지 않습니다.
모바일 화면 크기로 바꿔서도 한 번 더 확인합니다. 반응형 사이트는 모바일에서 메뉴 구조 자체가 다른 경우가 많습니다.

3단계: GA4 DebugView에서 파라미터 확인

GTM 미리보기에서 태그가 발동했다면, GA4 DebugView에서 이벤트 이름과 파라미터 값이 정확히 들어왔는지 봅니다.
파라미터 이름 오타(click_area / clickarea)는 이 단계에서만 잡히는 경우가 많습니다.
자세한 점검 방법은 GA4 디버그 뷰 사용법: 이벤트 누락 잡는 4단계 점검 기준에서 정리했습니다.

4단계: 게시 후 보고서 확인

표준 보고서에는 보통 24~48시간 뒤에 반영됩니다.
게시 다음 날 이벤트 수만 볼 게 아니라, click_area별로 나눠봤을 때 (not set)이 많이 섞여 있지 않은지까지 확인해야 합니다.
(not set) 비중이 높다면 하위 요소 클릭에서 값을 못 읽고 있다는 신호입니다.

추적 자체가 안 되는 예외 상황

트리거와 변수를 맞게 설정해도 구조적으로 잡히지 않는 경우가 있습니다.

• 외부 도메인 iframe 안의 클릭: 결제창, 외부 예약 위젯, 임베드된 상담 버튼 등은 GTM이 iframe 내부를 볼 수 없습니다

• 이벤트 전파를 막는 스크립트: 개발 코드에서 클릭 이벤트 전파를 차단하면 GTM 리스너까지 도달하지 않습니다

• Shadow DOM 안의 요소: 일부 웹 컴포넌트는 Click Element가 컴포넌트 바깥 요소로만 잡힙니다

이런 경우에는 GTM 클릭 트리거로 해결하려 하지 말고, 개발 단계에서 dataLayer.push로 직접 이벤트를 보내는 방식으로 바꾸는 것이 맞습니다.
시간을 들여 트리거 조건을 고쳐도 해결되지 않는 문제이기 때문입니다.

자주 묻는 질문

GTM 클릭 트리거가 미리보기에서 아예 안 잡히는 이유는?
컨테이너에 해당 유형의 클릭 트리거가 하나도 없으면 GTM이 클릭을 감지하지 않습니다. 트리거가 있는데도 안 잡힌다면 대상 요소가 외부 도메인 iframe 안에 있거나, 사이트 스크립트가 클릭 이벤트 전파를 막고 있을 가능성이 높습니다. 이 경우 개발 측에서 dataLayer.push로 이벤트를 직접 보내야 합니다.

GTM 모든 요소와 링크만 트리거 중 무엇을 써야 하나요?
대상 요소가 <a href> 링크라면 '링크만', button이나 div라면 '모든 요소'를 씁니다. 화면에서 같아 보이는 버튼도 코드에서는 다를 수 있으니 개발자 도구로 태그를 먼저 확인해야 합니다.

GTM Click Text가 비어 있거나 다르게 나오는 이유는?
'모든 요소' 트리거는 실제로 누른 가장 안쪽 요소를 기준으로 값을 읽기 때문에 아이콘이나 빈 영역을 누르면 텍스트가 비어 있습니다. CSS 선택기 조건에 선택자, 선택자 *를 함께 넣거나, 상위 요소의 데이터 속성을 읽는 변수를 쓰면 해결됩니다.

GA4에서 클릭 이벤트 파라미터가 보고서에 안 보이는 이유는?
이벤트 파라미터는 GA4 관리 → 맞춤 정의에서 맞춤 측정기준으로 등록해야 보고서에 나타납니다. 등록 이전 데이터는 소급되지 않으므로 태그 게시 전에 등록해두는 것이 좋습니다.

마무리

GTM 클릭 이벤트 추적에서 데이터를 쓸 수 없게 되는 원인은 대부분 태그 설정이 아니라 구분 기준에 있습니다.

• 트리거: 대상 요소의 실제 태그를 보고 '모든 요소'와 '링크만' 중에 고른다

• 변수: 문구나 클래스 대신 리뉴얼해도 유지되는 데이터 속성이나 ID를 쓴다

• GA4 설계: 분석용 클릭은 이벤트 하나 + 파라미터로, 전환용 클릭은 별도 이벤트로 나눈다

• 검증: 버튼의 글자·아이콘·여백을 각각 눌러보고, 게시 후에는 (not set) 비중까지 확인한다

이 순서대로 설계해두면 사이트를 개편하거나 카피를 바꿔도 클릭 데이터가 끊기지 않습니다.
지금 쓰고 있는 클릭 트리거가 Click Text나 클래스명에만 의존하고 있다면, 다음 리뉴얼 전에 식별 기준부터 바꿔두는 것을 권합니다.

전화 문의 버튼처럼 tel 링크를 따로 추적해야 한다면 GTM 전화번호 클릭 추적: tel 링크 트리거 설정과 검증 4단계를 이어서 참고하시기 바랍니다.