Google Tag Manager 트리거 설정 팁: 버튼 클릭과 폼 제출 정확히 추적하기

공식 참고 자료

• Google Search Central

다음 실행

• text-counter
• hashtag-mixer
• 관련 가이드 더 보기

실행 기준 요약

발행 전 체크리스트

• GTM 트리거 설정를 적용할 페이지나 채널을 하나만 정합니다.
• 본문의 핵심 주장과 예시가 실제 실행 순서로 이어지는지 확인합니다.
• 관련 도구로 제목, 설명, 링크, CTA를 발행 전에 한 번 더 점검합니다.

핵심 개요

GTM을 설치하고 GA4 기본 연동까지는 했는데, 버튼 클릭이나 폼 제출 같은 세부 행동 추적에서 막히는 경우가 많다. 트리거를 잘못 설정하면 클릭이 아예 잡히지 않거나, 반대로 원하지 않는 모든 클릭이 다 잡히는 두 가지 문제가 생긴다. 어느 쪽이든 GA4로 전달되는 이벤트 데이터가 오염되어 분석의 신뢰성이 떨어진다. 트리거 설정의 핵심은 추적하고 싶은 요소를 HTML 구조와 CSS 속성을 기반으로 정확히 식별하는 것이다. 막연하게 '버튼 클릭'을 추적하는 것이 아니라, 특정 클래스나 ID를 가진 특정 버튼의 클릭만 포착하는 정밀한 조건을 만들어야 한다. 이를 위해서는 추적할 요소의 실제 HTML 속성값을 먼저 파악해야 하고, GTM의 내장 변수가 올바르게 활성화되어 있어야 한다. 이 두 가지가 갖춰지면 대부분의 클릭 추적 문제는 해결된다. 아래 팁들은 GTM 트리거 설정에서 실무적으로 가장 많이 쓰이고 가장 많이 틀리는 부분을 중심으로 정리한 것이다. 버튼 클릭 추적부터 시작해 폼 제출, 스크롤, 외부 링크, 데이터 레이어까지 순서대로 따라가면 GTM 트리거 설정의 전체 그림이 잡힌다.

팁 1: 클릭 트리거 전에 내장 변수부터 활성화하기

GTM에서 클릭 이벤트를 추적하려면 내장 변수(Builtin Variables)가 활성화되어 있어야 한다. 기본 상태에서는 일부 변수만 활성화되어 있어, 클릭 요소의 속성을 조건으로 사용할 수 없는 경우가 있다. '변수' 메뉴 '내장 변수 구성'에서 클릭 관련 변수를 모두 활성화해야 한다. 구체적으로 Click Element, Click Classes, Click ID, Click Target, Click Text, Click URL 여섯 가지를 반드시 체크하라. 이 변수들이 활성화되어야 트리거 조건에서 '클릭 ID가 X인 경우', '클릭 클래스에 Y가 포함된 경우'처럼 구체적인 조건을 설정할 수 있다. 초보자들이 트리거가 작동하지 않는다고 할 때 이 변수가 비활성화된 경우가 상당히 많다. 버튼 클릭 추적을 시작하기 전에 이 설정을 확인하는 것이 첫 번째 체크포인트다. 또한 GTM 작업공간에는 미리보기 모드에서 클릭한 요소의 실제 변수 값을 확인하는 기능이 있다. 변수 탭에서 Click ID, Click Classes, Click Text 값이 실제로 어떻게 찍히는지 확인한 다음 트리거 조건에 해당 값을 그대로 입력하면 된다. 직접 확인하지 않고 클래스 이름을 추측해서 입력하다가 대소문자나 공백 차이로 이벤트가 잡히지 않는 실수를 흔히 한다. 미리보기 모드에서 확인한 정확한 값을 복사해서 붙여넣는 것이 가장 안전한 방법이다.

팁 2: 미리보기 모드에서 클릭 요소 ID와 클래스 확인하기

트리거 조건을 설정하기 전에 추적할 버튼이나 링크의 실제 속성값(ID, 클래스, 텍스트)을 반드시 확인해야 한다. GTM 미리보기 모드를 활성화하고 웹사이트에서 해당 버튼을 클릭하면, GTM 디버그 패널에 Click 이벤트가 나타나고 Click ID, Click Classes, Click Text 등의 실제 값을 확인할 수 있다. 예를 들어 '구매하기' 버튼의 ID가 'btnpurchase'라면, 트리거 조건으로 '클릭 ID | 같음 | btnpurchase'를 설정하면 정확히 그 버튼만 추적된다. 버튼에 ID가 없다면 클래스나 텍스트를 조건으로 사용한다. 단, 클래스는 여러 요소에 공유되는 경우가 많아 의도치 않은 클릭이 함께 잡힐 수 있으므로 가능하면 ID를 우선으로 활용하라. 클릭 텍스트를 조건으로 사용할 때는 띄어쓰기와 대소문자를 정확히 맞춰야 한다. '지금 구매' 와 '지금구매'는 다르게 인식된다. 또한 텍스트가 동적으로 변경되는 버튼(예: '재고 있음' / '품절'로 바뀌는 버튼)은 텍스트 조건이 불안정할 수 있으므로 ID나 클래스를 우선 사용하는 것이 좋다. 트리거 조건을 '포함(contains)'으로 설정하면 부분 일치로도 잡을 수 있어 유연성이 높아지지만, 의도하지 않은 요소도 함께 잡힐 위험이 있다. '같음(equals)'으로 시작해 필요에 따라 '포함'으로 전환하는 방식이 안전하다.

팁 3: 폼 제출 추적의 두 가지 방식

폼 제출 추적에는 GTM 내장 '양식 제출' 트리거를 사용하는 방법과, 폼 제출 후 나타나는 완료 페이지(감사 페이지) URL을 트리거로 사용하는 방법이 있다. 두 방법 모두 유효하지만 상황에 따라 더 적합한 방법이 다르다. 내장 양식 제출 트리거 방법은 트리거 유형에서 '양식 제출'을 선택하는 것으로 시작한다. 조건을 '모든 양식'으로 설정하면 페이지 내 모든 폼 제출이 추적된다. 특정 폼만 추적하려면 폼 ID나 페이지 URL 조건을 추가한다. 이 트리거는 폼 제출 버튼 클릭 시점에 발동하므로, 실제 서버 전송 성공 여부와 관계없이 이벤트가 발생한다. 유효성 검사 오류로 제출이 차단된 경우에도 이벤트가 카운트될 수 있다는 한계가 있다. 감사 페이지 URL 트리거 방법은 폼 제출 성공 후 '/thankyou' 또는 '/complete' 같은 URL로 이동하는 구조라면 이 페이지 로드를 트리거로 사용하는 것이 더 정확하다. 트리거 유형 '페이지뷰'에서 조건을 '페이지 URL | 포함 | thankyou'로 설정한다. 이 방식은 실제 완료된 제출만 추적하므로 전환 데이터의 정확성이 높다. 다만 폼이 같은 페이지에서 성공 메시지를 표시하는 방식이라면 URL 변경이 없어 이 방법을 사용할 수 없다. 일부 폼(iFrame 기반 폼, Ajax 비동기 제출 폼)은 두 방법 모두 잡히지 않을 수 있다. 이 경우 개발자와 협력해 폼 제출 완료 시 dataLayer.push를 통해 GTM에 이벤트를 전달하는 방식이 가장 신뢰할 수 있다.

팁 4: 스크롤 깊이 추적으로 콘텐츠 소비 패턴 파악

스크롤 깊이 추적은 독자가 페이지의 어디까지 읽었는지 파악하는 데 유용하다. 블로그나 랜딩 페이지에서 특정 섹션까지 스크롤한 사용자를 전환 세그먼트로 정의하거나, 어느 지점에서 이탈이 집중되는지 파악하는 데 활용할 수 있다. GTM에서 '스크롤 깊이' 트리거를 만들 때는 세로 스크롤 비율(25%, 50%, 75%, 100%)을 지정한다. 여러 비율을 한 트리거에 모두 포함시키고, GA4 이벤트에서 {{Scroll Depth Threshold}} 변수를 매개변수로 전달하면 각 비율에서 이벤트가 발생할 때 어느 깊이인지 GA4 보고서에서 확인할 수 있다. 예를 들어 랜딩 페이지에서 스크롤 50% 지점에 가격 섹션이 있다면, 50% 스크롤 이벤트를 발생시킨 사용자와 그렇지 않은 사용자의 전환율을 비교해 가격 정보 노출이 전환에 미치는 영향을 분석할 수 있다. 스크롤 이벤트는 페이지 길이에 따라 발생 빈도가 달라진다는 점에 주의해야 한다. 짧은 페이지에서는 스크롤 25%와 100%가 거의 동시에 발생할 수 있으므로, 긴 콘텐츠 페이지에 적용하는 것이 더 의미 있다. 또한 스크롤 이벤트는 페이지뷰 기반 분석보다 더 많은 이벤트를 생성하기 때문에, GA4의 이벤트 한도(일일 1,000만 이벤트)가 부족한 대형 사이트에서는 특정 페이지에만 선택적으로 적용하는 것이 좋다.

팁 5: 링크 클릭과 외부 링크 추적

외부 링크(다른 도메인으로 연결되는 링크) 클릭 추적은 제휴 링크 분석, 파트너 사이트 유입 측정, 외부 자료 다운로드 추적에 유용하다. 사용자가 어떤 외부 링크를 통해 사이트를 떠나는지 파악하면 콘텐츠 전략과 파트너십 효과를 측정하는 데 도움이 된다. 트리거 유형 '클릭 링크만'을 선택하고 조건으로 '클릭 URL | 포함 | 외부도메인'을 설정하면 특정 외부 도메인으로의 클릭만 추적할 수 있다. 자사 도메인이 'example.com'이라면 'Click URL | 포함하지 않음 | example.com'으로 모든 외부 링크 클릭을 추적하는 방법도 있다. 이때 특정 외부 도메인(예: 소셜 미디어 링크)은 제외하고 싶다면 예외 트리거를 추가해 필터링할 수 있다. 외부 링크 클릭 추적 시 주의할 점은 링크 클릭 직후 새 페이지로 이동하면 GTM 태그가 완전히 실행되기 전에 페이지가 전환될 수 있다는 것이다. 이를 방지하기 위해 태그 구성에서 '태그 실행 대기 시간'을 500ms 정도 설정하거나, GTM의 '탐색 허용' 옵션을 체크하면 태그가 완전히 실행된 후 링크를 따라가도록 할 수 있다. 단, 대기 시간을 너무 길게 설정하면 사용자가 클릭 후 반응이 없다고 느낄 수 있으므로 500ms~1,000ms가 적절하다.

팁 6: 트리거 예외 조건으로 불필요한 이벤트 필터링

특정 조건에서는 이벤트가 발생하지 않도록 예외 처리하는 것도 중요하다. 내부 직원의 방문 클릭을 데이터에서 제외하거나, 특정 페이지에서는 이벤트를 수집하지 않고 싶을 때 GTM의 예외 트리거 기능을 활용한다. GTM에서는 태그의 '예외' 섹션에 트리거를 추가하면 해당 트리거 조건이 충족될 때 태그가 실행되지 않는다. 예를 들어 특정 URL 패턴이 포함된 페이지에서는 이벤트를 수집하지 않으려면, 해당 URL을 조건으로 하는 예외 트리거를 태그에 추가한다. 관리자 전용 페이지('/admin')에서 이벤트가 집계되는 것을 막으려면 트리거 조건에 'Page URL | 포함하지 않음 | /admin'을 추가하면 된다. 내부 트래픽을 제외하는 방법은 두 가지다. 첫 번째는 GA4 자체의 내부 트래픽 필터를 사용하는 것이고, 두 번째는 GTM에서 쿠키나 사용자 에이전트를 이용해 내부 방문자를 식별하는 변수를 만들고 이를 예외 조건으로 설정하는 것이다. GA4 데이터 필터와 GTM 예외 트리거를 함께 사용하면 내부 트래픽에 의한 데이터 오염을 이중으로 방지할 수 있다. 특히 개발 중인 사이트나 스테이징 환경에서 발생하는 테스트 이벤트가 실제 데이터에 섞이지 않도록 환경별로 다른 GA4 속성을 사용하거나 GTM 환경 기능을 활용하는 것을 권장한다.

팁 7: 데이터 레이어 활용으로 정밀 추적 구현

GTM의 내장 변수만으로는 추적하기 어려운 정보(예: 동적으로 생성되는 상품 ID, 장바구니 금액, 로그인 사용자 정보)는 데이터 레이어(dataLayer)를 활용하면 해결된다. 데이터 레이어는 웹사이트의 비즈니스 로직 데이터를 GTM으로 전달하는 표준화된 인터페이스다. 데이터 레이어는 웹사이트의 JavaScript 코드에서 GTM으로 데이터를 전달하는 중간 저장소 역할을 한다. 개발자가 특정 이벤트 발생 시 dataLayer.push({event: 'purchase', transactionid: '12345', value: 59000})처럼 코드를 작성하면, GTM에서 이 데이터를 변수로 받아 태그에서 활용할 수 있다. 이 방식의 장점은 서버에서 직접 데이터를 전달하기 때문에 클라이언트 사이드 JavaScript 오류나 광고 차단기의 영향을 받지 않아 데이터 신뢰도가 높다는 것이다. 데이터 레이어를 GTM에서 변수로 받으려면 GTM 변수 새로 만들기 데이터 영역 변수를 선택하고, dataLayer에서 전달하는 키(key) 이름을 정확히 입력하면 된다. 예를 들어 dataLayer.push에서 transactionid를 전달한다면, 데이터 영역 변수 이름을 'transactionid'로 설정하면 GA4 이벤트 태그에서 이 변수를 파라미터로 사용할 수 있다. 마케터 혼자서 데이터 레이어를 추가하기 어렵지만, 개발자에게 어떤 데이터가 필요한지 명확한 명세서를 제공하고 협력하면 GTM으로 정교한 이커머스 이벤트 추적 시스템을 구축할 수 있다.

마무리

GTM 트리거 설정은 처음엔 복잡해 보이지만, 내장 변수 활성화와 미리보기 모드를 잘 활용하면 점점 익숙해진다. 버튼 클릭과 폼 제출이라는 기본 추적을 먼저 완성하고, 그 다음 스크롤, 외부 링크, 데이터 레이어 순으로 추적 범위를 넓혀가는 것이 좋다. 무엇보다 트리거를 설정한 후에는 반드시 미리보기 모드에서 실제 시나리오를 직접 실행해 이벤트가 예상대로 발동하는지 확인해야 한다. 정확한 추적 데이터가 쌓이면 마케팅 의사결정의 품질이 달라진다.

자주 묻는 질문

GTM 미리보기에서 클릭 이벤트가 보이지 않을 때 가장 먼저 확인할 것은?

내장 변수 중 클릭 관련 변수(Click ID, Click Classes, Click Text, Click URL 등)가 활성화되어 있는지 먼저 확인하세요. 그 다음 트리거 조건이 실제 버튼 속성과 일치하는지 미리보기 모드의 변수 탭에서 실제 값을 확인하세요. 트리거 조건 값에 대소문자 오류나 공백이 포함된 경우에도 이벤트가 발생하지 않습니다. 미리보기에서 버튼 클릭 시 나타나는 Click ID, Click Classes 실제 값을 복사해서 트리거 조건에 정확히 입력하는 것이 가장 안전한 방법입니다.

GTM에서 여러 개의 버튼을 한 트리거로 묶어서 추적할 수 있나요?

가능합니다. 트리거 조건에서 '정규식 일치'를 사용하면 여러 패턴을 하나의 조건으로 표현할 수 있습니다. 또는 조건을 OR 논리로 여러 개 추가하면 됩니다. 이 경우 GA4 이벤트 매개변수에 클릭 텍스트나 ID를 포함시켜 어느 버튼에서 발생했는지 구분할 수 있도록 해야 분석이 가능합니다.

폼 제출 트리거가 작동하지 않는 경우 대안이 있나요?

일부 폼(특히 iFrame 기반 폼이나 Ajax 제출 폼)은 GTM의 기본 양식 제출 트리거로 잡히지 않을 수 있습니다. 이 경우 폼 완료 후 표시되는 감사 페이지 URL을 트리거로 사용하거나, 개발자와 협력해 폼 제출 완료 시 dataLayer.push를 추가하는 방법을 사용하세요. 감사 페이지 URL 방식이 실제 완료된 제출만 추적하기 때문에 전환 데이터 정확도 면에서도 더 낫습니다.

GTM으로 전화 클릭(tel: 링크) 추적을 할 수 있나요?

가능합니다. 트리거 유형 '클릭 링크만'을 선택하고 조건으로 '클릭 URL | 시작 | tel:'을 설정하면 모바일에서 전화번호 링크를 클릭할 때 이벤트가 발생합니다. 이 이벤트를 GA4로 전달하면 전화 문의 클릭 수를 측정하고 어떤 채널·페이지에서 전화 문의가 많이 발생하는지 분석할 수 있습니다.

GTM 트리거를 너무 많이 만들면 성능에 영향이 있나요?

트리거 자체의 성능 영향은 미미합니다. 그러나 트리거로 인해 실행되는 태그(특히 외부 스크립트를 로드하는 태그)가 많아지면 페이지 로딩 속도가 느려질 수 있습니다. 불필요한 태그는 비활성화하거나 삭제하고, 스크립트가 무거운 태그는 조건부 트리거를 사용해 필요한 페이지에서만 실행되도록 설정하세요. 태그 수보다 각 태그가 실행되는 빈도와 무게가 성능에 더 큰 영향을 줍니다.

다음 단계

상단의 관련 크레피카 도구를 활용해 초안을 점검한 뒤, 이 가이드로 돌아와 최종 발행 전 구조와 표현을 다시 확인하세요.

사이트 검토 정보

크레피카는 크리에이터와 마케터를 위한 무료 유틸리티 사이트입니다. 실무 도구, 편집 가이드, 문의 정보, 개인정보처리방침, 이용약관, RSS, robots.txt, ads.txt, 사이트맵을 제공해 사용자와 검색엔진이 자바스크립트 렌더링에만 의존하지 않고 사이트 구조를 이해할 수 있게 합니다.

광고는 Google AdSense 자동 광고로 노출될 수 있습니다. 이 정적 크롤러 페이지에는 수동 광고 슬롯을 삽입하지 않으며, 광고는 도구 결과나 편집 추천 내용에 영향을 주지 않습니다.

정책 페이지: 개인정보처리방침, 이용약관, 크레피카 소개, 문의하기.