gtag.js는 HTML의 head 태그 안에 스크립트 태그로 삽입하고, gtag('config', 'G-XXXXXXXX')로 GA4 속성을 초기화하며, gtag('event', 'purchase', {...})로 이벤트를 전송한다. GTM 없이 개발자가 직접 코드를 작성해 데이터를 수집하는 방식이다.
GTM과의 차이: gtag.js는 코드 변경마다 개발자 배포가 필요하다. GTM은 gtag.js를 내부에서 사용하지만 인터페이스 조작으로 태그를 관리해 개발자 배포 없이 마케터가 직접 변경할 수 있다. 이벤트 수가 적고 정적 사이트라면 gtag.js로 충분하지만, 동적 이벤트가 많으면 GTM이 유리하다.
GA4 화면 경로: GA4 관리 → 속성 → 데이터 스트림 → 웹 스트림 세부정보 → '태그 안내 보기'에서 gtag.js 스니펫 코드를 확인한다. 측정 ID(G-XXXXXXXX)는 이 화면에서 복사한다.
핵심 정리
- HTML head에 직접 삽입해 구글 도구에 데이터를 전송하는 공식 JavaScript 라이브러리이다.
- gtag('config'), gtag('event'), gtag('set') 세 가지 주요 명령어로 구성된다.
- 단일 스니펫으로 GA4와 Google Ads 전환을 동시에 초기화할 수 있다.
- GTM 없이 사용 가능하지만, 이벤트 변경마다 개발자 배포가 필요하다.
- SPA에서는 라우터 변경 시 수동으로 gtag('config', ..., {page_path: ...})를 호출해야 페이지뷰가 올바르게 기록된다.