dataLayer Tutorial (2)

지난 글에 이어서 dataLayer 에 대해 좀 더 깊이있게 살펴보겠습니다.

이번 글에서는 dataLayer 변수에서 사용할 수 있는 여러가지 버전을 설명드리겠습니다.

사실, 이번 글에서는 개발에서 쓰이는 용어들이 많이 나옵니다. 이해가 힘들 수도 있지만 그래도 전체적인 맥락을 이해하시면 좋을 듯 싶습니다.

목차.

1. dataLayer 버전

1.1 버전1

<script> 
window.dataLayer = window.dataLayer || []; 
window.dataLayer.push({ 
"attributes": { 
'pagePostAuthor': '홍길동' 
} 
}); 
</script>

버전1은 매우 제한적이며 중복된 값을 가질 수 없습니다. dataLayer 변수를 생성하고 pagePostAuthor에 저장된 정보에 액세스 하려고 하면 객체의 루트에 있지 않기 때문에(대신 attributes 키의 직계 하위 항목임) 게시물 작성자의 이름을 가져오지 못하게 됩니다.

따라서 게시물 작성자의 이름을 가져오려면 dataLayer 의 개체가 아래와 같아야 합니다.

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'pagePostAuthor': '홍길동'
});
</script>

위의 소스는 attributes 키가 없으며 pagePostAuthor가 루트 수준에 있습니다.

그리고, 더 중요한 부분은 데이터를 dataLayer 로 push하면 전체 개체를 덮어씁니다.

다음 예는 서로 다른 두개의 dataLayer push 코드가 있다고 가정하고 첫 번째 push에는 pagePostAuthor만 포함되고 다른 push에는 pageCategory 및 pagePostType이라는 두개의 키가 더 포함됩니다.

<script>
//첫 번째 Push
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'authorData' : {
'pagePostAuthor': '홍길동'
}
});

//두 번째 Push
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'authorData' : {
'pageCategory': 'GTM TIP',
'pagePostType': 'post'
}
});
</script>

위의 소스 최종 결과로 dataLayer 에는 pageCategory 및 pagePostType 이라는 두개의 값만 있습니다.

이유는 authorData 개체에 대한 두 번째 push가 첫 번째 push의 데이터를 완전히 덮어썼기 때문입니다.

결론적으로, dataLayer 버전1은 이전 값 없이 “깨끗한” dataLayer를 가지고 싶을 때 사용하는 버전이라고 생각하시면 됩니다.

1.2 버전2

두 번째 버전은 훨씬 더 유연합니다. 중첩된 값과 배열에 액세스하고 데이터를 병합할 수 있습니다.

아래는 버전2를 사용한 경우 입니다. 즉, 모두 dataLayer 에 남아있게 됩니다.

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'authorData' : {
   'pagePostAuthor': '홍길동',
   'pageCategory': 'GTM TIP',
   'pagePostType': 'post'
   }
});
</script>

2. 또 다른 dataLayer 버전이 있을까요?

위에서 알아본 버전을 다시 정리하면…

< 버전1 >

pagePostAuthor 키가 루트 수준에 있는 예입니다.

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'pagePostAuthor': '홍길동'
});
</script>

< 버전 2 >

pagePostAuthor 키가 속성 키의 자손인 예입니다.

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   'attributes': {
    'pagePostAuthor': '홍길동'
   }
});
</script>

< 버전3 >

ecommerce.items 키의 자손인 두개의 배열이 있습니다.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
   event: 'purchase',
   ecommerce: {
    transaction_id: 'T_12345',
    affiliation: 'Google Merchandise Store',
    value: 25.42,
    tax: 4.90,
    shipping: 5.99,
    currency: 'USD',
    coupon: 'SUMMER_SALE',
    items: [
     {
      item_id: 'SKU_12345',
      item_name: 'Stan and Friends Tee',
      item_category: 'Apparel',
      price: 9.99,
      quantity: 1
     },
     {
      item_id: 'SKU_12346',
      item_name: 'Google Grey Women's Tee',
      item_category: 'Apparel',
      price: 20.99,
      quantity: 1
     }]
    }
   });

지금까지 3가지 버전을 통해 dataLayer 변수를 살펴봤습니다.

그럼, 이번엔 하위(자손) 키에서 데이터를 어떻게 가져올 수 있을까요?

3. 하위 키에서 데이터 가져오기

이번 섹션은 이해하기 힘들 수 있을 것 같아서 가능한 한 비 기술적인 용어들로 설명드리겠습니다.

아래 예에서 attributes 첫 번째 수준에 있고 pagePostAuthor가 두 번째 수준에 있을 알 수 있습니다.

여기에서 pagePostAuthor는 attributes 키 내에 중첩되어 있으므로 하위 키 입니다.

{
 attributes: {
   pagePostAuthor: '홍길동'
 }
}

위 소스에서 값을 가져오려면 구글태그관리자(GTM) 내에서 설정 하나를 약간 변경해야 합니다.

① pagePostAuthor 대신 attributes.pagePostAuthor를 dataLayer 이름으로 입력해야 합니다.

만약, pagePostAuthor 에도 하위 키가 있으면 어떻게 될까요?

{
  attributes: {
    pagePostAuthor: {
      authorName: '홍길동',
      authorTag: 'Google Tag Manager'
    }
  }
}

위 소스 특정 키에 대한 전체 경로는 attributes.pagePostAuthor.authorName 등으로 정의됩니다.

모든 레벨은 점으로 구분되어야 합니다.

4. 배열 구성원에서 데이터 가져오기

GA4로 전자상거래 추적을 구현할 때 가장 많이 사용되는 dataLayer는 주문 데이터를 dataLayer로 push하는 부분입니다.

Google의 가이드라인에 따라서 살펴보겠습니다. (아래의 소스는 purchase 이벤트의 dataLayer 입니다)

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 event: 'purchase',
 ecommerce: {
   transaction_id: 'T_12345',
   affiliation: 'Google Merchandise Store',
   value: 25.42,
   tax: 4.90,
   shipping: 5.99,
   currency: 'USD',
   coupon: 'SUMMER_SALE',
   items: [
    {
     item_id: 'SKU_12345',
     item_name: 'Stan and Friends Tee',
     item_category: 'Apparel',
     price: 9.99,
     quantity: 1
    },
    {
     item_id: 'SKU_12346',
     item_name: 'Google Grey Women's Tee',
     item_category: 'Apparel',
     price: 20.99,
     quantity: 1
    }]
   }
 });

위의 소스에서 상품 가격을 구글태그관리자(GTM)를 통해 가져오는 설정을 해보겠습니다.

① ecommerce.items.price 변수 이름으로 설정합니다.

① “undefined” 라는 메시지와 함께 데이터를 가지고 올 수 없음을 나타냅니다. 즉, [그림 2]처럼 설정을 하고 나서 [미리보기]를 통해 살펴보면 동작하지 않는 것을 확인할 수 있습니다.

동작하지 않는 이유가 무엇일까요?

GA4 전자상거래 구매완료 스크립트를 살펴보면 ecommerce.items에는 2개의 item_name키, 2개의 price키 등이 있습니다. 그렇다면 구글태그관리자(GTM)는 내가 가져오고 싶어하는 price 값 중 어떤 상품의 price 값을 가져와야 할지 알지 못합니다.

그럼 해결방법은 무엇일까요?

javascript에서 첫 번째 상품 가격을 가져오려면 ecommerce.items[0].price (인덱스는 0부터 시작)를 사용해야 합니다.

하지만, 구글태그관리자(GTM)는 이 컨텍스트에서 대괄호([)를 지원하지 않으므로 점 표기법을 사용해야 합니다.

따라서, 아래의 그림과 같이 최종 키는 ecommerce.items.0.price 로 사용해야 합니다.

그리고, 구글태그관리자(GTM) 에서 dataLayer 변수 설정은 다음과 같습니다.

① dataLayer 변수 이름을 설정합니다.

[그림 5]와 같이 설정 후 [미리보기]를 통해 테스트를 진행하면 데이터가 수집되는 것을 확인할 수 있을 것입니다.

이렇게 해서 dataLayer 에 관련된 부분을 짧은 글을 통해 설명드렸습니다.

dataLayer는 개발 지식을 요구하는 부분이 생각보다 많습니다. 될 수 있으면 개발자와 함께 보시면서 이해를 하시는 것을 추천드립니다.

FAQ

---

---

---