고도몰 상품 리스트 조회 추적하기

2021년 1월 17일

GTM Enhanced Ecommerce

개요

고도몰 기반의 쇼핑몰에 GA의 향상된 전자상거래를 활용하여 쇼핑 행동을 추척하는 코드를 심는 작업이 필요했다.

나와 같이 헤매는 분이 없었으면 해서 고도몰 기반 EE 작업을 시리즈로 하나씩 정리해 볼까 한다.

Measuring Product Impressions

Ecommerce Measurement: impressions

Accepts Data: array of impressionsFieldObjects

아래 References에 올린 docs를 보며 따라하는 게 전부이지만 그 나름대로 이해하기가 힘들었다. 처음에는 docs에 보이는 스크립트를 GTM에 추가하여 dataLayer까지 잘 push했으나 GA에서 보이지 않아 삽질을 꽤 오래했다.

결국 고도몰 디자인 페이지에 직접 스크립트를 삽입하는 방식을 시도해보았고, 이 방법은 꽤 좋은 결과를 보여주었다. (자바스크립트 코드가 로드되는 타이밍의 문제가 아니었나 싶다.)

고도몰 상품 리스트 페이지에 스크립트 추가하기

상품 리스트(goods/goods_list.html) 디자인 페이지 마지막 부분에 dataLayer에 상품 정보를 push하는 스크립트를 추가하자.

다음 스크립트는 스킨에 따라 얼마든지 변경될 수 있는 부분으로, 상품 정보를 가져오는 코드는 직접 작성해야 한다.

추가 후 dataLayer에 데이터가 잘 쌓였는지 console로 확인해보자.

<script>
    dataLayer.push({
      'ecommerce': {
        'currencyCode': 'KRW',
        'impressions': [
         {
           'name': 'Triblend Android T-Shirt',
           'id': '12345',
           'price': '15.25',
           'brand': 'Google',
           'category': 'Apparel',
           'variant': 'Gray',
           'list': 'Search Results',
           'position': 1
         },
         {
           'name': 'Donut Friday Scented T-Shirt',
           'id': '67890',
           'price': '33.75',
           'brand': 'Google',
           'category': 'Apparel',
           'variant': 'Black',
           'list': 'Search Results',
           'position': 2
         }]
      }
    });
</script>