Google의 새로운 태그 플랫폼 문서를 미리 확인해 주셔서 감사합니다. 이 사이트는 공개 베타 버전입니다 (의견 보내기).

데이터 영역

데이터 영역은 Google 태그 관리자와 gtag.js에서 태그에 정보를 전달하기 위해 사용하는 객체입니다. 이벤트 또는 변수는 데이터 영역을 통해 전달될 수 있으며, 트리거는 변수 값을 기반으로 트리거를 설정될 수 있습니다.

예를 들어 purchase_total의 값이 100달러보다 크거나 특정 이벤트(예: 버튼 클릭)를 기반으로 할 때 리마케팅 태그를 실행하는 경우, 해당 데이터를 태그에 사용할 수 있도록 데이터 영역을 구성할 수 있습니다. 데이터 영역 객체는 JSON으로 구성됩니다. 예를 들면 다음과 같습니다.

{
  event: "checkout_button",
  gtm: {
    uniqueEventId: 2,
    start: 1639524976560,
    scrollThreshold: 90,
    scrollUnits: "percent",
    scrollDirection: "vertical",
    triggers: "1_27"
  },
  value: "120"
}

Google 태그는 변수, 거래 정보, 페이지 카테고리와 더불어 페이지 전반에 분산된 기타 신호를 파싱하는 대신 데이터 영역에 추가된 정보를 체계적이고 예측 가능한 방식으로 쉽게 참조할 수 있도록 설계되었습니다. 변수 및 연결된 값으로 채워진 데이터 영역 구현을 사용하면 태그에서 관련성 높은 데이터를 필요로 할 때 이를 제공할 수 있습니다.

설치

태그 관리자 웹페이지 설치의 경우 데이터 영역을 만들어야 합니다. 아래의 강조표시된 코드는 태그 관리자가 로드되기 전에 데이터 영역이 설정된 위치를 보여줍니다.

<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

태그가 제품 내에서 복사되어 웹페이지에 추가되는 표준 gtag.js 구현에서는 데이터 영역을 설정하기 위한 코드가 제공됩니다. 맞춤 전체 사이트 태그 구현에서는 아래 강조표시된 예시와 같이 스크립트 시작 부분에 데이터 영역 코드를 추가합니다.

<!-- Global site tag (gtag.js) - Google Ads: CONVERSION_ID -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-YYYYYY"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'AW-YYYYYY');
</script>

데이터 영역 정보 처리 방식

컨테이너가 로드되면 태그 관리자가 큐에 추가된 모든 데이터 영역 푸시 메시지를 처리하기 시작합니다. 태그 관리자는 선입 선출 방식으로 메시지를 처리합니다. 각 메시지는 수신된 순서에 따라 한 번에 하나씩 처리됩니다. 메시지가 이벤트인 경우, 태그 관리자가 다음 메시지로 넘어가기 전에 충족된 트리거 조건이 있는 모든 태그가 실행됩니다.

페이지, 맞춤 템플릿 또는 맞춤 HTML 태그의 코드에 의해 gtag() 또는 dataLayer.push()가 호출되는 경우 대기 중인 다른 메시지가 모두 평가된 후에 연결된 메시지가 큐에 추가되고 처리됩니다. 즉, 업데이트된 데이터 영역 값이 다음 이벤트에 사용 가능하게 된다는 보장은 없습니다. 이러한 경우를 처리하려면 메시지가 데이터 영역으로 푸시될 때 메시지에 이벤트 이름을 추가한 다음, 맞춤 이벤트 트리거로 해당 이벤트 이름을 수신 대기해야 합니다.

이벤트 핸들러와 함께 데이터 영역 사용

dataLayer 객체는 event 키를 사용하여 이벤트 전송을 시작합니다.

전체 사이트 태그와 태그 관리자는 event라는 특수한 데이터 영역 변수를 사용합니다. 이 변수는 사용자가 웹사이트 요소와 상호작용할 때 자바스크립트 이벤트 리스너가 태그를 실행하는 데 사용됩니다. 예를 들어 사용자가 구매 확인 버튼을 클릭할 때 전환 추적 태그를 실행할 수 있습니다. 이벤트는 사용자가 링크, 버튼, 스크롤 등의 웹사이트 요소와 상호작용할 때마다 호출할 수 있습니다.

이 기능은 이벤트가 발생할 때 dataLayer.push()를 호출하여 수행됩니다. dataLayer.push()를 통해 이벤트를 전송하는 문법은 다음과 같습니다.

dataLayer.push({'event': 'event_name'});

여기서 event_name'login', purchase 또는 search 등 이벤트를 설명하는 문자열입니다.

dataLayer.push()를 사용하면 측정할 작업이 발생할 때 이벤트 데이터를 전송할 수 있습니다. 예를 들어 사용자가 버튼을 클릭할 때 이벤트를 전송하려면 다음과 같이 버튼의 onclick 핸들러를 수정하여 dataLayer.push()를 호출합니다.

<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>

데이터 영역 변수를 데이터 영역에 동적으로 푸시하여 양식에 입력 또는 선택한 값, 방문자가 재생 중인 동영상과 연결된 메타데이터, 방문자가 맞춤설정한 제품(예: 자동차)의 색상, 클릭한 링크의 도착 URL 등의 정보를 캡처할 수 있습니다.

이벤트와 마찬가지로 이 기능은 push() API를 호출하여 데이터 영역에 데이터 영역 변수를 추가하거나 대체하여 수행됩니다. 동적 데이터 영역 변수를 설정하는 기본 문법은 다음과 같습니다.

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

여기서 'variable_name'은 설정할 데이터 영역 변수의 이름을 나타내는 문자열이고, 'variable_value'는 설정하거나 대체할 데이터 영역 변수의 값을 나타내는 문자열입니다.

예를 들어 방문자가 제품 맞춤설정 도구를 사용할 때 색상 환경설정을 통해 데이터 영역 변수를 설정하려면 다음과 같은 동적 데이터 영역 변수를 푸시하면 됩니다.

dataLayer.push({'color': 'red'});

한 번에 여러 변수 푸시

다음과 같이 여러 변수와 이벤트를 한 번에 푸시할 수 있습니다.

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customize'
});

데이터 영역 변수 유지

웹페이지 간에 데이터 영역 변수를 유지하려면 각 페이지 로드 시 데이터 영역이 인스턴스화된 후에 dataLayer.push()를 호출하고 변수를 데이터 영역으로 푸시합니다. 컨테이너가 로드될 때 태그 관리자에서 이러한 데이터 영역 변수를 사용하려면 아래와 같이 태그 관리자 컨테이너 코드 위에 dataLayer.push() 호출을 추가합니다.

<script>
window.dataLayer = window.dataLayer || [];

dataLayer.push({
 'event': 'Pageview',
 'pagePath': 'https://www.googleanalytics.dev/pancakes',
 'pageTitle': 'Pancake Event Signup',
 'visitorType': 'customer'
});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

데이터 영역 객체 내에 선언된 각 변수는 방문자가 현재 페이지에 머무르는 동안만 유지됩니다. 여러 페이지에 걸쳐 관련된 데이터 영역 변수(예: visitorType)는 각 웹사이트 페이지의 데이터 영역에서 선언되어야 합니다. 모든 페이지의 데이터 영역에 동일한 변수 집합을 추가할 필요는 없지만, 일관된 이름 지정 규칙을 사용해야 합니다. 즉, pageCategory 변수를 사용하여 가입 페이지에 페이지 카테고리를 설정할 경우 제품 및 구매 페이지에서도 pageCategory 변수를 사용해야 합니다.

문제 해결

다음은 데이터 영역 관련 문제 해결 팁입니다.

window.dataLayer 변수를 덮어쓰지 않음: 데이터 영역을 직접 사용하면(예: dataLayer = [{'item': 'value'}])), dataLayer의 기존 값이 덮어쓰여집니다. 태그 관리자 설치는 window.dataLayer = window.dataLayer || [];를 사용하여 컨테이너 스니펫 또는 최적화 도구 페이지 숨김 스니펫 위의 소스 코드에서 최대한 높은 위치에 데이터 영역을 인스턴스화해야 합니다. dataLayer가 선언된 후 dataLayer.push({'item': 'value'})를 사용하여 값을 추가합니다. 페이지가 로드될 때 태그 관리자에서 이러한 값을 사용할 수 있어야 하는 경우 dataLayer.push() 호출이 태그 관리자 컨테이너 코드보다 위에 있어야 합니다.

dataLayer 객체 이름이 대소문자를 구분함: 대소문자를 구분하지 않고 변수나 이벤트를 푸시하려고 하면 푸시가 작동하지 않습니다

datalayer.push({'pageTitle': 'Home'});    // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'});    // Good (dataLayer in camel case)

dataLayer.push는 유효한 자바스크립트 객체와 함께 호출해야 합니다. 모든 데이터 영역 변수 이름은 따옴표로 묶어야 합니다.

dataLayer.push({new-variable: 'value'});      // Bad - no quote marks
dataLayer.push({'new-variable': 'value'});    // Good - proper quote marks

여러 페이지에서 변수 이름을 동일하게 유지함: 여러 페이지에서 동일한 개념에 다른 변수 이름을 사용하면 원하는 모든 위치에서 태그를 일관되게 실행할 수 없습니다.

나쁜 예시:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});

좋은 예시:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});

데이터 영역 이름 변경

전체 사이트 태그 또는 태그 관리자에서 시작되는 데이터 영역 객체의 기본 이름은 dataLayer입니다. 데이터 영역에 다른 이름을 사용하려면 전체 사이트 태그 또는 태그 관리자 컨테이너 스니펫의 데이터 영역 매개변수 값을 원하는 이름으로 수정하세요.

gtag.js

새 데이터 영역 이름을 설정하려면 URL에 'l'이라는 쿼리 매개변수를 추가합니다(예: l=myNewName). 전체 사이트 태그 스니펫의 모든 dataLayer 인스턴스를 새 이름으로 업데이트합니다.

<!-- Global site tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZZZZZZ&l=myNewName"></script>
<script>
  window.myNewName = window.myNewName || [];
  function gtag(){myNewName.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-ZZZZZZ');
</script>

태그 관리자

컨테이너 스니펫의 데이터 영역 매개변수 값(아래에 강조표시됨)을 원하는 이름으로 바꿉니다.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','myNewName','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

이름을 바꾼 후에는 데이터 영역에 대한 모든 참조(즉, 스니펫 위에 데이터 영역을 선언하는 경우 또는 .push() 명령어를 사용하여 이벤트 또는 동적 데이터 영역 변수를 데이터 영역으로 푸시하는 경우)를 맞춤 데이터 영역 이름을 반영하도록 조정해야 합니다.

<script>
  myNewName = window.dataLayer || [];
  myNewName.push({'variable_name': 'variable_value'});
</script>

맞춤 데이터 영역 메서드

데이터 영역으로 함수를 푸시하면 이 함수가 추상 데이터 모델로 설정된 상태로 호출됩니다. 이 추상 데이터 모델은 값을 가져와 키-값 저장소로 설정할 수 있으며, 데이터 영역을 재설정하는 방법도 제공합니다.

set

추상 데이터 모델의 set 함수를 사용하면 get을 통해 검색할 값을 설정할 수 있습니다.

window.dataLayer.push(function() {
  this.set('time', new Date());
});

get

추상 데이터 모델의 get 함수를 사용하면 설정된 값을 검색할 수 있습니다.

window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
})

reset

추상 데이터 모델의 reset 함수를 사용하면 데이터 영역에서 데이터를 재설정할 수 있습니다. 이 함수는 계속 열려 있는 페이지에서 시간이 지나면서 데이터 영역 크기가 계속 증가하는 경우에 가장 유용합니다. 데이터 영역을 재설정하려면 다음 코드를 사용하세요.

window.dataLayer.push(function() {
  this.reset();
})