[dataLayer] ecommerce 위한 GA4 구현: iframe 구조 웹사이트 가이드

최근에 대학 시절의 선배를 우연히 버스에서 만났습니다. 서로의 연락처를 교환한 후, 그는 제가 현재 일하고 있는 회사에서의 한 때의 고객사(제 첫 고객사!)에서 팀장으로 일하고 있다는 것을 알게 되었습니다. 놀랍게도, 그는 제가 함께 일했던 개발자가 서로 긴밀하게 협력했던 사람이었습니다. (세상 정말 좁네요!)

그 선배를 만나며, 그 회사를 위한 프로젝트가 기록할 가치 있는 주제라고 생각하여, 기억을 되살려 글을 써보았습니다.

해당 프로젝트에서는 상품 관련 페이지가 iframe으로 구성되어 있었고, 데이터를 수집하기 위해서는 GTM 스크립트가 있는 부모(parent) 페이지로 데이터를 전송해야 했습니다.

즉, iframe 페이지에서는 다음과 같이 데이터를 부모 페이지로 전송해야 했습니다.

<script>
try {
    var postObject = {
        event: 'purchase',
        data: {
            'coupon': 'string_value',
            'currency': 'string_value',
            'shipping': 'string_value',
            'transaction_id': 'string_value',
            'value': 'integer_value', 
            'items': [
                {
                    'item_id': 'string_value',
                    'item_name': 'string_value',
                    'item_variant': 'string_value',
                    'price': 'float_value',
                    'quantity': 'integer_value',
                }
            ]
        }
    };
    parent.postMessage(postObject, 'https://parent.alcolrithmhub.com');
} catch(e) {
   window.console && window.console.log(e);
}
</script>

 

 

부모 페이지에서는, 아래와 같이 iframe 페이지에서 받은 데이터를 수신하여 dataLayer에 넣어주어야 했습니다. 비슷한 상황을 다른 고객사에서도 경험한 적이 있는데, 그때 'data.data.value'가 무엇인지에 대한 문의를 받았습니다. 그때에는 data 변수에 iframe 페이지에서 전달된 데이터를 할당한다고 설명해 드렸습니다.

 

<script>
window.addEventListener("message", (event) => {
   if (event.data && event.data.event === "purchase") {
     var data = event.data;
   
     dataLayer.push({
       'event': 'purchase',
       'ecommerce': {
         'coupon': data.data.coupon,
         'currency': data.data.currency,
         'shipping': data.data.shipping,
         'transaction_id': data.data.transaction_id,
         'value': data.data.value, 
         'items': [
           {
                'item_id': data.data.item_id,
                'item_name': data.data.item_name,
                'item_variant': data.data.item_variant,
                'price': data.data.price,
                'quantity': data.data.quantity
           },
           {
             {{variable_key}}: {{variable_value}}
           }
         ]
       }
     });
   }
});
</script>

 

 

위와 같은 스크립트를 삽입하면 데이터를 정상적으로 수집할 수 있으며, 아래와 같은 결과를 확인할 수 있습니다.