อีคอมเมิร์ซที่เพิ่มประสิทธิภาพสำหรับ Tag Manager

คู่มือนี้อธิบายวิธีใช้ฟีเจอร์อีคอมเมิร์ซที่เพิ่มประสิทธิภาพของ Universal Analytics โดยใช้ Google Tag Manager บนเว็บไซต์

ภาพรวม

อีคอมเมิร์ซที่เพิ่มประสิทธิภาพของ Google Analytics ช่วยให้คุณส่งข้อมูลการแสดงผลผลิตภัณฑ์ โปรโมชัน และการขายไปพร้อมกับเหตุการณ์และการดูหน้าเว็บของ Google Analytics ได้ ใช้การดูหน้าเว็บเพื่อติดตามการแสดงผลผลิตภัณฑ์และการซื้อผลิตภัณฑ์ และใช้เหตุการณ์ในการติดตามขั้นตอนการชําระเงินและการคลิกผลิตภัณฑ์

ก่อนที่คุณจะเริ่ม

เราขอแนะนำให้อ่านส่วนประเภทข้อมูลและการดำเนินการอีคอมเมิร์ซที่เพิ่มประสิทธิภาพของคู่มือสำหรับนักพัฒนาอีคอมเมิร์ซที่เพิ่มประสิทธิภาพเพื่อช่วยในการวางแผนการนำไปใช้งาน คำแนะนำนี้ช่วยให้คุณเข้าใจว่าช่องใดที่จำเป็นและไม่บังคับสำหรับการโต้ตอบอีคอมเมิร์ซแต่ละครั้งที่คุณต้องการวัด

การเปิดใช้อีคอมเมิร์ซที่เพิ่มประสิทธิภาพ

ในการใช้งานส่วนใหญ่ คุณควรเปิดใช้อีคอมเมิร์ซที่เพิ่มประสิทธิภาพในแท็กเหตุการณ์หรือการดูหน้าเว็บของ Universal Analytics แต่ละแท็ก คุณมี 2 ตัวเลือกในการเปิดใช้อีคอมเมิร์ซที่เพิ่มประสิทธิภาพในหน้าจอตัวแก้ไขแท็กของอินเทอร์เฟซเว็บ ดังนี้

  • ใช้งานโดยใช้ชั้นข้อมูล (แนะนำ)
  • การใช้งานโดยใช้มาโคร JavaScript ที่กำหนดเอง

แม้ว่าทั้ง 2 วิธีจะให้ฟังก์ชันการทำงานของอีคอมเมิร์ซที่เทียบเท่ากัน แต่เราขอแนะนำให้ทุกเว็บไซต์ที่รองรับชั้นข้อมูลใช้วิธีชั้นข้อมูล คู่มือนี้จะแสดงเมธอดชั้นข้อมูลเป็นค่าเริ่มต้น ส่วนการใช้มาโคร JavaScript ที่กำหนดเองจะอยู่ที่ส่วนท้ายของคู่มือนี้

การใช้ชั้นข้อมูล

ส่วนต่อไปนี้จะแสดงวิธีใช้ชั้นข้อมูลเพื่อวัดกิจกรรมอีคอมเมิร์ซที่เพิ่มประสิทธิภาพต่อไปนี้

การล้างออบเจ็กต์อีคอมเมิร์ซ

เราขอแนะนำให้คุณใช้คำสั่งต่อไปนี้เพื่อล้างออบเจ็กต์อีคอมเมิร์ซก่อนที่จะพุชเหตุการณ์อีคอมเมิร์ซไปยังชั้นข้อมูล การล้างออบเจ็กต์จะป้องกันไม่ให้เหตุการณ์อีคอมเมิร์ซหลายเหตุการณ์ในหน้าเว็บกระทบกัน

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.

การวัดการแสดงผลของผลิตภัณฑ์

  • การวัดอีคอมเมิร์ซ: impressions
  • ยอมรับข้อมูล: อาร์เรย์ของ impressionFieldObjects

วัดการแสดงผลผลิตภัณฑ์โดยใช้การดำเนินการ impression และ impressionFieldObjects อย่างน้อย 1 รายการ ตัวอย่างต่อไปนี้ถือว่ารายละเอียดเกี่ยวกับผลิตภัณฑ์ที่แสดงในหน้าหนึ่งๆ เป็นที่รู้จักเมื่อโหลดหน้าเว็บ

<script>
// Measures product impressions and also tracks a standard
// pageview for the tag configuration.
// Product impressions are sent by pushing an impressions object
// containing one or more impressionFieldObjects.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'currencyCode': 'EUR',                       // Local currency is optional.
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',       // Name or ID is required.
       '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>

การวัดการคลิกผลิตภัณฑ์

  • การวัดอีคอมเมิร์ซ: click
  • ยอมรับข้อมูล: list, อาร์เรย์ของ productFieldObjects

วัดการคลิกลิงก์ผลิตภัณฑ์โดยการพุชการดำเนินการ click ไปยังชั้นข้อมูล พร้อมกับ productFieldObject เพื่อแสดงถึงผลิตภัณฑ์ที่คลิก ดังตัวอย่างต่อไปนี้

<script>
/**
 * Call this function when a user clicks on a product link. This function uses the event
 * callback datalayer variable to handle navigation after the ecommerce data has been sent
 * to Google Analytics.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'productClick',
    'ecommerce': {
      'click': {
        'actionField': {'list': 'Search Results'},      // Optional list property.
        'products': [{
          'name': productObj.name,                      // Name or ID is required.
          'id': productObj.id,
          'price': productObj.price,
          'brand': productObj.brand,
          'category': productObj.cat,
          'variant': productObj.variant,
          'position': productObj.position
         }]
       }
     },
     'eventCallback': function() {
       document.location = productObj.url
     }
  });
}
</script>

การวัดรายละเอียดผลิตภัณฑ์

  • การวัดอีคอมเมิร์ซ: detail
  • ยอมรับข้อมูล: list, อาร์เรย์ของ productFieldObjects

วัดมุมมองรายละเอียดผลิตภัณฑ์โดยการพุชการดำเนินการ detail ไปยังชั้นข้อมูล รวมถึง productFieldObjects อย่างน้อย 1 รายการที่แสดงถึงผลิตภัณฑ์ที่กำลังดูอยู่

<script>
// Measure a view of product details. This example assumes the detail view occurs on pageload,
// and also tracks a standard pageview of the details page.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},    // 'detail' actions have an optional list property.
      'products': [{
        'name': 'Triblend Android T-Shirt',         // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
   }
});
</script>

การวัดการเพิ่มเติมหรือการนำออกจากรถเข็นช็อปปิ้ง

  • การวัดอีคอมเมิร์ซ: add, remove
  • ยอมรับข้อมูล: list, อาร์เรย์ของ productFieldObjects

ในทํานองเดียวกัน คุณวัดการเพิ่มหรือนำออกจากรถเข็นช็อปปิ้งได้โดยใช้ actionFieldObject add หรือ remove และรายการ productFieldObjects

การเพิ่มผลิตภัณฑ์ลงในรถเข็นช็อปปิ้ง

// Measure adding a product to a shopping cart by using an 'add' actionFieldObject
// and a list of productFieldObjects.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': 'EUR',
    'add': {                                // 'add' actionFieldObject measures.
      'products': [{                        //  adding a product to a shopping cart.
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1
       }]
    }
  }
});

การนำผลิตภัณฑ์ออกจากรถเข็นช็อปปิ้ง

// Measure the removal of a product from a shopping cart.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'event': 'removeFromCart',
  'ecommerce': {
    'remove': {                               // 'remove' actionFieldObject measures.
      'products': [{                          //  removing a product to a shopping cart.
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
      }]
    }
  }
});

การวัดผลโปรโมชัน

คุณจะวัดได้ทั้งการแสดงผลและการคลิกจากโปรโมชันในเว็บไซต์ภายใน เช่น แบนเนอร์ที่แสดงในเว็บไซต์เองที่โฆษณาการลดราคาผลิตภัณฑ์บางส่วน หรือข้อเสนอจัดส่งฟรี

การวัดการแสดงผลของโปรโมชัน

  • การวัดอีคอมเมิร์ซ: promoView
  • ยอมรับข้อมูล: อาร์เรย์ของ promoFieldObjects

หากต้องการวัดการแสดงผลของโปรโมชัน ให้ตั้งค่าคีย์ promoView ในชั้นข้อมูลอีคอมเมิร์ซเป็น promoFieldObject ที่อธิบายโปรโมชันที่แสดงต่อผู้ใช้ในหน้าเว็บ ดังนี้

<script>
// An example of measuring promotion views. This example assumes that
// information about the promotions displayed is available when the page loads.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'promoView': {
      'promotions': [                     // Array of promoFieldObjects.
       {
         'id': 'JUNE_PROMO13',            // ID or Name is required.
         'name': 'June Sale',
         'creative': 'banner1',
         'position': 'slot1'
       },
       {
         'id': 'FREE_SHIP13',
         'name': 'Free Shipping Promo',
         'creative': 'skyscraper1',
         'position': 'slot2'
       }]
    }
  }
});
</script>

การวัดการคลิกของโปรโมชัน

หากต้องการวัดการคลิกโปรโมชัน ให้ส่งการดำเนินการ promoClick ไปยังชั้นข้อมูลด้วยอาร์เรย์ที่มี promoFieldObject ที่อธิบายโปรโมชันที่คลิก ดังนี้

<script>
/**
 * Call this function when a user clicks on a promotion. This function uses the eventCallBack
 * datalayer variable to handle navigation after the ecommerce data is sent to Google Analytics.
 *
 * @param {Object} promoObj An object representing an internal site promotion.
 */
function onPromoClick(promoObj) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'promotionClick',
    'ecommerce': {
      'promoClick': {
        'promotions': [
         {
           'id': promoObj.id,                         // Name or ID is required.
           'name': promoObj.name,
           'creative': promoObj.creative,
           'position': promoObj.pos
         }]
      }
    },
    'eventCallback': function() {
      document.location = promoObj.destinationUrl;
    }
  });
}
</script>

การวัดการชำระเงิน

หากต้องการวัดแต่ละขั้นตอนในกระบวนการชำระเงิน คุณต้องทำดังนี้

  1. วัดแต่ละขั้นตอนของกระบวนการชำระเงินโดยใช้การดำเนินการ checkout
  2. วัดตัวเลือกขั้นตอนการชำระเงินโดยใช้การดำเนินการ checkout_option (หากมี)
  3. (ไม่บังคับ) ตั้งชื่อขั้นตอนที่ใช้งานง่ายสำหรับรายงาน Funnel การชำระเงินด้วยการกำหนดค่าการตั้งค่าอีคอมเมิร์ซในส่วนผู้ดูแลระบบของอินเทอร์เฟซเว็บ

1. การวัดขั้นตอนการเช็คเอาต์

  • การวัดอีคอมเมิร์ซ: checkout
  • ยอมรับข้อมูล: step, อาร์เรย์ของ productFieldObjects

หากต้องการวัดกระบวนการชำระเงิน ซึ่งอาจรวมถึงปุ่มชำระเงินและหน้าชำระเงินอย่างน้อย 1 หน้าที่ผู้ใช้ป้อนข้อมูลการจัดส่งและการชำระเงิน ให้ใช้การดำเนินการ checkout และช่อง step เพื่อระบุว่าระบบกำลังวัดขั้นตอนใดในกระบวนการชำระเงิน คุณยังใช้ช่อง option เพื่อระบุข้อมูลเพิ่มเติมเกี่ยวกับหน้าเว็บได้ เช่น ประเภทการชำระเงินที่ผู้ใช้เลือก

<script>
/**
 * A function to handle a click on a checkout button. This function uses the eventCallback
 * data layer variable to handle navigation after the ecommerce data has been sent to Google Analytics.
 */
function onCheckout() {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'checkout',
    'ecommerce': {
      'checkout': {
        'actionField': {'step': 1, 'option': 'Visa'},
        'products': [{
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
       }]
     }
   },
   'eventCallback': function() {
      document.location = 'checkout.html';
   }
  });
}
</script>

2. การวัดตัวเลือกขั้นตอนการชำระเงิน

  • การวัดอีคอมเมิร์ซ: checkout_option
  • ยอมรับข้อมูล: step, option

ตัวเลือกการชำระเงินมีประโยชน์ในกรณีที่คุณวัดขั้นตอนการเช็คเอาต์ไปแล้ว แต่ต้องการบันทึกข้อมูลเพิ่มเติมเกี่ยวกับขั้นตอนการชําระเงินเดียวกัน เช่น วิธีการจัดส่งที่ผู้ใช้เลือก หากต้องการวัดค่านี้ ให้ใช้การดําเนินการ checkout_option ควบคู่ไปกับช่อง step และ option

<script>
/**
 * A function to handle a click leading to a checkout option selection.
 */
function onCheckoutOption(step, checkoutOption) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'checkoutOption',
    'ecommerce': {
      'checkout_option': {
        'actionField': {'step': step, 'option': checkoutOption}
      }
    }
  });
}
</script>

3. การกำหนดค่า Funnel การชำระเงิน

คุณสามารถกำหนดชื่อที่สื่อความหมายซึ่งจะใช้ในรายงานของแต่ละขั้นตอนในกระบวนการชำระเงินได้ หากต้องการกำหนดค่าชื่อเหล่านี้ ให้ไปที่ส่วนผู้ดูแลระบบของอินเทอร์เฟซเว็บ Google Analytics เลือกข้อมูลพร็อพเพอร์ตี้ (โปรไฟล์) และคลิกการตั้งค่าอีคอมเมิร์ซ ทำตามวิธีการตั้งค่าอีคอมเมิร์ซเพื่อติดป้ายกำกับขั้นตอนการเช็คเอาต์แต่ละขั้นที่คุณต้องการติดตาม

การตั้งค่าอีคอมเมิร์ซในอินเทอร์เฟซผู้ดูแลระบบ Google Analytics Funnel การชําระเงินมี 4 ขั้นตอนดังนี้ 1. ตรวจสอบรถเข็น, 2. รวบรวมข้อมูลการชำระเงิน, 3. ยืนยันรายละเอียดการซื้อ, 4. ใบเสร็จ
ภาพที่ 1: การตั้งค่าอีคอมเมิร์ซ, Funnel การชําระเงิน

การวัดการซื้อ

  • การวัดอีคอมเมิร์ซ: purchase
  • ยอมรับข้อมูล: id (รหัสธุรกรรม) อาร์เรย์ของ productFieldObjects

พุชรายละเอียดธุรกรรมไปยังชั้นข้อมูลโดยใช้การดำเนินการ purchase ร่วมกับ event ซึ่งจะเริ่มการทำงานของแท็กที่เปิดใช้อีคอมเมิร์ซที่เพิ่มประสิทธิภาพ ในตัวอย่างนี้ เราจะทราบรายละเอียดธุรกรรมในขณะที่โหลดหน้าเว็บ และระบบจะส่งมาพร้อมกับการดูหน้าเว็บเมื่อสคริปต์ gtm.js แสดงผล

<script>
// Send transaction data with a pageview if available
// when the page loads. Otherwise, use an event when the transaction
// data becomes available.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': 'T12345',                         // Transaction ID. Required for purchases and refunds.
        'affiliation': 'Online Store',
        'revenue': '35.43',                     // Total transaction value (incl. tax and shipping)
        'tax':'4.90',
        'shipping': '5.99',
        'coupon': 'SUMMER_SALE'
      },
      'products': [{                            // List of productFieldObjects.
        'name': 'Triblend Android T-Shirt',     // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1,
        'coupon': ''                            // Optional fields may be omitted or set to empty string.
       },
       {
        'name': 'Donut Friday Scented T-Shirt',
        'id': '67890',
        'price': '33.75',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Black',
        'quantity': 1
       }]
    }
  }
});
</script>

การวัดการคืนเงิน

  • การวัดอีคอมเมิร์ซ: refund
  • ยอมรับข้อมูล: id (รหัสธุรกรรม) อาร์เรย์ของ productFieldObjects

หากต้องการวัดการคืนเงินเต็มจำนวนของธุรกรรม ให้กด refund actionFieldObject พร้อมรหัสธุรกรรมของธุรกรรมที่จะคืนเงิน:

<script>
// Refund an entire transaction by providing the transaction ID. This example assumes the details
// of the completed refund are available when the page loads:
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'refund': {
      'actionField': {'id': 'T12345'}         // Transaction ID. Required for purchases and refunds.
    }
  }
});
</script>

หากต้องการวัดการคืนเงินบางส่วน ให้เพิ่มรายการ productFieldObjects รวมถึงรหัสผลิตภัณฑ์และจํานวนที่จะคืนเงิน ดังนี้

<script>
// Measure a partial refund by providing an array of productFieldObjects and specifying the ID and
// quantity of each product being returned. This example assumes the partial refund details are
// known at the time the page loads:
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'refund': {
      'actionField': {'id': 'T12345'},        // Transaction ID.
      'products': [
            {'id': 'P4567', 'quantity': 1},   // Product ID and quantity. Required for partial refunds.
            {'id': 'P8901','quantity': 2}
       ]
     }
  }
});
</script>

มิติข้อมูลที่กำหนดเองระดับผลิตภัณฑ์ที่ส่ง

หากต้องการส่งมิติข้อมูลที่กําหนดเองระดับผลิตภัณฑ์ไปยังออบเจ็กต์อีคอมเมิร์ซ ให้ใช้เครื่องหมายต่อไปนี้เพื่อเพิ่มลงในผลิตภัณฑ์

  dimensionn

โดยที่ n เป็นจํานวนธรรมชาติ เช่น 

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      ...

      'products': [{
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'dimension1': 'Same day delivery'
       }]
     }
   }
});
</script>

การส่งเมตริกที่กำหนดเองระดับผลิตภัณฑ์

หากต้องการส่งเมตริกที่กำหนดเองซึ่งกำหนดขอบเขตระดับผลิตภัณฑ์ไปยังออบเจ็กต์อีคอมเมิร์ซ ให้ใช้คำอธิบายต่อไปนี้เพื่อเพิ่มลงในผลิตภัณฑ์

  metricn

โดยที่ n เป็นจํานวนธรรมชาติ เช่น 

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      ...

      'products': [{
        'name': 'Goal Flow Garden Hose',
        'id': 'p001',
        'brand': 'Google Analytics',
        'category': 'Home Goods',
        'variant': 'Green',
        'price': '20',
        'quantity': 1,
        'metric3': '10'  // Custom metric 'Cost'
       }]
     }
   }
});
</script>

การรวมการแสดงผลและการกระทำ

ในกรณีที่มีทั้งการแสดงผลผลิตภัณฑ์และการดำเนินการ คุณจะรวมและวัดผลลัพธ์ใน Hit เดียวได้

ตัวอย่างด้านล่างแสดงวิธีวัดมุมมองรายละเอียดผลิตภัณฑ์ด้วยการแสดงผลผลิตภัณฑ์จากส่วนผลิตภัณฑ์ที่เกี่ยวข้อง

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',        // Name or ID is required.
       'id': '12345',
       'price': '15.25',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Gray',
       'list': 'Related Products',
       'position': 1
     },
     {
       'name': 'Donut Friday Scented T-Shirt',
       'id': '67890',
       'price': '33.75',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Black',
       'list': 'Related Products',
       'position': 2
     }],
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},  // 'detail' actions have an optional list property.
      'products': [{
        'name': 'Triblend Android T-Shirt',       // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
  }
});
</script>

การใช้มาโคร JavaScript ที่กำหนดเอง

หากเว็บไซต์ไม่รองรับชั้นข้อมูล คุณจะใช้มาโคร JavaScript ที่กำหนดเองเพื่อเรียกฟังก์ชันที่แสดงผลออบเจ็กต์ข้อมูลอีคอมเมิร์ซได้ ออบเจ็กต์นี้ควรใช้ไวยากรณ์ชั้นข้อมูลที่แสดงก่อนหน้านี้ในคู่มือนี้ เช่น

// A custom JavaScript macro that returns an ecommerceData object
// that follows the data layer syntax.
function() {
  var ecommerceData = {
    'ecommerce': {
      'purchase': {
        'actionField': {'id': 'T12345'},
        'products': [
            // List of productFieldObjects
        ],
        ... // Rest of the code should follow the data layer syntax.
     }
  };
  return ecommerceData;
}

หากคุณเลือกใช้มาโคร JavaScript ที่กำหนดเองแทนชั้นข้อมูล ให้เลือกเปิดใช้ฟีเจอร์อีคอมเมิร์ซที่เพิ่มประสิทธิภาพ แล้วตั้งค่าตัวเลือกอ่านข้อมูลจากมาโคร