전환 > 전자상거래 > 제품 실적, 매출실적, 제품목록실적

GTM을 향상된 전자 상거래 설정(2)

GTM을 활용하여 000webhost 템플릿의 구조에서 전자 상거래 데이터를 확보하기 위해서는 아래와 같은 단계를 거쳐야 한다. 

1단계 템플릿 소스 수정 

    템플릿 소스는 public_html/zyro/src/store/view/cart.php를 수정해야 한다.

    수정부분은 소스 하단 부분의 <button 태그 안에 id="purchase_button" 속성을 추가한다. 

<?php if (!$hasPaymentGateways && $hasForm): ?>

    <div class="wb-store-pay-btns" data-ng-show="main.flowStep === 3" data-payment-gateways="false" data-totals="main.totals">

        <?php if ($hasFormFile): ?>

            <?php if (empty($items)): ?> <div style="display: none;"> <?php endif; ?>

                <?php require $hasFormFile; ?>

            <?php if (empty($items)): ?> </div> <?php endif; ?>

        <?php endif; ?>

    </div>

<?php elseif ($hasPaymentGateways): ?>

    <div class="wb-store-pay-wrp" data-ng-if="main.flowStep === 3" data-payment-gateways="true">

        <div class="wb-store-pay-sep"></div>

        <div style="margin: 60px 0 30px 0;"></div>

        <!-- <h3 style="margin: 60px 0 0 0;"><?php echo $this->__('Choose Payment Method'); ?></h3> -->

        <!-- <?php $this->renderView($hasPaymentGatewaysFile, $hasPaymentGatewaysParams); ?> -->

        <button class="btn btn-success btn-lg" type="button"

                data-ng-disabled="main.loading"

                data-ng-click="main.purchase()"

                id="purchase_button">   

                Purchase

        </button>

    </div>

<?php endif; ?>

2단계 GTM 변수 추가 

   - 맞춤 자바 스크립트 설정 

    변수 메뉴에서  사용자 정의 변수에서 "새로 만들기" 버튼을 클릭하고 

    아래 그림 처럼  변수명을 ee.purchase 로 정하고 변수 유형을 " 맞춤 자바 스크립트" 로 설정 한다.

추가하여 할 코드는 아래와 같다. 

function(){

var cartSize = document.querySelectorAll('[id="datangrepeat"]').length;  

  var product_list = [];

  var coupon_item = '제휴 쿠폰';

for (var i = 0; i < cartSize; i++) {

//console.log("i : " + i);

              var productlist = document.querySelectorAll('[id="datangrepeat"]')[i];

  var prodname = $(productlist).find('.wb-store-cart-table-name')[0];

var item_sku = $(prodname).find(".item-sku").text();

var item_name = $(prodname).find(".item-name").text();

var item_price = $(prodname).find(".item-price").text();

item_price = item_price.replace(/[^0-9.]/g, "");

      

var item_qty = $($('.wb-store-cart-table-quantity')[i]).text();

              item_qty = item_qty.replace(/[^0-9.]/g,"");

     

              var brand = "Test Shop";

                 

       //디버그용

console.log("item_sku :" + item_sku);

console.log("item_name :" + item_name.trim());

console.log("item_price :" + item_price);

console.log("item_qty :" + item_qty);

      

      product_list.push(

        { "name": item_name

             , "id": item_sku

             , "price": item_price

             , "brand": brand

             , "category" : ''

             , "variant" :''

             , "quantity": item_qty

             , "category":''

             , "coupon" : coupon_item

            }

);

}

  

  var totals_revenue = ($('#total-revenue').text()).replace(/[^0-9.]/g,"");

  var tax_vat = Math.round(((totals_revenue/1.1)*0.1)); 

        var shipping_fee = Math.round((totals_revenue)*0.03);

  console.log(totals_revenue + ": "+ tax_vat + " :"+ shipping_fee);

  

  var dt = new Date();

  var txId = dt.toISOString();

        var affilation = 'My Store';

        var revenue = totals_revenue;

  var tax = tax_vat; //전체 금액의 10%

  var shipping = shipping_fee;//전체금액의 3%

  var coupon = 'Winter_sale';

  

       var ecommerceData = {

          'event': 'PurChase_결제',

  'ecommerce' :{

'purchase':{

'actionField': {

              'id': txId,// Transaction ID. Required for purchases and refunds.

          'affiliation': affilation,

              'revenue': revenue, // Total transaction value (incl. tax and shipping)

              'tax': tax,

              'shipping':shipping ,

              'coupon': coupon

},

          'products':product_list

}

}

}

    return  ecommerceData;

}

위 코드를 추가한다. 

3단계 태그 구성 

  태그는  아래 그림처럼 설정한다. 

  

위 2단계에서 구성한 사용자 변수를 셋팅한다. {{ee.purchase}} 

    

4단계 트리거  구성 

 트리거는 아래 그림과 같이 설정한다. 

위 단계를 마치고 저장을 한 후 제출을 눌러 템플릿 홈페이지에 태그를 적용한다. 

위 절차를 진행한 후 

각자  템플릿 사이트를 방문, 

샵메뉴를 누르고 제품 리스트에서 제품을 선택,  제품 상세 페이지에서 장바구니 추가 하고 checkout 버튼을 클릭

빌링 정보를 입력하고 checkout 버튼을 누르면 checkout 단계중 최종 단계인 정보확인 페이지 나오게 되며 버튼이 "purchase" 로 바뀌게 되며 

이를 누르면 결제가 완료된다. 

위 단계를 진행한 후 구글 어낼리틱스 상에서 아래와 같은 데이터를 확인 할 수 있다. 

쇼핑 행동 보고서 

결제 행동 보고서

제품실적 보고서

샘플소스 위치