[GA4>M 활용] GTM 데이터레이어(dataLayer)란? 개념부터 변수로 값 받아오는 방법까지 (튜토리얼 1편)
핵심 요약
데이터레이어(dataLayer)는 웹사이트에서 GTM 컨테이너로 정보를 전달하는 자바스크립트 객체입니다. 웹사이트가 dataLayer.push()로 값을 넣으면, GTM은 '데이터 영역 변수' 로 그 값을 받아 태그의 매개변수를 채우거나 트리거를 실행합니다. 단, dataLayer 선언은 반드시 GTM 컨테이너 코드보다 위(먼저) 에 있어야 합니다.
이 글에서 알 수 있는 것
- 데이터레이어가 정확히 무엇이고 왜 GTM의 핵심인가
- dataLayer 코드가 GTM 컨테이너보다 위에 있어야 하는 이유
- 작성자(pagePostAuthor) 예시로 보는 dataLayer.push() 실제 코드
- GTM이 dataLayer 값을 인식하려면 '데이터 영역 변수'가 필요한 이유
- 미리보기 모드로 값이 수집됐는지 확인하는 방법
✳️ 난이도 : 중급 | 소요 시간 : 약 10분 | 참고 : dataLayer는 개발 지식이 필요한 부분이 많아, 가능하면 개발자와 함께 보는 것을 권장합니다.
데이터레이어(dataLayer)란 무엇인가요?
데이터레이어(dataLayer)는 웹사이트에서 구글태그관리자(GTM) 컨테이너로 정보를 전달하는 데 사용되는 자바스크립트 객체입니다. GTM은 이 정보를 사용해 태그 구성에서 변수를 채우고 트리거를 활성화합니다.
데이터레이어는 GTM의 핵심 개념 중 하나입니다. 그 중요성은 다음과 같이 정리할 수 있습니다.
| dataLayer의 역할 | 설명 |
| 정보 전달 통로 | 웹사이트 → GTM 컨테이너로 데이터를 넘김 |
| 변수·트리거의 재료 | dataLayer가 없으면 변수·트리거가 없고 태그도 실행되지 않음 |
| 확장성 확보 | 태그 관리를 안정적으로 유지하고 GTM을 확장성 있게 만듦 |
✅ 핵심 : GTM은 dataLayer와 함께 배포될 때 가장 잘 작동합니다. dataLayer는 GTM이 제대로 돌아가게 하는 토대입니다.
dataLayer는 왜 GTM 컨테이너보다 위에 있어야 하나요?
Data Layer는 GTM 컨테이너 코드가 로드되기 전에 시작되어야 합니다. 즉, dataLayer.push(선언)가 웹사이트 <head> 영역의 GTM 컨테이너 코드 스니펫보다 위에 있어야 합니다.
이유는 간단합니다. GTM 컨테이너가 로드되는 순간 dataLayer의 값을 읽어들이기 때문에, 컨테이너보다 먼저 값이 준비되어 있어야 GTM이 그 값을 인식할 수 있습니다.
⚠️ 순서 규칙 : dataLayer 선언 → 그 아래 GTM 컨테이너 코드. 순서가 뒤바뀌면 GTM이 값을 못 읽어 (not set) 이나 누락이 발생합니다.
실전 예시: 게시물 작성자(author)를 dataLayer에 저장하기
개념만으로는 이해가 어려우니, 실제 예시로 살펴봅니다.
상황 가정 : 디애널리틱스 블로그에 여러 작성자가 있다고 해봅시다. 어떤 작성자가 가장 매력적인 콘텐츠를 작성했는지 확인한 뒤, 구글애널리틱스(GA)에서 작성자별로 세션을 분류하고 싶습니다.
이때 게시물 작성자 이름을 dataLayer에 저장하는 스니펫은 다음과 같습니다.
<head>
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
pagePostAuthor: '홍길동'
});
</script>
<!-- Google Tag Manager -->
<!-- ... GTM 컨테이너 코드 ... -->
<!-- End Google Tag Manager -->
</head>
코드 한 줄씩 이해하기
| 코드 | 의미 |
| window.dataLayer = window.dataLayer || []; | dataLayer가 이미 있으면 그대로 쓰고, 없으면 빈 배열로 새로 생성 |
| window.dataLayer.push({ ... }); | dataLayer에 데이터(키-값)를 추가(push) |
| pagePostAuthor: '홍길동' | pagePostAuthor라는 키에 '홍길동'이라는 값 저장 |
이제 dataLayer에는 pagePostAuthor = 홍길동이라는 정보가 담겼습니다. 하지만 이것만으로는 GTM이 이 값을 자동으로 알지 못합니다.
GTM이 dataLayer 값을 인식하게 하려면? (데이터 영역 변수)
기본적으로 GTM은 '데이터 영역 변수(Data Layer Variable)'를 사용하지 않으면 dataLayer의 데이터를 인식하지 못합니다. 즉, dataLayer 변수를 만들어 값을 받아와야 합니다.
정리하면 흐름은 이렇습니다.
웹사이트: dataLayer.push({ pagePostAuthor: '홍길동' })
↓
GTM: '데이터 영역 변수'를 만들어 pagePostAuthor 값을 읽어옴
↓
태그/트리거: 그 값을 매개변수로 쓰거나 트리거 조건으로 사용
데이터 영역 변수 만들기
| 항목 | 값 |
| 변수 유형 | 데이터 영역 변수 |
| 데이터 영역 변수 이름 | pagePostAuthor (코드의 키와 정확히 일치해야 함) |
| 데이터 영역 버전 | 기본값 버전 2 유지 |
⚠️ 대소문자까지 정확히 : 데이터 영역 변수 이름은 코드에 작성된 키와 철자·대소문자가 정확히 같아야 합니다. pagePostAuthor와 pagepostauthor는 다른 것으로 인식됩니다.
값이 잘 수집됐는지 확인하기 (미리보기 모드)
설정을 마쳤으면 GTM 미리보기 모드로 dataLayer 값이 실제로 수집되는지 확인합니다.
① GTM [미리보기] 를 실행하고, 왼쪽 이벤트 목록에서 [Message] 항목을 선택합니다.
② 앞서 설정한 데이터 영역 변수(pagePostAuthor) 의 값이 홍길동 으로 표시되는지 확인합니다.
✅ 값이 정상적으로 보이면, 이제 이 변수를 GA4 이벤트 태그의 매개변수로 넘기거나 트리거 조건으로 활용할 수 있습니다.
자주 묻는 질문 (FAQ)
Q. 데이터레이어(dataLayer)란 무엇인가요?
A. 웹사이트에서 GTM 컨테이너로 정보를 전달하는 자바스크립트 객체입니다. GTM은 이 정보로 태그의 변수를 채우고 트리거를 활성화합니다.
Q. dataLayer는 왜 필요한가요?
A. dataLayer가 없으면 GTM에 넘길 변수·트리거의 재료가 없어 태그가 제대로 실행되지 않습니다. 특히 구매 금액·상품 정보처럼 웹사이트가 직접 넘겨야 하는 값은 dataLayer를 거쳐야 전달됩니다.
Q. dataLayer 코드는 어디에 넣어야 하나요?
A. 웹사이트 <head> 영역에서 GTM 컨테이너 코드보다 위(먼저) 에 넣어야 합니다. 컨테이너가 로드될 때 값을 읽으므로, 값이 먼저 준비되어 있어야 합니다.
Q. dataLayer에 push만 하면 GTM이 알아서 인식하나요?
A. 아닙니다. GTM은 '데이터 영역 변수'를 만들어야 dataLayer 값을 인식합니다. 변수 이름은 코드의 키와 정확히 일치해야 합니다.
Q. 데이터 영역 변수 이름은 마음대로 지어도 되나요?
A. 안 됩니다. 코드에 push한 키 이름과 철자·대소문자까지 똑같이 입력해야 값을 읽어옵니다.
Q. 이벤트명과 변수명은 개발자가 알아서 정하나요?
A. 아닙니다. 요청자가 개발자에게 이벤트명·변수명을 명확히 전달해야 합니다. GTM 설정(변수 이름)과 코드(키 이름)가 일치해야 하기 때문입니다.
요약 (한 장 정리)
- dataLayer = 웹사이트 → GTM으로 정보를 넘기는 자바스크립트 객체
- 위치 규칙 : <head>에서 GTM 컨테이너 코드보다 위에 선언 (안 그러면 값 누락)
- 기본 코드 : window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 키: '값' });
- 인식 조건 : GTM에서 데이터 영역 변수를 만들어야 값을 읽음 (변수명 = 코드 키, 대소문자까지 일치)
- 확인 : 미리보기 → [Message] → 변수 값 확인
- 활용 : 읽어온 값을 GA4 이벤트 매개변수 또는 트리거 조건으로 사용
작성 : 디애널리틱스(The Analytics) · 구글애널리틱스를 활용하여 기업의 마케팅 성과를 향상시키는 방법을 연구합니다.