GTM 없이 gtag.js만으로 GA4 맞춤 이벤트 설정하는 법
뉴스레터 구독 버튼을 달아놓은 지 한 달이 지났는데, 그 버튼을 몇 명이나 눌렀는지 알 방법이 없다. GA4를 열어봐도 페이지뷰와 세션 수만 보일 뿐, "구독 버튼 클릭"이라는 행동은 어디서도 잡히지 않는다.
GTM을 쓰면 태그 설정 화면에서 비교적 쉽게 해결된다는 글은 많다. 근데 블로그에 gtag.js 스니펫을 직접 붙여넣은 상태라면, GTM 없이 어떻게 처리해야 하는지 한국어로 제대로 설명해주는 자료가 생각보다 드물더라고요.
이 글은 그 상황을 처음부터 끝까지 따라가는 워크스루다. "뉴스레터 구독 버튼 클릭 수를 모르는 상태"에서 시작해, gtag.js 이벤트 코드 삽입 → DebugView 실시간 확인 → 탐색 보고서에서 수치 읽기까지 한 흐름으로 정리한다.
GA4 맞춤 이벤트의 원리와 기본 문법
GA4는 페이지뷰, 스크롤, 외부 링크 클릭 같은 건 알아서 수집한다. 그런데 "구독 버튼을 눌렀다"처럼 특정 행동을 추적하려면 맞춤 이벤트(custom event)를 직접 정의해야 한다. 이름도 우리가 짓고, 어떤 데이터를 함께 보낼지도 우리가 정한다.
gtag.js로 이벤트를 보내는 기본 문법은 이렇다.
gtag('event', '이벤트_이름', {
'파라미터_이름': '파라미터_값'
});구독 버튼을 눌렀을 때 subscribe_click이라는 이벤트를 보내면서, 어느 위치의 버튼인지 button_location 파라미터에 담고 싶다면 이렇게 된다.
gtag('event', 'subscribe_click', {
'button_location': 'sidebar'
});이 코드가 실행되는 순간 GA4 속성으로 이벤트가 전송된다. 전제는 하나다. gtag.js가 이미 페이지 <head>에 들어가 있어야 한다. GA4가 연결된 상태라면 추가 설치 없이 이 코드만 넣으면 된다.
버튼에 코드를 붙이는 흐름, 그리고 흔히 걸리는 함정
가장 빠른 방법은 onclick 속성에 직접 넣는 방식이다. 테스트할 때 빠르게 확인하기 좋다.
<button onclick="gtag('event', 'subscribe_click', {'button_location': 'sidebar'})">
뉴스레터 구독하기
</button>버튼이 여러 개거나 코드를 JS 파일에서 관리하고 있다면 addEventListener 방식이 낫다.
document.getElementById('subscribe-btn').addEventListener('click', function() {
gtag('event', 'subscribe_click', {
'button_location': 'sidebar'
});
});여기서 실제로 자주 걸리는 함정이 있다. addEventListener 코드를 페이지 <head> 안에 인라인으로 바로 넣으면, DOM이 준비되기 전에 실행돼서 getElementById가 null을 반환한다. 버튼은 있는데 이벤트가 아예 안 잡히는 상황이 된다. 이 경우는 코드를 DOMContentLoaded 이벤트로 감싸면 해결된다.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('subscribe-btn').addEventListener('click', function() {
gtag('event', 'subscribe_click', {
'button_location': 'sidebar'
});
});
});또는 <body> 닫는 태그 바로 앞에 스크립트를 두는 방식도 같은 효과다. 이벤트가 안 잡힌다면 코드보다 먼저 실행 순서를 의심해볼 만하다.
이벤트 이름과 파라미터 이름은 알파벳 소문자와 언더스코어 조합이 GA4 권장 형식이다. 대문자 혼용이나 공백은 피하는 게 좋다. 파라미터는 여러 개 넣을 수 있다. 버튼 위치 외에 어떤 페이지에서 눌렸는지, 버튼 텍스트가 뭔지 같은 정보를 함께 보내면 나중에 분석이 훨씬 풍부해진다.
DebugView로 이벤트가 제대로 들어오는지 확인하기
코드를 넣었다고 바로 표준 보고서에 데이터가 뜨진 않는다. 먼저 이벤트가 실제로 전송되는지 확인하는 게 순서다. GA4에는 이 용도로 DebugView라는 실시간 디버그 화면이 있다.
DebugView를 쓰려면 디버그 모드를 켜야 한다. gtag.js 방식에서는 config 호출에 debug_mode: true를 추가하면 된다.
gtag('config', 'G-XXXXXXXXXX', {
'debug_mode': true
});G-XXXXXXXXXX 자리에 내 GA4 측정 ID를 넣는다. 이 설정이 켜진 상태에서 버튼을 누르면 해당 기기에서 발생한 이벤트가 DebugView 전용 스트림으로 전달된다.
GA4 왼쪽 하단 관리(Admin) 아이콘을 클릭한 뒤, 데이터 표시 섹션에서 DebugView를 선택하면 화면이 열린다. 디버그 모드가 켜진 기기에서 버튼을 누르는 순간 subscribe_click이 타임라인에 실시간으로 나타난다. 이벤트를 클릭하면 함께 전송된 파라미터 값도 바로 확인할 수 있다.
코드 수정 없이 확인하고 싶다면 Chrome 확장 프로그램 'Google Analytics Debugger'를 설치하는 방법도 있다. 확장 프로그램을 켠 상태로 사이트를 열면 별도 코드 변경 없이 DebugView에서 이벤트를 볼 수 있다.
반드시 챙겨야 할 부분이 있다. debug_mode: true는 테스트용이다. 이 상태로 배포하면 실제 방문자 데이터가 DebugView 쪽으로 분류되면서 표준 보고서에서 빠질 수 있다. 확인이 끝나면 debug_mode 파라미터 줄 자체를 삭제해야 한다. false로 값만 바꿔도 디버그 모드는 꺼지지 않는다. 코드 리뷰 때 한 번 더 체크하는 게 좋다.
탐색 보고서에서 클릭 수 읽으려면 맞춤 측정기준 등록이 먼저다
DebugView에서 이벤트가 들어오는 걸 확인했다면 이제 실제 수치를 정기적으로 보는 단계다. 그런데 한 단계가 더 있다. GA4는 이벤트와 함께 보낸 파라미터를 기본 보고서에서 바로 쓸 수 없고, 파라미터를 맞춤 측정기준으로 먼저 등록해야 한다.
- GA4 왼쪽 하단 관리 아이콘을 클릭한다
- 데이터 표시 섹션에서 맞춤 정의를 선택한다
- 맞춤 측정기준 탭에서 맞춤 측정기준 만들기 버튼을 누른다
- 측정기준 이름(보고서에 표시될 이름)을 입력한다
- 범위는 '이벤트'로 설정한다
- 이벤트 파라미터 항목에 코드에서 쓴 파라미터 이름을 정확히 입력한다 — 위 예시에서는
button_location - 저장을 누르면 등록 완료
등록했다고 바로 보고서에서 쓸 수 있는 건 아니다. GA4 공식 문서에 따르면 맞춤 측정기준이 보고서에 반영되기까지 최대 24~48시간이 걸린다. 코드 설치 직후 보고서가 비어 보여도 정상이니까 며칠은 기다려봐야 한다.
맞춤 측정기준이 활성화되면 탐색 보고서에서 이 값을 쓸 수 있다. GA4 왼쪽 메뉴에서 탐색을 선택하고 빈 보고서를 새로 만든다. 측정기준 영역 + 버튼으로 button_location을 추가하고, 측정항목에는 이벤트 수를 넣는다. 행 영역에 측정기준을 드래그해 넣으면 버튼 위치별 클릭 수가 정리되어 나온다. 구독 버튼 이벤트만 보고 싶다면 세그먼트나 필터에서 이벤트 이름 = subscribe_click 조건을 추가하면 된다.
수치가 모이면 다음 결정이 달라진다
이 과정을 마치면 구독 버튼을 누른 사람이 하루에 몇 명인지, 어느 위치의 버튼이 더 많이 눌리는지를 직접 확인할 수 있다.
파라미터를 하나 더 추가하면 분석이 한 단계 깊어진다. 버튼이 있는 페이지 URL이나 글 제목을 page_title 파라미터로 함께 보내면, 어떤 콘텐츠를 읽은 사람이 구독 버튼을 더 많이 누르는지 비교할 수 있다. 클릭률이 높은 글과 낮은 글을 나란히 놓으면, 버튼 위치를 바꿔야 하는지 아니면 글의 마무리 방식을 고쳐야 하는지 판단 근거가 생긴다.
이벤트를 전환으로 표시해두면 GA4 표준 보고서 전환 섹션에서도 수치가 잡힌다. 글별 구독 전환율을 보고 싶다면 탐색 보고서에서 페이지 측정기준과 이벤트 수를 함께 넣으면 된다.
GTM이 있으면 코드를 건드리지 않고 태그 설정만으로 이벤트를 추가할 수 있다. 그게 편하긴 하다. 그래도 gtag.js만 있어도 이 정도 추적은 충분히 가능하고, 원리를 이해하고 나면 어떤 버튼이든 같은 방식으로 바로 적용할 수 있다. 막상 해보면 생각보다 단순하다는 걸 알게 되거든요.
이 글이 도움이 됐나요?
여러분의 반응이 다음 글의 방향이 돼요
