GA4 기본 이벤트로는 의사결정이 안 된다
GA4가 자동으로 잡는 이벤트는 페이지뷰, 외부 링크 클릭, 스크롤 90%, 동영상 일부 정도입니다. 이 데이터로는 "방문자가 왜 안 사는지"를 알 수 없습니다.
전환을 일으키려면 다음 수준의 추적이 필요합니다.
- 어떤 문단을 가장 오래 읽었는가
- 어디서 스크롤이 멈췄는가
- CTA 버튼을 봤지만 누르지 않은 사람은 몇 명인가
- 폼의 어느 입력란에서 이탈했는가
- 같은 페이지에 N회 이상 재방문한 사용자는 누구인가
이 추적이 빌더에서는 막히고, 풀스택에서는 자유롭게 가능합니다.
빌더가 막아두는 영역
아임웹·카페24는 GA4 코드 자체는 설치할 수 있습니다. 다만 다음이 제한됩니다.
- dataLayer 직접 조작 불가: 페이지에 추가 스크립트를 자유롭게 삽입할 수 없음
- DOM 이벤트 후킹 제한: 특정 요소의 클릭·호버·드래그 같은 정밀 이벤트 추적이 어려움
- 사용자 속성 동적 부여 불가: 회원 등급·구매 횟수 같은 속성을 GA에 실시간 전송 불가
- GTM 컨테이너 권한 제한: 일부 빌더는 GTM(Google Tag Manager) 설치 자체를 막거나 부분만 허용
결과적으로 "방문자가 들어왔다" 수준의 데이터만 쌓입니다.
풀스택에서 가능한 추적 사례
Next.js 같은 풀스택 환경에서는 페이지 코드에 직접 이벤트를 심을 수 있습니다. 실제로 자주 적용하는 추적 예시는 다음과 같습니다.
- 읽기 진척률: 글의 25%, 50%, 75%, 100% 도달 시점 기록
- 체류 구간: 어느 문단에서 5초 이상 멈췄는지 기록
- CTA 노출 vs 클릭: 버튼이 화면에 보였는지(impression), 눌렸는지(click) 분리 추적
- 폼 입력 단계별 이탈: 이름·이메일·전화번호 중 어느 단계에서 멈췄는지
- 재방문 패턴: 같은 사용자가 며칠 만에 다시 들어왔는지, 어떤 페이지를 거쳤는지
이 데이터가 쌓이면 광고 예산을 어디에 더 쓸지, 어떤 페이지를 손볼지가 숫자로 보입니다.
추적 가능 범위 비교
| 추적 항목 | 빌더(아임웹·카페24) | 풀스택(Next.js) |
|---|---|---|
| 페이지뷰 | 가능 | 가능 |
| 외부 링크 클릭 | 가능 | 가능 |
| 스크롤 깊이(단계별) | 어려움 | 표준 적용 |
| 요소 노출 추적 | 불가 | 가능 |
| 폼 단계별 이탈 | 불가 | 가능 |
| 사용자 속성 부여 | 제한적 | 무제한 |
| 서버 사이드 이벤트 | 불가 | 가능 |
데이터가 마케팅 비용을 결정한다
방문자 1000명 중 어디서 800명이 이탈하는지 모르면 광고비를 늘려도 효율이 안 나옵니다. 같은 1000명 중 700명이 "가격 섹션에서 평균 2초 머물고 이탈"한다는 데이터가 있으면, 가격 섹션을 손보는 것이 광고 추가보다 30배 효율적입니다.
치로웹디자인은 사이트 제작 시 GA4 + GTM + 서버 사이드 이벤트 구조를 기본 적용합니다. 풀스택 기반이기 때문에 처음부터 마케팅 데이터 수집을 코드 단계에서 설계합니다. 치로의 홈페이지 제작 서비스에서 작업 기준을 확인할 수 있습니다. 리타겟팅 구조는 리타겟팅에는 웹사이트 픽셀이 필요하다에서 더 다룹니다.
자주 묻는 질문
아임웹에 GTM을 설치하면 커스텀 이벤트가 가능하지 않나요? 일부 가능합니다. 다만 DOM 이벤트 후킹, 동적으로 변하는 요소 추적, 사용자 속성 부여는 빌더의 페이지 구조 제약으로 정확도가 떨어지는 경우가 많습니다.
커스텀 이벤트를 너무 많이 심으면 사이트가 느려지지 않나요? 이벤트 자체는 가볍습니다. 다만 잘못 설계하면 페이지 INP에 영향을 줍니다. 풀스택 환경에서는 비동기로 이벤트를 처리해 속도 영향을 0에 가깝게 만들 수 있습니다.
서버 사이드 이벤트가 왜 중요한가요? 브라우저 광고 차단기와 iOS 사파리의 추적 차단 정책으로 클라이언트 이벤트 누락률이 평균 30% 이상입니다. 서버 사이드 이벤트는 이 차단을 우회해 정확한 데이터를 GA·광고 플랫폼에 전송합니다. 빌더에서는 구현이 어렵습니다.