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