개발자를 위한 구글태그매니저

개발자 입장에서 구글 태그매니저(GTM)를 어떻게 쓰는지 정리한 글이다. 트리거·태그·변수라는 세 개념을 웹사이트 → GTM 구간과 GTM → 광고 플랫폼 구간으로 나눠 설명하고, `dataLayer` 로 커스텀 이벤트를 올리는 코드까지 다룬다.

핵심 포인트

태그는 HTML·JavaScript 코드 조각이고, GTM 을 쓰면 그것을 사이트에 직접 심지 않아도 필요한 시점에 로드·실행되게 할 수 있다.
GTM 은 웹사이트에서 발생한 이벤트를 각 광고 플랫폼 서버로 포워딩하는 게이트웨이 역할을 한다.
트리거는 웹사이트 → GTM 구간, 태그는 GTM → 광고 플랫폼 구간의 책임을 맡는다.
페이지뷰나 버튼 클릭처럼 표준적인 이벤트는 코드를 심지 않고 GTM 설정만으로 트리거를 만들 수 있다.
더 세밀한 트래킹은 `dataLayer` 에 이벤트명과 데이터를 push 하는 코드가 필요하며, 이때 event 명은 유니크해야 GTM 이 고유 이벤트로 인식한다.

상세 정리

왜 필요한가: 이커머스는 랜딩페이지 뷰 → 콜투액션 → 장바구니 담기 → 구매로 이어지는데, 각 단계 이탈률을 정확히 아는 것이 마케팅 의사결정의 근거가 된다.
광고 효율 판단: 페이스북·네이버·카카오·구글 등 플랫폼별, 캠페인별 효율을 알아야 어디에 광고비를 더 쓸지 정할 수 있다.
개발자의 역할은 마케터와 협력해 사용자 행동 패턴이 제대로 트래킹되도록 돕는 것이라고 위치를 잡는다.
GTM 을 쓰는 이득 ①: 마케터가 코드를 보지 않고 더 쉬운 인터페이스에서 트래킹을 조정할 수 있다.
GTM 을 쓰는 이득 ②: 각 광고 플랫폼으로 데이터를 보내는 코드를 사이트 곳곳에 심지 않아도 되므로 프론트엔드 코드가 깔끔해진다.
트리거 정의는 두 단계다. 웹사이트에 코드를 심고, GTM 에서 트리거를 설정한다. 다만 간단한 경우 첫 단계를 생략할 수 있다.
생략 가능한 예: 특정 페이지 이동은 고유한 URL path 로, 버튼 클릭은 버튼의 고유 텍스트(예: 회원가입)로 잡을 수 있다.
코드가 필요한 예: 로그인 시 호출되는 함수 안에서 `dataLayer` 에 `login` 이벤트와 로그인 방법(카카오·구글·이메일) 데이터를 함께 push 한다.
GTM 쪽 설정: 트리거 유형을 '맞춤 이벤트' 로 두고 이벤트 이름을 `login` 으로 맞추면 dataLayer 의 event 값과 연결된다.
`dataLayer` 는 GTM 에 보내고 싶은 데이터를 정의하기 위한 프로퍼티라고 정리한다.
태그의 정의: 특정 트리거가 실행되는 시점에 실행되기를 원하는 코드 뭉치다.
태그 예시로 페이스북 광고 플랫폼에 구매 데이터를 보내는 코드를 든다. 구매 사실과 함께 어떤 제품을 얼마에 샀는지까지 전송한다.
태그 코드 안의 `{{ }}` 표기는 변수 개념으로 이어진다.
전제 조건도 밝힌다. 이 글의 방식대로 하려면 GTM 을 웹사이트에 붙여 주는 클라이언트 패키지를 설치하고 해당 문서를 읽어야 한다.
구글 애널리틱스의 향상된 전자상거래 기능을 구현하려면 관련 공식 문서를 함께 볼 것을 권한다.