Google Tag Manager의 데이터 레이어 완벽 가이드

작성자

Uliana Lesiv

게시됨 2026.11.04댓글 개

Google Tag Manager(GTM)는 웹사이트 분석과 트래킹을 한 단계 끌어올리는 훌륭한 도구입니다. 그리고 데이터 레이어는 트래킹을 다음 단계로 끌어올리는 데 도움이 되는 기능 중 하나입니다.

GTM 데이터 레이어는 귀하의 웹사이트에서 사용자 상호작용에 관한 세부 정보를 수집하는 JavaScript 객체입니다. 이를 통해 상품 조회부터 사용자의 운영체제에 이르기까지 사실상 거의 모든 데이터를 수집할 수 있습니다. GTM에서 데이터 레이어를 활용하면 더 세밀하게 타깃팅된 트래킹 태그와 트리거를 구성할 수 있어, 사용자 행동에 대한 더 풍부한 인사이트를 제공하고 견고한 고객 데이터 분석을 위한 탄탄한 토대를 마련할 수 있습니다.

그래서 저희는 Google Tag Manager에서 데이터 레이어의 구현 및 활용의 다양한 측면을 다루는 포괄적인 가이드를 제작했습니다. 데이터 레이어란 무엇인지, 활용 사례, 웹사이트에서의 데이터 레이어 구현, Tag Manager에서 데이터 레이어를 만드는 방법, 설정 테스트, 그리고 설정 시 흔히 발생하는 실수에 대해 설명하겠습니다.

시작해 보겠습니다!

올바른 데이터를 수집하는 것은 작업의 절반에 불과합니다

Stape에서 서버 측 트래킹으로 GTM 데이터 레이어를 보완하여 이벤트 전달의 신뢰성을 높이세요.

서버 측에서 이벤트 전송하기

Tag Manager의 데이터 레이어란

GTM 데이터 레이어는 태그에 데이터를 전달하는 데 사용되는 JavaScript 객체입니다. 이를 통해 이벤트나 변수를 전달하고 특정 변수 값을 기반으로 트리거를 설정할 수 있습니다. 데이터 레이어는 Google Tag Manager와 gtag.js 모두에서 사용됩니다.

데이터 레이어는 귀하의 웹사이트와 Google Tag Manager 사이의 중개자 역할을 하며, 귀하의 컨테이너를 위한 구조화된 데이터를 저장하는 허브로 기능합니다.

데이터 레이어의 활용 사례

다음을 원하는 경우 데이터 레이어를 생성해야 합니다.

신뢰할 수 있는 트래킹을 설정하는 경우. 데이터 레이어가 없으면 HTML DOM(웹사이트의 HTML 요소를 추가, 가져오기, 수정 또는 삭제하는 데 사용되는 표준)에서 직접 데이터를 가져온 다음 데이터를 GTM 컨테이너로 직접 전송합니다. 문제는 HTML DOM이 변경될 수 있어, 태그 실행과 데이터 수집이 중단될 수 있다는 점입니다.

데이터 레이어를 사용하면 이러한 문제가 발생하지 않습니다. GTM 컨테이너가 HTML DOM보다 훨씬 더 안정적인 페이지의 데이터 레이어에서 데이터를 가져오기 때문입니다. 데이터 기록은 누군가 페이지의 데이터 레이어를 손상시키는 경우에만 중단됩니다.

특정 조건에서 태그 데이터를 보강하는 경우. 사용자가 50달러 이상 결제한 경우에만 구매 이벤트의 값에 대한 데이터를 전송하고 싶다고 가정해 보겠습니다. 페이지 전반에 흩어져 있는 변수, 거래 세부 정보, 페이지 카테고리 및 기타 신호를 일일이 찾는 대신, 관련 변수와 그 값(이 경우 구매 금액 > 50달러)으로 채워진 데이터 레이어를 사용하면 태그가 필요로 할 때 필요한 데이터에 쉽게 접근할 수 있습니다.

데이터 레이어는 어떻게 작동하는가

이 레이어에 정확히 어떤 데이터를 저장하고 싶은지 지정할 수 있습니다. 데이터 레이어를 생성하고 추적에 필요한 매개변수로 채우는 방법에는 두 가지가 있으며, 이는 다음 섹션에서 살펴보겠습니다.

GTM은 데이터 레이어에서 필요한 값을 읽고 가져와 Google Analytics, Google Ads, Facebook Pixel 등의 분석 도구로 전송합니다.

데이터 레이어 구문 및 예시

Google Tag Manager에서 dataLayer는 "[]"로 표시되듯 배열이며, 아래 스크립트에 나타난 것처럼 "{}"로 표현되는 객체를 포함합니다.

dataLayer = [{}];

데이터 레이어 내의 요소는 변수라고 불리며, '키' : '값' 쌍("{}" 안에 배치됨)으로 포맷됩니다.

GTM은 "event"라는 데이터 레이어 변수를 사용하며, 이는 사용자가 웹사이트의 요소와 상호작용할 때 태그를 트리거하기 위해 JavaScript 이벤트 리스너에서도 사용됩니다. 따라서 아래 예시에 따르면 'event'는 '키'이고 'register'는 '값'입니다.

dataLayer = [{'event' : 'register' }];

변수의 경우 구문은 이벤트와 동일합니다. 아래 예시에서는 트래킹하고자 하는 국가를 가져오는데, 'country'('variable_name')가 '키'이고 'united states'가 '값'('variable_value')입니다.

dataLayer = [{'country' : 'united states' }];

dataLayer 초기화

데이터 레이어 구현에는 두 가지 방법이 있습니다: 선언(declaration)과 데이터 레이어 푸시(push)입니다. 두 방법을 모두 사용하는 방법을 설명드리겠지만, 가장 적합한 방법으로 바로 넘어가셔도 됩니다.

간단히 말해, dataLayer.push를 사용하는 것을 권장합니다. 이는 더 널리 사용되며 대부분의 요구 사항을 충족시켜 주기 때문입니다. 또한 이 방법은 Google Tag Manager의 이벤트를 방해하지 않으므로 사용하기에 더 안전한 반면, 데이터 레이어 선언을 부적절하게 설정하면 문제를 쉽게 일으킬 수 있습니다.

	데이터 레이어 선언	dataLayer.push
가장 적합한 경우	페이지 로드 이전에 필요한 값	페이지 로드 이벤트가 아닌 이벤트를 위해 정보를 dataLayer로 푸시하는 경우
데이터 레이어 변수의 푸시 시점	런타임 이전	런타임 중
코드 내 배치 위치	Google Tag Manager 컨테이너 스니펫 위	코드 내 어디든
	데이터 레이어 선언으로 이동	dataLayer.push로 이동

방법 1: 데이터 레이어 선언

이 방법을 사용하려면 데이터 레이어 스니펫을 Google Tag Manager 컨테이너 스니펫 위에 배치해야 합니다. 이 경우 데이터 레이어는 Tag Manager가 초기화되기 전에 초기화됩니다.

전반적으로 이는 데이터 레이어를 생성하는 널리 사용되거나 권장되는 방법은 아니지만, GTM 컨테이너가 로드되기 전에 데이터 포인트를 생성하고 이러한 데이터 포인트를 태그 관리에 사용하고 싶다면 효과가 있습니다.

'variable_name': 'variable_value'를 필요한 매개변수로 변경하고, GTM 스니펫 앞에 웹사이트 페이지에 코드를 붙여넣습니다.

dataLayer = [{

'variable_name': 'variable_value' 

}];



...

참고: 객체의 값을 dataLayer 배열에 할당하려면 "=" 연산자를 사용하십시오.

방법 2: dataLayer.push

푸시 방법은 객체 요소를 데이터 레이어에 동적으로 추가합니다. 데이터 레이어 선언 방법과 달리, 푸시 데이터를 사용하면 데이터 레이어 스니펫을 코드 내 어디에나 배치할 수 있습니다.

조금 헷갈릴 수 있지만, dataLayer는 window 객체와 상호작용하는 모든 함수가 접근할 수 있는 JavaScript 변수이기도 합니다. 따라서 dataLayer라는 이름의 다른 로컬 JavaScript 배열과의 충돌을 피하기 위해 가장 좋은 방법은 window.dataLayer 접두사를 사용하는 것입니다.

따라서 dataLayer.push 방법에는 아래의 코드를 사용해야 합니다. 'variable_name' : 'variable_value' 대신 필요한 매개변수를 추가하십시오.

window.datalayer = window.dataLayer || [];

window.dataLayer.push({ 

'variable_name' : 'variable_value'

});

위의 코드 블록에서는 이미 존재하는 dataLayer가 있으면 그것으로 설정되고, 그렇지 않으면 빈 배열로 새 dataLayer가 생성됩니다. ||(OR) 연산자는 이러한 조건 중 하나라도 충족되면 할당이 이루어지도록 보장합니다.

이런 방식으로 dataLayer를 덮어쓸 수 있는 여러 선언을 생성하는 것을 피할 수 있습니다.

eCommerce 데이터 레이어 예시 및 문서

많은 eCommerce CMS에는 표준 eCommerce 이벤트를 위한 데이터 레이어를 생성해 주는 플러그인(Stape의 플러그인 포함)이 있습니다. 경우에 따라서는 이것만으로는 충분하지 않을 수 있습니다. 예를 들어 데이터 레이어 이벤트에 추가 이벤트나 추가 데이터가 필요한 경우입니다. 또는 완전히 맞춤화된 플랫폼을 사용하는 경우입니다.

이 경우 필요한 페이로드로 데이터 레이어 이벤트를 생성하기 위해 개발자에게 문의해야 합니다. 이는 일반적으로 개발자에게 꽤 간단한 작업이며 오래 걸리지 않지만, 귀하의 사이트나 플랫폼의 아키텍처에 따라 달라질 수 있습니다.

복사하여 귀하의 필요에 맞게 편집한 뒤 개발자에게 전달할 수 있는 개발자용 문서 예시입니다.

몇 가지 유용한 가이드라인:

문서의 사본을 만들고, 필요 없는 이벤트는 제거하고/또는 필요한 이벤트와 샘플 페이로드를 추가하십시오.
모든 이벤트에서 동일한 데이터 형식을 사용하십시오. GA4 형식을 따르는 것이 가장 좋습니다.
명확하지 않은 이벤트(예: 상품 조회나 장바구니 추가)인 경우, 언제 트리거되어야 하는지 자세히 설명하십시오. 이렇게 하면 귀하와 개발자 사이에 불필요한 왕래를 피할 수 있습니다.
사용자 데이터는 사실상 모든 마케팅 플랫폼에서 사용될 수 있으며, 데이터 레이어에서 이를 사용할 수 있도록 하는 것이 중요합니다 – 이를 활용하면 트래킹 결과가 크게 향상됩니다.
사용자가 다른 페이지로 리디렉션되기 전에 전송되는 데이터 레이어 이벤트는 가급적 피하십시오. 이는 리디렉션 전에 이벤트가 실제로 전송되지 않을 수 있어 해당 데이터의 손실로 이어질 수 있습니다. 예를 들어, 사용자가 양식을 제출한 후 Lead 이벤트를 전송하고 그 후 사용자가 감사 페이지로 이동하는 경우 – 모범 사례는 사용자가 실제로 양식을 제출하는 시점이 아니라 감사 페이지에서 데이터 레이어에 이 이벤트를 전송하는 것입니다.
사이트에 이미 일부 데이터 레이어 이벤트가 있는 경우, 기존 트래킹에 영향을 주지 않도록 새로운 데이터 레이어 이벤트에는 맞춤 이름을 사용하고 기존 이벤트는 수정하지 않는 것이 좋습니다. 즉, 데이터 레이어에 이미 예를 들어 add_to_cart가 있다면, 기존 이벤트를 변경한 다음 태그를 새 이벤트로 재구성하기보다는 새로운 이벤트 add_to_cart_v2를 생성하는 것이 좋습니다.
개발자가 이를 구현한 후에는 반드시 데이터 레이어를 확인하십시오. 때로는 페이로드의 작은 오류조차 트래킹 문제를 일으킬 수 있습니다.

분석 및 트래킹을 위한 주요 eCommerce 데이터 레이어 구성 요소

1. 상품/아이템 데이터

item_id – 고유 상품 식별자(SKU 또는 데이터베이스 ID)
item_name – 상품명
item_category – 상품 카테고리(중첩 가능: item_category2, item_category3)
item_brand – 브랜드명
price – 단가
quantity – 수량

2. 거래 데이터

transaction_id – 고유 주문 ID(중복 제거에 필수적)
value – 총 거래 금액
currency – ISO 4217 통화 코드(예: USD, EUR)
tax – 세금 금액
shipping – 배송비
coupon – 적용된 쿠폰 코드

3. 사용자 데이터

user_id – 내부 사용자 식별자
email – 해시 처리된 사용자 이메일(향상된 전환용)

4. 이벤트별 매개변수

이벤트	트리거 시점
view_item_list	상품 목록 또는 카테고리 페이지
view_item	상품 상세 페이지
add_to_cart	상품이 장바구니에 추가됨
begin_checkout	결제가 시작됨
add_payment_info	결제 수단이 선택됨
purchase	주문이 확정됨

Tag Manager에서 데이터 레이어를 생성하는 방법

Google Tag Manager에서 데이터 레이어 배열의 요소에 다양한 방식으로 접근할 수 있습니다. Google Tag Manager 내에서 데이터를 활용하려면 변수에 할당하거나 이벤트 트리거로 사용하십시오. 이러한 변수나 이벤트는 이후 귀하의 태그, 트리거 또는 다른 변수에 통합될 수 있습니다.

아래에서는 데이터 레이어의 세 가지 활용 사례와 GTM에서의 설정 방법을 소개합니다.

활용 사례 1: 데이터 포인트로서의 데이터 레이어 변수

코드 예시

예시로, 주황색 티셔츠의 구매 금액을 가져오겠습니다.

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

‘product_name’ : ‘orange t-shirt’,

'purchase_value' : '5',

‘purchase_currency’ : ‘EUR’

});

GTM 설정

1. 변수 구성을 위해 GTM 컨테이너에서 Variables → 사용자 정의 변수에서 "New"를 클릭합니다.

2. 변수 유형으로 "Data Layer Variable"을 선택합니다.

3. 데이터 레이어 변수 이름을 추가하고 "Save"를 클릭합니다.

참고하십시오: 이 필드는 대소문자를 구분하므로, 이름이 페이지에 추가한 코드의 값 이름과 일치하는지 확인하십시오. 이 경우, 그것은 purchase_value입니다.

활용 사례 2: 이벤트를 트리거하는 데이터 레이어

코드 예시

코드 예시로, 사용자가 등록에 필요한 데이터를 입력하고 "Register"를 클릭할 때 "register" 이벤트를 트리거하는 dataLayer 변수를 가져오겠습니다.

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

'event' : 'register'

});

GTM 설정

1. Google Tag Manager의 Triggers로 이동 → "New"를 클릭합니다.

2. "Custom Event" 트리거 유형을 선택합니다.

3. "Event name"에는 이 필드가 대소문자를 구분하므로, 코드의 값 이름과 동일한 방식으로 이름을 추가하십시오. "Save"를 클릭합니다.

활용 사례 3: 변수와 이벤트 트리거를 모두 담당하는 데이터 레이어 변수

코드 예시

아래 데이터 레이어 변수 예시는 구매 이벤트를 트리거하고 구매 정보를 생성합니다.

dataLayer = [{
'event': 'purchase',
'purchase_info': {
'purchase_amount': 5,
'purchase_curency': 'EUR'
}
}];

GTM 설정

코드의 변수를 Google Tag Manager에서 변수와 이벤트 트리거 모두로 사용할 수 있습니다. 변수와 이벤트에 대한 설정 과정은 이전 단계를 확인하십시오.

클라이언트 측에서 서버 측 GTM으로 데이터 레이어의 매개변수를 전송하는 방법

데이터 레이어는 클라이언트 측 GTM에서와 같은 방식으로 서버 측 Google Tag Manager에 존재하지 않습니다.

하지만 sGTM에는 웹 GTM으로부터의 HTTP 요청을 확인하는 Client라는 객체가 있습니다. 요청에 특정 데이터가 포함되어 있으면, Client는 요청 데이터를 이벤트 데이터로 변환합니다. 태그 역시 웹 GTM 컨테이너에서 GTM 서버로 데이터를 전송하는 데 사용됩니다.

서버 GTM 컨테이너의 데이터 포인트를 채우려면, 웹에서 서버 GTM으로 데이터를 전송하는 데 사용할 방법을 선택해야 합니다. 널리 사용되는 방법 중에는 다음이 있습니다.

Google Analytics 4 사용하기

이 방법은 Google Ads나 Floodlight를 위한 서버 측 트래킹을 설정할 때 특히 효과적인데, 둘 다 전적으로 GA4 태그에 의존하기 때문입니다.

1. 웹 GTM에서 구성이 "Google Analytics: GA4 Event"인 태그를 생성합니다.

2. 이 데이터에 대해 사전 정의된 필드를 찾을 수 있으며, 각 매개변수에 데이터 레이어 변수를 개별적으로 할당할 수 있습니다.

GA4 setup to send data from the web to the server GTM

Data Tag/Data Client 사용하기

Data Tag/Data Client를 사용하는 주요 장점은 데이터 레이어 및 기타 공통 데이터를 웹에서 GTM 서버로 자동으로 전송한다는 점입니다.

1. 웹 GTM 컨테이너에서 새 태그를 생성하고 태그 구성으로 "Data Tag"를 선택합니다.

참고하십시오: GTM 갤러리에 Data Client를 추가해야 합니다.

2. 태그 구성에서 "Send common data"와 "Send all from DataLayer"라는 두 개의 체크박스를 활성화합니다.

시스템은 자동으로 웹 GTM의 데이터를 파싱하여 사용 가능한 모든 정보를 서버 GTM으로 전달합니다.

설정 과정에 대해 더 자세히 알아보려면 서버 측 Google Tag Manager용 데이터 레이어 생성에 관한 저희 블로그 글을 확인해 보십시오.

데이터 레이어 변수를 Google Analytics 4로 푸시하기

참고: 아래에서는 데이터를 전송하기 위해 Google 태그를 설정하는 방법을 설명합니다. 이미 Google 태그를 구성한 경우 새 태그를 생성할 필요가 없습니다. 아래 단계를 건너뛰고 맞춤 측정기준 생성에 관한 섹션으로 바로 이동하십시오.

이 경우, "Shared event settings" 섹션에서 데이터 레이어용 코드에 있는 것과 같은 매개변수만 추가하면 됩니다.

GTM에서 Google 태그 구성하기

1. GTM의 "Tags" 섹션에서 "New"를 클릭하고 태그 유형으로 "Google Tag"를 선택합니다.

2. GA4 측정 ID를 추가하고, "Shared event settings" 섹션에 코드에 추가한 매개변수를 나열합니다.

3. 트리거로 "Page View – All Pages"를 선택합니다.

GA4에서 맞춤 측정기준 생성하기

표준 매개변수 목록이 있습니다. 데이터 레이어를 통해 추적하고자 하는 데이터가 Google Analytics의 권장 이벤트에 없는 경우, GA4 계정에 맞춤 측정기준으로 수동으로 추가해야 합니다. 추가한 후에는 GA4 보고서에 표시됩니다.

1. Google Analytics 계정에서 "Admin" → "Custom definitions"를 클릭합니다.

2. "Create custom dimension"을 클릭하고 필요한 매개변수를 입력합니다.

Dimension name – 보고서에서 보고 싶은 이름.
Scope – 이벤트, 사용자, 또는 상품 범위를 선택합니다.
Event parameter – 데이터 레이어 스니펫에 지정된 대로 변수 이름 또는 이벤트를 추가합니다(해당 필드의 데이터는 대소문자를 구분한다는 점에 유의하십시오).

"Save"를 클릭합니다.

데이터 레이어 설정 테스트하기

Stape GTM Helper 덕분에, 귀하의 고객이나 귀하 자신의 대규모 GTM 컨테이너를 위해 더 나은 GTM 미리보기와 더 쉽게 검토할 수 있도록 형식이 지정된 서버 요청을 얻을 수 있습니다.

GTM 디버그 모드

Google Tag Manager가 변수를 제대로 캐치하는지 확인하려면, 일반적인 GTM 디버깅과 유사한 몇 가지 간단한 단계를 거쳐야 합니다.

1. "Preview"를 클릭하고 디버깅 중인 웹사이트의 URL을 추가합니다.

2. "Variable" 섹션 탭으로 전환하면, 모든 것이 올바르게 작동할 경우 이 탭에서 필요한 데이터를 확인할 수 있습니다.

GTM의 디버그 모드에 문제가 있는 경우, 저희 가이드를 확인해 보십시오.

Google Analytics 4

Google Analytics가 데이터를 캡처하는지 확인하려면 "Admin" → DebugView로 이동하십시오.

데이터 레이어 문제 해결

문제 1: 데이터 레이어 푸시가 작동하지 않음

변수나 이벤트가 푸시되지 않는 것을 발견했다면, 객체 이름에 대소문자를 올바르게 사용하지 않았거나 따옴표를 빠뜨렸을 가능성이 높습니다.

해결책: 객체 이름의 올바른 대소문자 사용 및 따옴표

dataLayer가 카멜 케이스로 작성되어 있는지 확인하십시오.

좋은 예시:

dataLayer.push({'variable_name': 'variable_value'});

잘못된 예시:

datalayer.push({'variable_name': 'variable_value'});

모든 변수 이름이 따옴표로 둘러싸여 있는지 확인하십시오.

좋은 예시:

dataLayer.push({'variable_name': 'variable_value'});

잘못된 예시:

dataLayer.push({variable_name': 'variable_value'});

문제 2: 태그가 실행되지 않음

웹사이트에서 필요한 모든 위치에서 태그를 실행할 수 없는 경우, 여러 페이지의 변수 이름을 확인하십시오.

해결책: 일관된 변수 이름

가장 흔한 실수는 서로 다른 페이지에서 변수 이름의 대소문자 사용이 일관되지 않은 것이므로, 이름을 검토해야 합니다.

좋은 예시:

// Homepage:

dataLayer.push({'variable_name': 'variable_value'});

// Product page:

dataLayer.push({'variable_name': 'variable_value'});

잘못된 예시:

// Homepage:

dataLayer.push({'variable_name': 'variable_value'});

// Product page:

dataLayer.push({'variable Name': 'variable_value'});

요약

GTM datalayer는 GTM의 핵심 구성 요소입니다. 이를 통해 사용자가 귀하의 웹사이트와 상호작용하는 것을 포착할 수 있을 뿐만 아니라, 해당 상호작용이나 그 맥락에 관한 추가 데이터도 제공할 수 있습니다. 더 나은 데이터 구조를 만들고자 한다면 데이터 레이어를 사용하는 것이 필수적입니다.

데이터 레이어라는 개념은 구현하기가 상당히 까다로우며, 복잡한 트래킹 인프라를 구축하려면 개발자가 필요할 가능성이 높습니다.

다음은 간략한 요약입니다.