전자상거래 GA4 이벤트 설정 예시 코드

상품 상세 보기 페이지 삽입 코드 

<script type="text/javascript">
  dataLayer.push({
    'event': 'detail',
    'goodsInfo': [{
      'item_id': '{goodsView.goodsNo}',
      'item_name': '{=goodsView['goodsNm']}',
      'price': '{=gd_isset(goodsView['goodsPrice'],0)}'
    }]
  });
</script>

위와 같은 상황에서는 

goodsInfo라는 키워드로 변수를 GTM 변수로 만든다 

 

 

장바구니 추가 코드 

<script type="text/javascript">
  var addToCart = function () {
    dataLayer.push({
      'event': 'addToCart',
      'goodsInfo': [{
        'item_id': '{goodsView.goodsNo}',
        'item_name': '{=goodsView['goodsNm']}',
        'price': '{=gd_isset(goodsView['goodsPrice'],0)}',
        'quantity': goodsTotalCnt
      }]
    });
  }
  $('#cartBtn').click(addToCart);
</script>

 

주문서 작성 페이지 삽입 코드 

<script type="text/javascript">
  var goodsInfo = [
    <!--{ @ cartInfo }-->
      <!--{ @ .value_ }-->
        <!--{ @ ..value_ }-->
        {
          'item_id': '{=...goodsNo}',
          'item_name': '{=...goodsNm}',
          'quantity': {=...goodsCnt},
          'price': {=...price['goodsPrice']}
        },
        <!--{ / }-->
      <!--{ / }-->
    <!--{ / }-->
  ];

  dataLayer.push({
    'event': 'checkout',
    'goodsInfo': goodsInfo
  });
</script>

 

주문 완료 페이지 삽입 코드 

<script type="text/javascript">
  var txInfo = {
    'transactionId': '{orderInfo.orderNo}',
    'totalRevenue': {=orderInfo.settlePrice},
    'shippingFee': {=gd_isset(orderInfo.totalDeliveryCharge)},
    'firstOrder': '{=orderInfo.firstSaleFl}'
  };

  var goodsInfo = [
    <!--{ @ orderInfo.goods }-->
      {
      'item_id': '{=.goodsNo}',
      'item_name': '{=.goodsNm}',
      'quantity': {=.goodsCnt},
      'price': {=.goodsPrice}
      },
    <!--{ / }-->
  ];

  dataLayer.push({
    'event': 'purchase',
    'txInfo': txInfo,
    'goodsInfo': goodsInfo
  });
</script>

 

추가 자료