12CODE
지금 읽는 곳 데이터레이어는 어떤 방식으로 값을 전달하나 1 / 8
12code 라이브러리 아티클 표지. 데이터 레이어(Data Layer) 설계와 GTM 변수 연동: 개발자가 밀어준 실시간 매출 데이터를 GTM 맞춤 변수로 파싱하는 법

데이터 레이어(Data Layer) 설계와 GTM 변수 연동: 개발자가 밀어준 실시간 매출 데이터를 GTM 맞춤 변수로 파싱하는 법

데이터레이어에 값이 잘 들어와도, GTM에서 그 값을 읽어올 변수를 만들지 않으면 태그는 여전히 빈 값을 전송합니다.

이 과목 05 / 12편 중급 3분
과목 ID83
트랙STEP 2 중급·실무
모듈2-4. 데이터 분석·퍼포먼스 테크
레슨05
난이도중급
플랫폼Google Tag Manager
발행일2026-08-29
검토일2026-08-29
관련 과목80 · 81 · 82
출처2건
핵심요약5개
01

데이터레이어는 웹페이지 데이터를 GTM의 태그·트리거·변수로 전달하는 임시 저장소다

02

개발자는 dataLayer.push({...}) 형태로 데이터를 삽입하고, GTM은 이 변화를 감지한다

03

GTM에서 이 값을 실제로 쓰려면 '데이터 영역 변수(Data Layer Variable)'를 별도로 만들어야 한다

04

데이터 영역 변수는 dataLayer 객체 안의 키 이름을 정확히 지정해야 값을 읽어올 수 있다

05

중첩된 객체·배열 구조는 점(.) 표기법으로 경로를 지정해 접근한다

01

데이터레이어는 어떤 방식으로 값을 전달하나

데이터레이어는 key/value 쌍으로 구성된 임시 저장소이며, dataLayer = [{ }] 형태의 배열에 데이터를 담습니다. 개발자는 사용자의 특정 행동(구매 완료, 상품 조회 등)이 발생하는 시점에 dataLayer.push({...}) 명령어로 필요한 데이터를 이 배열에 삽입합니다. GTM은 dataLayer에 새로운 객체가 추가되는 순간 이를 감지하고, 설정된 트리거 조건에 맞으면 연결된 태그를 실행합니다. 이 흐름이 바로 개발자와 마케터가 서로 코드를 직접 건드리지 않고도 협업할 수 있게 해주는 핵심 구조입니다.

02

GTM에서 이 값을 읽으려면 무엇이 필요한가

데이터레이어에 값이 정상적으로 들어오고 있어도, GTM 안에서 이 값을 자동으로 인식하지는 않습니다. '변수' 메뉴에서 새 사용자 정의 변수를 만들고 유형을 '데이터 영역 변수(Data Layer Variable)'로 지정한 뒤, dataLayer 안의 정확한 키 이름을 입력해야 그 값을 읽어올 수 있는 변수가 만들어집니다. 예를 들어 dataLayer에 revenue라는 키로 매출 값이 들어온다면, 데이터 영역 변수 이름 필드에 정확히 "revenue"를 입력해야 합니다.

03

중첩된 구조는 어떻게 접근하나

실무에서는 dataLayer 안의 값이 단순한 키/값이 아니라 { ecommerce: { purchase: { value: 50000 } } }처럼 여러 단계로 중첩된 객체 구조인 경우가 많습니다. 이런 경우 데이터 영역 변수 이름 필드에 "ecommerce.purchase.value"처럼 점(.) 표기법으로 전체 경로를 입력해야 정확한 값을 읽어올 수 있습니다. 경로 중간의 단계 하나라도 오탈자가 있으면 변수 값이 비어 있는 상태(undefined)로 처리되므로, 개발자가 제공한 실제 데이터 구조 문서를 보고 정확한 경로를 확인하는 것이 중요합니다.

04

실시간 매출 데이터는 어떻게 흘러가나

구매 완료 페이지에서 서버가 실제 결제 금액을 계산해 페이지에 렌더링하면, 개발자는 이 금액을 dataLayer에 push하는 스크립트를 페이지 로드 시점에 실행합니다. GTM은 이 push를 감지해 데이터 영역 변수로 값을 읽어오고, 이 변수를 GA4 purchase 이벤트 태그의 value 매개변수에 매핑해 전송합니다. 이 전체 흐름 중 어느 한 단계(서버 계산, 데이터레이어 push, GTM 변수 매핑, 태그 전송)라도 어긋나면 최종적으로 GA4에 찍히는 매출 값이 실제와 달라집니다.

05

값이 안 읽힐 때 어디서부터 확인해야 하나

변수 값이 비어 있는 문제가 생기면, 가장 먼저 GTM 미리보기 모드의 데이터 영역 탭을 열어 실제로 dataLayer에 어떤 키·값이 들어오고 있는지부터 확인해야 합니다. 여기서 값이 정상적으로 보인다면 GTM 변수 설정의 키 이름 경로가 잘못됐을 가능성이 크고, 여기서도 값이 안 보인다면 개발자 쪽의 데이터레이어 push 자체가 안 되고 있거나 push 시점이 태그 실행보다 늦다는 뜻입니다. 이렇게 문제를 단계별로 나눠서 확인하면 원인을 빠르게 좁힐 수 있습니다.

06

변수 이름 규칙을 팀 안에서 통일해야 하는 이유

데이터레이어 키 이름과 GTM 변수 이름이 서로 다른 규칙(카멜케이스, 스네이크케이스 등)으로 뒤섞여 있으면, 새로운 태그를 만들 때마다 정확한 키 이름을 다시 찾아봐야 하는 비효율이 생깁니다. 개발팀과 함께 데이터레이어 키 이름 규칙을 문서로 정리해두고, GTM 변수 이름도 이 문서의 이름을 그대로 따르도록 통일하면 이후 태그 설계 속도가 눈에 띄게 빨라집니다.

07

배열 안의 값(상품 목록)은 어떻게 다뤄야 하나

구매 이벤트처럼 여러 상품이 배열로 담기는 데이터(items 배열)는 단일 값과 다른 접근이 필요합니다. 배열 전체를 하나의 변수로 가져와 맞춤 자바스크립트 변수나 GTM의 내장 이커머스 변수 기능을 활용해 items 배열 구조 그대로 태그에 전달하는 방식이 일반적입니다. 배열 안의 개별 상품 값을 하나하나 별도 변수로 쪼개려 하면 상품 수가 가변적인 실제 장바구니 상황에 대응하기 어려우므로, 배열은 배열 형태 그대로 다루는 것이 원칙입니다.

08

QA 단계에서 반드시 확인해야 할 예외 케이스

정상 결제 흐름뿐 아니라 할인 쿠폰이 적용된 경우, 여러 개 상품을 한 번에 구매한 경우, 배송비가 별도로 붙는 경우처럼 예외적인 결제 시나리오에서도 데이터레이어 값이 정확히 채워지는지 QA 단계에서 확인해야 합니다. 정상 케이스만 테스트하고 배포하면, 할인이 적용된 주문의 매출 값만 유독 실제보다 크게 잡히는 것 같은 문제를 나중에야 발견하게 되고, 이미 발행된 캠페인 보고서까지 수정해야 하는 후속 작업이 뒤따를 수 있습니다.

다음 행동

GTM 미리보기 모드에서 구매 완료 페이지에 진입해 데이터 영역 탭을 열고, 실제로 어떤 키 구조로 매출 데이터가 들어오는지 확인해보세요. 그 구조를 그대로 반영한 데이터 영역 변수를 만드는 것이 다음 실습입니다.

다음 글 · 레슨 06→디버깅 모드(Preview Mode) 200% 활용법: 태그 어시스턴트(Tag Assistant)를 켜고 유저 행동에 따라 태그가 정상 작동(Fired)하는지 검증

← 이전 글 · 레슨 04 클릭 트리거 엔지니어링: 특정 구매 버튼의 ID(Click ID) 또는 클래스(Click Classes) 값을 추출해 클릭 이벤트 구현하기

출처

facts 항목 기준 · 본문 인라인 미표기2건
F-01Google Tag Manager Help Center — 구성요소공식
F-02OpenAds — 마케터의 GTM활용 가이드 2편, HurdlersLab GTM 데이터레이어 활용업계

플랫폼 기능·심의 기준·가격·법률은 바뀝니다. 이 글은 2026-08-29에 위 출처를 기준으로 확인했습니다.

CHALLENGE

배운 걸 실전 문제로 확인

카테고리별 Level Test로 실무 레벨을 점검해보세요.

챌린지 보기 →
이 과목의 게시글12편
01태그 관리의 혁신: 구글 태그 매니저(GTM)의 작동 매커니즘과 소스코드 수정 없이 광고 스크립트를 제어하는 원리02GTM 3대 구성 요소 완벽 마스터: 태그(Tag: 무엇을 보낼 것인가), 트리거(Trigger: 언제 보낼 것인가), 변수(Variable: 조건)03컨테이너(Container) 개설 및 설치 실무: 자사몰 헤드(head)와 바디(body) 영역에 GTM 기본 소스코드 에러 없이 심는 법04클릭 트리거 엔지니어링: 특정 구매 버튼의 ID(Click ID) 또는 클래스(Click Classes) 값을 추출해 클릭 이벤트 구현하기05데이터 레이어(Data Layer) 설계와 GTM 변수 연동: 개발자가 밀어준 실시간 매출 데이터를 GTM 맞춤 변수로 파싱하는 법06디버깅 모드(Preview Mode) 200% 활용법: 태그 어시스턴트(Tag Assistant)를 켜고 유저 행동에 따라 태그가 정상 작동(Fired)하는지 검증07가독성 높은 트리거 조건 설정: '일부 클릭' 설정을 활용해 특정 URL 경로(예: /order/order_completion)에서만 작동하는 트리거 짜기08제3자 광고 스크립트 통합: 메타 픽셀, 네이버 프리미엄 로그분석, 카카오모먼트 스크립트를 GTM 맞춤 HTML 태그로 단일화 관리09고급 설정 - 서버사이드(Server-side) 추적의 서막: 브라우저 단 태킹의 한계를 극복하기 위한 구글 클라우드 플랫폼(GCP) 연동 기초10버전 관리와 배포(Publish) 프로토콜: 작업 중인 태그의 오류가 라이브 사이트를 깨뜨리지 않도록 버전 이름 지정 및 워크스페이스 관리11트러블슈팅: GTM 디버거에서는 태그가 켜지는데, 실시간 GA4 대시보드에는 데이터가 들어오지 않는 원인 분석 및 즉각 교정12GTM 컨테이너 백업 및 이관: 성공적으로 구축된 태그 세트를 JSON 파일로 익스포트하여 신규 프로젝트에 임포트하는 자동화 루틴 과목 전체 보기 →

MKT TOOLS

실무자를 위한 무료 도구

카피 글자수 검사, CPC·ROAS 계산기, UTM 생성기까지.

워크스페이스 열기 →