[GTM, Google Tag Manager]dataLayer

Data layer

무엇인가?
데이터 계층(Data Layer)은 웹사이트 내의 추가적인 정보(이벤트, 변수)를 태그에 전달하기 위해 Google Tag Manager(GTM) 및 gtag.js에서 사용하는 객체입니다. 주로 JSON 형태로 사용됩니다.

왜 사용하는가?:
웹사이트 내에서 발생하는 사용자 인터랙션 정보를 Google Analytics(GA)에서 더 구체적으로 활용하기 위해 사용합니다.

<Data Layer 사용 방법>

Data Layer 객체 예시

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

Data Layer 작동 방식

1. GTM 컨테이너 로드: GTM 컨테이너가 로드되면 대기 중인 모든 dataLayer의 push 메시지를 처리합니다. GTM은 메시지를 들어온 순서대로 처리합니다.
2. 이벤트 처리: 메시지가 이벤트인 경우, 트리거 조건이 충족된 모든 태그가 실행됩니다.
3. 페이지 내 dataLayer.push() 코드 호출: 연결된 메시지가 대기열에 추가되고, 보류 중인 다른 모든 메시지가 평가된 후 처리됩니다.

주의 사항

• 맞춤 HTML 태그 사용 금지: gtag.js 기반 코드를 배포하지 말고, Google Ads, Analytics, Floodlight용 태그 관리자의 기본 태그 템플릿을 사용하세요.
• 동의 설정: 태그 관리자 동의 API를 적용하여 동의 설정을 구성해야 합니다.
• Google Tag Assistant 사용: 이벤트 체인의 어느 시점에서든 데이터 영역의 상태를 검사할 수 있습니다.

 

이벤트 핸들러와 dataLayer 사용

GTM은 사용자가 웹사이트 요소와 상호작용할 때 태그를 실행하기 위해 JavaScript 이벤트 리스너에서 사용하는 event라는 특수 데이터 영역 변수를 사용합니다. 예를 들어 사용자가 구매 확인 버튼을 클릭할 때 전환 추적 태그를 실행할 수 있습니다. 이 기능은 이벤트가 발생할 때 dataLayer.push()를 호출하여 수행됩니다.

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

위 예시는 사용자가 버튼을 클릭했을 때 'login' 이벤트를 dataLayer에 추가하여 GTM이 해당 이벤트를 처리하도록 합니다.

 

동적 데이터 계층 변수 설정 예시

dataLayer.push() 메서드를 사용하여 동적 데이터 계층 변수를 설정할 수 있습니다. 이는 사용자가 선택한 값이나 방문자의 행동에 따라 실시간으로 변수를 추가하거나 업데이트할 수 있게 합니다.

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

위 예시는 사용자가 선택한 색상이나 변환 값을 동적으로 dataLayer에 추가하는 방법을 보여줍니다.

데이터 계층 변수 유지

웹 페이지 간에 데이터 계층 변수를 유지하려면 각 페이지 로드에서 dataLayer가 인스턴스화된 후 dataLayer.push()를 호출하여 변수를 데이터 계층에 푸시해야 합니다. 이는 사용자가 여러 페이지를 이동할 때도 동일한 변수를 유지할 수 있게 합니다.

// 1. dataLayer의 인스턴스화
window.dataLayer = window.dataLayer || [];

// 2. dataLayer에 변수 push하기
dataLayer.push({
  'event': 'Pageview',
  'pagePath': '/pancakes',
  'pageTitle': 'Pancake Event Signup',
  'visitorType': 'customer'
});

// 3. 해당 변수들을 담은 dataLayer와 함께 GTM 컨테이너 로드
(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');

위 예시는 각 페이지가 로드될 때 dataLayer에 페이지뷰 이벤트와 관련된 정보를 추가하는 방법을 보여줍니다. 데이터 영역 개체 내에서 선언된 각 변수는 방문자가 현재 페이지에 남아 있는 동안에만 지속됩니다. 모든 페이지의 데이터 영역에 동일한 변수 집합을 입력할 필요는 없지만 일관된 명명 규칙을 사용해야 합니다.

문제 해결

다음은 몇 가지 dataLayer 문제 해결 팁입니다.

• window.dataLayer 변수를 덮어쓰지 마세요.
• 데이터 영역을 직접 사용하는 경우 dataLayer = [{'item': 'value'}]와 같이 기존 값을 덮어쓰지 말고 window.dataLayer = window.dataLayer || [];를 사용해서 인스턴스화해야 합니다.
• dataLayer 가 선언된 이후에는 dataLayer.push({'item': 'value'})를 사용해서 추가적인 값을 추가해야 합니다.
• 객체 dataLayer 이름은 대소문자를 구분합니다. 적절한 대소문자 없이 변수나 이벤트를 푸시하려고 하면 푸시가 작동하지 않습니다.
• 모든 데이터 영역 변수 이름은 따옴표로 묶어야 합니다. 예를 들어 dataLayer.push({'new-variable': 'value'});와 같이 사용해야 합니다.
• 여러 페이지에서 동일한 개념에 대해 일관된 변수 이름을 사용해야 태그가 모든 위치에서 일관되게 실행될 수 있습니다. 예를 들어, dataLayer.push({'visitorType': 'low-value'});와 같이 사용해야 합니다.

사용자 정의 Data Layer 메서드

사용자 정의 메서드를 dataLayer에 추가하여 복잡한 데이터 조작을 수행할 수 있습니다. 예를 들어, 특정 시간 값을 설정하거나 가져오는 기능을 추가할 수 있습니다.

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

데이터 레이어 이름 바꾸기

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

gtag.js에서 dataLayer 이름 변경하기

URL에 "l"이라는 쿼리 매개변수를 추가하여 새 데이터 레이어 이름을 설정합니다(예: l=myNewName). Google 태그 스니펫의 모든 인스턴스를 dataLayer의 새 이름으로 업데이트합니다.

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

    function gtag() {
        myNewName.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'TAG_ID');
</script>

 

이름이 변경되면 데이터 영역에 대한 모든 참조(예: 스니펫 위에 데이터 영역을 선언할 때 또는 명령을 사용하여 데이터 영역에 이벤트 또는 동적 데이터 영역 변수를 푸시할 때)를 조정하여 사용자 지정 데이터 영역 이름을 반영해야 합니다.

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

참고: 페이지당 하나의 dataLayer 개체만 지원됩니다.

사용자 정의 datalayer 메서드

어떤 함수를 dataLayer에 푸시하면 이 함수가 추상 데이터 모델로 설정된 상태로 호출됩니다. 이 추상 데이터 모델은 key-value 저장소에 대한 값을 가져오고 설정할 수 있으며 dataLayer를 재설정하는 방법도 제공합니다.

중요: 사용자 지정 dataLayer 방법을 사용하려면 데이터를 dataLayer 변수에 직접 보내는 데 .push를 사용해야 합니다. gtag를 사용하면 함수가 유효하지 않은 명령으로 해석되어 무시됩니다.

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

// 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
window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
});

 

Sources

1. developers.google.com - 데이터 영역 | Tag Manager
2. analyticsmarketing.co.kr - [GTM기본] 6. 구글 태그관리자를 통해 네이버 공통/전환
3. marketers-growth.com - 데이터 레이어 (Data Layer) 총 정리
4. help.shopify.com - Google 태그 관리자 사용자 지정 픽셀 생성
5. blog.cloudflare.com - Workers를 이용해 서드파티 도구의 보안과 속도를 보장하는 방법
6. googleanalytics360.com - Audience – Geo_Location: 방문자 위치 확인