데이터 영역

데이터 영역은 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 구현에서는 데이터 영역을 설정하기 위한 코드가 제공됩니다. Google 태그의 맞춤 구현에서는 아래 강조표시된 예와 같이 스크립트 시작 부분에 데이터 영역 코드를 추가합니다.

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

  gtag('config', 'TAG_ID');
</script>

데이터 영역 정보 처리 방식

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

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

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

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

Google 태그와 태그 관리자는 자바스크립트 이벤트 리스너에서 사용하는 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'});

데이터 영역 이름 바꾸기

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

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

  gtag('config', 'TAG_ID');
</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>

맞춤 데이터 영역 메서드

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

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

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

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