GTM 의 기본 트리거는 화면에서 일어나는 클릭·페이지뷰·스크롤을 잡습니다. 화면에 없는 값(상품 가격, 주문 번호)과 화면 이동이 없는 시점(팝업으로 끝나는 완료)은 데이터레이어로 넘겨야 잡힙니다. 이 글은 그 두 경우와 적용 순서 네 단계를 답합니다.
화면은 2025년 4월 기준입니다. 코드 형식은 바뀌지 않았지만 GTM 메뉴 이름은 달라질 수 있습니다.
데이터레이어란 무엇인가
출처: 구글 태그 플랫폼 가이드 — 데이터 영역 데이터레이어란, 웹사이트와 구글태그매니저(GTM) 간의 데이터를 송수신하기 위한 매개체 입니다.
이벤트 또는 변수는 데이터레이어를 통해 전달할 수 있고, 트리거는 변수 값을 기반으로 설정할 수 있습니다.
조금 더 상세히 말하자면, GTM과 데이터레이어를 통해 유입되는 데이터는 아래와 같습니다.
1.웹사이트에 유입된 사용자가 특정 행동 발생
2.데이터레이어에 Data Push 발동
3.Push된 데이터(매개변수)를 GTM 내 트리거로 설정
4.GTM 이벤트를 GA4으로 전달
데이터레이어가 필요한 두 가지 경우
그렇다면, 데이터레이어는 어떤 경우에 필요할까요?
데이터레이어를 사용하는 주된 이유는 아래와 같습니다.
1.GTM으로 정확한 전환 이벤트 설정 불가 시 대체하여 이벤트 발동 구글태그매니저(GTM)을 통해 이벤트 설정 시, 간혹 정확한 전환 이벤트 설정이 불가한 경우 가 있습니다.
예를 들어, '구매완료' 페이지 도착 시 전환 이벤트를 설정 한다고 하면, '완료 페이지 도착' 하는 행동을 기준으로 전환 이벤트 설정을 할텐데요.
'완료 페이지'가 존재하지 않고 간략한 '팝업창'으로만 '이벤트 완료'임을 나타낼 시, 전환 설정을 잡는 것은 꽤나 어렵습니다.
이런 경우, 해당 '완료 팝업창이 뜨는 동시에 이벤트가 발동하도록' 데이터레이어 설정을 하는 것이죠.
2. 이벤트 전송 시 동적인 이벤트 매개변수를 추가 단순 구매전환 이벤트만을 GA4로 전송하기보다 특정 제품에 대한 가격, 카테고리 등의 상세 정보를 보낸다면 데이터 분석 에 더욱 유용할 것인데요.
이를 위해서도 데이터레이어를 활용합니다.
적용 순서: push 코드 → 삽입 → GTM 트리거 → GA4 전송
그렇다면 데이터레이어를 실제로 어떻게 적용할 수 있을까요?
1. 데이터레이어 코드 만들기
데이터레이어 코드는 아래의 형태로 구성되는데요, 'Push' 명령어를 사용하여 데이터를 추가할 수 있습니다.
dataLayer.push({key:value})
*Ex. dataLayer.push({'event': 'Match_fromAToB'}); 데이터레이어에 들어가는
({key:value})
이 부분에 해당하는 이벤트를 GTM(구글 태그매니저)에서 감지하여 이벤트를 발동시키고 GA4로 전송 합니다.
추가적인 예시로, 사용자가 특정 제품의 상세페이지로 유입되었을 때, view_item 이벤트를 보내야 할 때, 데이터레이어로 전송하면 상품ID, 이름, 카테고리, 가격 등의 정보를 함께 포함시킬 수 있습니다.
*Ex. dataLayer.push({'event': 'view_item', 'item_id':'123456', 'item_name':'maskpack', 'category':skincare', 'price':'29000'
}); [참고] 이벤트=노란색 | 매개변수=오렌지색
2. 데이터레이어 삽입하기
데이터레이어 코드를 만들었다면, 해당 상품이 조회되는 시점에 작동하는 자바스크립트 코드 내에 삽입합니다.
3. GTM으로 데이터레이어 이벤트 집계하기
자바스크립트 내 해당 데이터레이어 코드를 삽입했다면 아래와 같이 GTM 트리거 구성에서 'event' 이름을 넣습니다.
*Ex. dataLayer.push({'event': 'Match_fromAToB'}); 에서 event명에 해당하는 'Match_fromAToB' 기입
4. GA4로 데이터레이어 이벤트 전송하기
이제 GTM에서 트리거로 설정한 이벤트를 GA4으로 이벤트 발송할 수 있도록 태깅 작업을 해줍니다.
내가 설정한 데이터를 보낼 GA4 측정 ID를 입력해주고, 위에서 작업했었던 '트리거'를 끌어와주면 되겠지요!
이렇게 설정이 완료되면 전환이벤트로 설정할 수 없었던
(=비교적 허수가 많았던)
이벤트를 가장 정확한 수치로 집계 할 수 있는 데이터레이어 코드 삽입 및 GTM 으로 데이터를 받고, 이를 GA4으로 데이터 전송까지 할 수 있는 작업이 끝납니다!😊
요약
1. 데이터레이어는 웹사이트와 GTM 간의 데이터를 송수신하기 위한 매개체!
2. GTM으로 정확한 전환 이벤트 설정이 불가능 할 때 대체하여 이벤트를 발동하고자 할 때 사용 가능!
3. 단순히 주요 이벤트만을 전송하기보다 상세한 정보를 전송할 수 있도록 매개변수 추가 가능!
4. 데이터 레이어 적용 방법은 위에서 다시 확인!
자주 묻는 질문
데이터레이어 없이 GTM 만으로 이벤트를 잡을 수 없나요?
클릭·페이지뷰·스크롤처럼 화면에서 일어나는 행동은 GTM 기본 트리거로 잡습니다. 완료 페이지가 없고 팝업으로만 끝나는 전환, 상품 가격·카테고리처럼 화면에 없는 값은 데이터레이어로 넘겨야 정확합니다.
dataLayer.push 는 어디에 넣나요?
그 행동이 일어나는 시점의 자바스크립트 안에 넣습니다. 상품 상세 조회면 상품 정보가 화면에 그려진 뒤, 구매 완료면 완료 처리가 끝난 뒤입니다. GTM 컨테이너 스니펫보다 먼저 실행돼도 배열에 쌓여 있다가 처리되므로 순서 때문에 잃지는 않습니다.
이벤트 이름은 아무렇게나 지어도 되나요?
GTM 트리거에 같은 이름을 넣기만 하면 동작합니다. 다만 GA4 로 보낼 때 purchase, view_item 같은 GA4 추천 이벤트 이름을 쓰면 전자상거래 보고서에 자동으로 잡히므로, 해당하는 행동은 추천 이름을 씁니다.
판단 기준은 이렇습니다. 화면에 보이는 행동은 GTM 트리거로, 화면에 없는 값과 시점은 데이터레이어로.
관련 글: GTM 변수 3가지 — 참고표·자동 이벤트·페이지 타이틀, 참고표 변수로 제품 이미지 클릭에 제품명 붙이기
데이터레이어 설계는 사이트 개발과 측정 사이에 있어서 어느 한쪽만으로는 끝나지 않습니다. 트래킹 & 애널리틱스에서 저희가 GA4·GTM 설계를 어떤 순서로 하는지 적어 두었습니다.
출처
이 글은 네이버 블로그에도 실려 있습니다.