데이터 레이어 없이는 '구매 완료 페이지에서 결제 금액을 GA4에 전달하기'가 쉽지 않다. 개발자가 매번 GA4 코드를 직접 수정해야 한다. 데이터 레이어를 쓰면 개발자는 페이지 이벤트 발생 시 정해진 형식으로 dataLayer.push()만 호출하고, GTM은 그 데이터를 받아 GA4·Google Ads에 전달한다.
구조는 window.dataLayer 배열에 객체를 push하는 방식이다. 예: dataLayer.push({'event':'purchase','value':150000,'item_name':'시술명'}). GTM의 데이터 레이어 변수가 이 값을 읽어 태그 매개변수로 사용한다.
위볼린은 병원 사이트에서 전화 클릭(tel: 앵커), 예약 폼 제출, 카카오톡 채널 클릭에 데이터 레이어를 표준 설계한다. 특히 SPA(React/Next.js) 환경에서는 페이지 이동 시 데이터 레이어가 초기화되지 않도록 히스토리 API 연동 설계가 필요하다.
핵심 정리
- 페이지 이벤트 데이터를 GTM과 GA4가 읽을 수 있는 표준 형식으로 구조화한다.
- 개발자와 마케터 역할을 분리한다: 개발자는 데이터 레이어 push, 마케터는 GTM 태그 설정.
- 이커머스 이벤트(view_item·add_to_cart·purchase)를 표준 GA4 스키마로 전달한다.
- SPA(React/Next.js/Vue)에서 페이지 이동 이벤트를 데이터 레이어로 수동 트리거한다.
- GTM 데이터 레이어 변수로 push된 값을 태그 매개변수에 자동 연결한다.