คู่มือนี้อธิบายวิธีใช้ฟีเจอร์อีคอมเมิร์ซที่เพิ่มประสิทธิภาพของ 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>
การวัดการชำระเงิน
หากต้องการวัดผลแต่ละขั้นตอนในกระบวนการชำระเงิน คุณต้องทำดังนี้
- วัดแต่ละขั้นตอนของกระบวนการชำระเงินโดยใช้การดำเนินการ
checkout
- วัดตัวเลือกขั้นตอนการชำระเงินโดยใช้การดำเนินการ
checkout_option
(หากมี) - (ไม่บังคับ) ตั้งชื่อขั้นตอนที่ใช้งานง่ายสำหรับรายงาน 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. การกำหนดค่าช่องทางการชำระเงิน
(ไม่บังคับ) แต่ละขั้นตอนในกระบวนการชำระเงินอาจตั้งชื่อที่สื่อความหมายซึ่งจะใช้ในรายงาน หากต้องการกำหนดค่าชื่อเหล่านี้ ให้ไปที่ส่วนผู้ดูแลระบบของอินเทอร์เฟซบนเว็บของ Google Analytics เลือกข้อมูลพร็อพเพอร์ตี้ (โปรไฟล์) และคลิกการตั้งค่าอีคอมเมิร์ซ ทำตามวิธีการตั้งค่าอีคอมเมิร์ซเพื่อติดป้ายกำกับขั้นตอนการเช็คเอาต์แต่ละขั้นที่คุณต้องการติดตาม

การวัดการซื้อ
- การวัดอีคอมเมิร์ซ:
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 ที่กำหนดเองแทนชั้นข้อมูล ให้เลือกเปิดใช้ฟีเจอร์อีคอมเมิร์ซที่เพิ่มประสิทธิภาพ แล้วตั้งค่าตัวเลือกอ่านข้อมูลจากมาโคร