웹사이트에서 특정 버튼이 몇 번 클릭됐는지 보고 싶어서, 구글 태그 관리자(GTM)로 맞춤 이벤트 설정을 해봤다.
GTM을 처음 쓰는 입장에서도 따라가기 어렵지 않게 정리해둔다.
내가 엄청 헤맸거든..
✅ 설정 흐름 요약
GTM에서 맞춤 이벤트를 만들기 위해선 보통 3가지 단계를 거친다.
1. 변수 : 어떤 버튼이 눌렸는지 알아봄
2. 트리거 : 버튼이 '언제' 눌럿는지 알려주는 스위치 역할
3. 태그 : 스위치가 켜지면 구글 애널리틱스에 '버튼이 눌려짐!' 이라고 신호를 보내주는 역할
1. 변수 설정 – 클릭 정보를 추적할 수 있도록
- GTM 왼쪽 메뉴에서 [변수] 클릭
- [기본 제공 변수] 영역의 [구성] 클릭
- Click 관련 변수들(예: Click Element, Click Classes, Click Text 등) 체크해준다
→ 클릭 관련 정보를 GTM이 읽을 수 있도록 활성화하는 단계.
2. 트리거 설정 – 클릭 시점 감지
내가 추적하고 싶은 버튼은 아래처럼 생겼다:
<button class="flex items-center justify-center w-12 h-12 aspect-square border-2 rounded-full cursor-pointer duration-300 text-red-70 border-red-70">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="0">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></button>
내가 보고 싶은 버튼의 태그는 특별한 ID, Class가 없어서 css selector 로 찾았다.
button:has(svg > path[d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l
-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5
5.5 0 0 0 0-7.78z"]), button:has(svg > path[d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12
5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78
1.06-1.06a5.5 5.5 0 0 0 0-7.78z"]) *
참고:
path 값은 크롬 개발자 도구(F12) → 해당 버튼 요소 우클릭 → Copy → Copy element로 가져올 수 있다.
GTM 트리거에서 클릭 트리거 > 일부 요소 클릭 시 → 위 selector 조건 넣으면 된다.
3. 태그 만들기 – 클릭 이벤트를 GA로 보내기
트리거까지 설정했으면, 이제 태그를 만든다.
- 새 태그 생성
- 태그 유형: GA4 이벤트
- 이벤트 이름은 예를 들어 scrap_click 같이 정하면 됨
- 구성된 트리거 연결
- 저장
4. 연결 확인 – Tag Assistant 미리보기
- GTM에서 미리보기(Preview) 클릭
- 본인의 웹사이트 주소 입력 후 접속
- 버튼을 클릭했을 때 이벤트가 제대로 잡히는지 확인
❗ 문제 상황 – GTM이 감지되지 않음
처음엔 아무리 클릭해도 태그가 감지되지 않았다.
Tag Assistant에선 "GTM not found" 에러가 떴음.
원인
개발자에게 물어보니, 사이트에 아래와 같이 GA만 연결돼 있었다:
<GoogleAnalytics
gaId="G-...." />
✅ 해결 – GTM 태그 삽입 (Next.js 환경)
GTM을 사용하려면, 아래처럼 <GoogleTagManager /> 컴포넌트를 추가해야 한다.
Next.js 프로젝트에서는 보통 _app.tsx나 layout에 이렇게 넣으면 됨:
<html lang="ko">
<body>{children}</body>
<GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID!} />
</html>
✅ GoogleTagManager 태그로 쓰기
→ 배포 후 다시 확인해보니, 이제 Tag Assistant에서 GTM도 잘 인식되고, 클릭 이벤트도 잘 잡혔다.
마무리
- 클릭할 수 있는 고유 ID가 없는 버튼도 CSS Selector로 추적 가능
- GTM과 GA를 동시에 쓰려면, GTM 스크립트 삽입 여부 꼭 확인할 것
- Next.js는 <head>나 <body>에 직접 넣기보다, 전용 컴포넌트를 활용하는 게 유지보수에 좋음
잘 뜨는거 확인!
아래는 구글애널리틱스 책 추천!
모두의 구글 애널리틱스4:GA4로 하는 디지털 마케팅 데이터 분석 - 웹기획 | 쿠팡
쿠팡에서 모두의 구글 애널리틱스4:GA4로 하는 디지털 마케팅 데이터 분석 구매하고 더 많은 혜택을 받으세요! 지금 할인중인 다른 웹기획 제품도 바로 쿠팡에서 확인할 수 있습니다.
www.coupang.com
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
'데이터분석 > Google Analytics4' 카테고리의 다른 글
| 구글 애널리틱스 퍼널분석 초보자용 실제 웹사이트에 적용방법 (3) | 2025.07.30 |
|---|
