전환 > 전자상거래 > 쇼핑 행동, 결제 행동

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

   - 000webhost  E-commerce 템플릿을 활용 한 예제로 향상된 전자 상거래 보고서 중 쇼핑 행동, 결제 행동에 대한 GTM 설정 부분을 다룬다. 

GTM 설정을 통해 나온 보고서 

<실습>

1. store.dat, details.php, cart.php 다운로드 

     샘플코드 있는곳 

2. DataLayer를 이해하기 

  details.php 소스에 dataLayer 셋팅 

<script>

var dataLayer = dataLayer || [];

    

    //제품 상세 정보 View를 측정

    var pcats = $('#store_pcats').text();

    var store_id = $('#store_id').text();

    var store_name = $('#store_name').text();

    var store_sku = $('#store_sku').text();

    var store_price = $("#store_price").text();

    var store_quantity = $('#store_quantity').val();

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

    // console.log("store_id :" + store_id.trim());

    // console.log("store_name :" + store_name.trim());

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

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

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

    dataLayer.push({

        'PageType':'productDetail',

        'product': {

            "id":store_id.trim(),

            "name":store_name.trim(),

            "price" : store_price,

            "sku" :store_sku,

            "category" : pcats,

            "quantity" : store_quantity

        }       

    });

</script>

3. details.php 소스 수정하기 

   <?php // if (isset($imageBlockWidth) && $imageBlockWidth > 0) echo ' style="margin-left: '.$imageBlockWidth.'px;"'; ?>>

        <div class="wb-store-name" id="store_name">

            <?php echo $this->noPhp(tr_($item->name)); ?>

        </div>

        <div class="wb-store-label" id="store_id">

            <?php echo $this->noPhp($item->id); ?>

        </div>

        

        <table class="wb-store-details-table" style="width: 100%;">

            <tbody>

                <?php if ($cats): ?>

                <tr>

                    <td style="padding-right: 20px;">

                        <div class="wb-store-pcats"><div class="wb-store-label"><?php echo $this->__('Category'); ?>:</div></div>

                    </td>

                    <td><div class="wb-store-pcats" id="store_pcats"><?php echo $this->noPhp($cats); ?></div></td>

                </tr>

                <?php endif; ?>

                

                <?php if ($item->sku): ?>

                <tr>

                    <td style="padding-right: 20px;">

                        <div class="wb-store-sku"><div class="wb-store-label"><?php echo $this->__('SKU'); ?>:</div></div>

                    </td>

                    <td><div class="wb-store-sku" id="store_sku"><?php echo $this->noPhp($item->sku); ?></div></td>

                </tr>

                <?php endif; ?>

                <?php if ($item->price && ($priceStr = $this->formatPrice($item->price))): ?>

                <tr>

                    <td style="padding-right: 20px;">

                        <div class="wb-store-price"><div class="wb-store-label"><?php echo $this->__('Price'); ?>:</div></div>

                    </td>

                    <td><div class="wb-store-price" id="store_price"><?php echo $priceStr; ?></div></td>

                </tr>

                <?php endif; ?>

                <?php foreach ($custFields as $field): ?>

                <tr>

                    <td style="padding-right: 20px;">

                        <div class="wb-store-field"><div class="wb-store-label"><?php echo $this->noPhp($field->name); ?>:</div></div>

                    </td>

                    <td><div class="wb-store-field" ><?php echo $this->noPhp($field->value); ?></div></td>

                </tr>

                <?php endforeach; ?>

                

            </tbody>

        </table>

        <?php if ($hasCart){ ?>

        <div class="wb-store-form-buttons form-inline">

            <div class="form-group">

                <input class="wb-store-cart-add-quantity form-control" id="store_quantity" type="number" min="1" step="1" value="1" />

            </div>

            <button type="button" class="wb-store-cart-add-btn btn btn-success"><?php echo $this->__('Add to cart'); ?></button>

        </div>

        <?php } ?>

        <?php if (tr_($item->description)): ?>

        <div class="wb-store-desc" style="max-width: 768px;">

            <div class="wb-store-field" style="margin-bottom: 10px;"><div class="wb-store-label">

<?php echo $this->__('Description') ?></div></div>

            <?php $description = $this->noPhp(tr_($item->description)); ?>

            <div<?php if (!preg_match("#<(p|u|i|a|b|em|hr|br|ul|li|tr|td|th|h[1-6]|div|span|table|strong)\\b.*>#isuU", $description)) echo ' style="white-space: pre-line;"'; ?>><?php echo $description; ?></div>

        </div>

        <?php endif; ?>

        

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

            <?php if ($hasFormFile) require $hasFormFile; ?>

        <?php endif; ?>

    </div>

 각 상품 아이템의  요소를 찾아 id="store_id" 등 추가하여 소스를 변경한다.  

4. GTM 설정 

  실습 합니다.