อีคอมเมิร์ซของ GA4 (Tag Manager): ส่งเหตุการณ์ GA4

คู่มือนี้อธิบายวิธีอัปเดตการใช้งานอีคอมเมิร์ซใน Universal Analytics (Tag Manager) ที่มีอยู่เพื่อใช้เหตุการณ์อีคอมเมิร์ซของ Google Analytics 4

ไปที่ศูนย์การย้ายข้อมูลสําหรับนักพัฒนาซอฟต์แวร์เพื่อดูคําแนะนําในการย้ายข้อมูลและแหล่งข้อมูลเพิ่มเติม

ผลลัพธ์

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

ก่อนเริ่มต้น

  1. ใช้เครื่องมือผู้ช่วยการย้ายข้อมูลอีคอมเมิร์ซเพื่อยืนยันว่าสิ่งต่อไปนี้อธิบายการใช้งานปัจจุบันของคุณ

    • คุณกําลังใช้พร็อพเพอร์ตี้ Universal Analytics
    • เว็บไซต์ใช้ Tag Manager และใช้ชั้นข้อมูลเพื่อส่งเหตุการณ์อีคอมเมิร์ซ

  2. อ่านตัวเลือกการย้ายข้อมูลสําหรับการใช้งานอีคอมเมิร์ซเพื่อเรียนรู้เกี่ยวกับข้อดีข้อเสียของแต่ละตัวเลือก แล้วยืนยันว่าคุณต้องทําตามคําแนะนํานี้เพื่อใช้เหตุการณ์อีคอมเมิร์ซของ Google Analytics 4 สําหรับการใช้งาน Universal Analytics ที่มีอยู่

  3. อ่านข้อมูลอ้างอิงความเข้ากันได้ของเหตุการณ์เพื่อดูวิธีแปลเหตุการณ์ UA เมื่อส่งไปยังพร็อพเพอร์ตี้ GA4

ข้อดีและข้อเสีย

ตรวจสอบและพิจารณาข้อมูลด้านล่างเพื่อทําความเข้าใจผลของการใช้เหตุการณ์อีคอมเมิร์ซของ Google Analytics 4 กับการใช้งานอีคอมเมิร์ซของ Universal Analytics (Tag Manager) ที่มีอยู่

ข้อดี ข้อเสีย
  • ช่วยให้คุณดูข้อมูลอีคอมเมิร์ซได้ทั้งในรายงาน GA4 และ Universal Analytics
  • การใช้เหตุการณ์และพารามิเตอร์ GA4 ช่วยรับประกันว่ารายงานอีคอมเมิร์ซ GA4 จะสมบูรณ์
  • คุณต้องเปลี่ยนเหตุการณ์อีคอมเมิร์ซที่มีอยู่
  • เหตุการณ์และพารามิเตอร์ GA4 บางรายการอาจมีค่าที่เทียบเท่าใน Universal Analytics พารามิเตอร์ shipping_tier, discount, currency, location_id, promotion_name และ promotion_id ไม่มีค่า Universal Analytics ที่เทียบเท่าและจะไม่ปรากฏในรายงาน Universal Analytics

การใช้งาน

วัตถุประสงค์หลักในการติดตั้งใช้งานคือการเปลี่ยนจากการใช้ชั้นข้อมูลไปใช้ gtag.js API หากต้องการตรวจสอบว่าการวัดไม่มีการหยุดชะงักในระหว่างการเปลี่ยนแปลงนี้ วิธีการด้านล่างขอแนะนําว่าการอัปเดตการกําหนดค่าแท็กทั้งหมดจะเสร็จสมบูรณ์ก่อน ตามด้วยการอัปเดตชั้นข้อมูล

1. สร้างและกําหนดค่าพร็อพเพอร์ตี้ GA4 ใหม่

ทําตามขั้นตอนต่อไปนี้เพื่อสร้างและกําหนดค่าพร็อพเพอร์ตี้ Google Analytics 4 ใหม่

  1. สร้างพร็อพเพอร์ตี้ Google Analytics 4 ใหม่
    • ใช้ผู้ช่วยการตั้งค่า GA4 เพื่อสร้างพร็อพเพอร์ตี้ GA4 ใหม่โดยอัตโนมัติ และคัดลอกการตั้งค่าต่อไปนี้จากพร็อพเพอร์ตี้ Universal Analytics ได้แก่ ชื่อพร็อพเพอร์ตี้, URL ของเว็บไซต์, เขตเวลา และการตั้งค่าสกุลเงิน อย่างไรก็ตาม ให้ยกเลิกการเลือกตัวเลือกเปิดใช้การรวบรวมข้อมูลโดยใช้แท็กที่มีอยู่ เพื่อปิดใช้ฟีเจอร์แท็กเว็บไซต์ที่เชื่อมต่อ หรือหากคุณไม่ต้องการคัดลอกการตั้งค่าจากพร็อพเพอร์ตี้ Universal Analytics ให้สร้างพร็อพเพอร์ตี้ Google Analytics 4 โดยไม่มีผู้ช่วยการตั้งค่า GA4
  2. เพิ่มแท็กการกําหนดค่า Google Analytics 4
    1. เปิดคอนเทนเนอร์ Google Tag Manager สําหรับการใช้งาน Universal Analytics ที่มีอยู่
    2. คลิกแท็ก > ใหม่
    3. คลิกการกําหนดค่าแท็กและเลือกการกําหนดค่า GA4
    4. ป้อนรหัสแท็กของพร็อพเพอร์ตี้ Google Analytics 4
    5. เลือกเพื่อเรียกให้แท็กแสดงในหน้าเว็บทุกหน้า (หรือชุดย่อยของหน้าเว็บที่คุณต้องการวัด)
    6. บันทึกและนำการกำหนดค่าแท็กไปใช้จริง

2. เพิ่มการกําหนดค่าแท็กเหตุการณ์ GA4 เพื่อวัดเหตุการณ์อีคอมเมิร์ซ

ทําตามขั้นตอนต่อไปนี้เพื่อเพิ่มแท็กเหตุการณ์ GA4 เพื่อส่งเหตุการณ์และพารามิเตอร์อีคอมเมิร์ซไปยังพร็อพเพอร์ตี้ GA4

  1. สร้างการกําหนดค่าแท็กใหม่ แล้วเลือกเหตุการณ์ GA4
  2. สําหรับชื่อเหตุการณ์ ให้ใช้ตัวแปรในตัว ซึ่งจะใช้ชื่อเหตุการณ์อีคอมเมิร์ซของ GA4 ที่ส่งโดยใช้ gtag.js API
  3. ในส่วนการตั้งค่าเพิ่มเติม จากนั้นเลือกอีคอมเมิร์ซ แล้วเลือกส่งข้อมูลอีคอมเมิร์ซ
  4. สําหรับแหล่งข้อมูล ให้เลือกชั้นข้อมูล
  5. คลิกบันทึก ระบบจะเพิ่มทริกเกอร์ในขั้นตอนต่อไปเพื่อให้คุณละเว้นคําเตือนเกี่ยวกับทริกเกอร์ที่ขาดหายไปได้อย่างปลอดภัย

3. อัปเดตการกําหนดค่าแท็กอีคอมเมิร์ซของ UA เพื่อใช้เหตุการณ์ GA4

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

ขั้นตอนทั่วไปของการอัปเดตเหตุการณ์อีคอมเมิร์ซของ Universal Analytics แต่ละเหตุการณ์มีดังนี้

  1. สําหรับเหตุการณ์อีคอมเมิร์ซของ UA ที่คุณต้องการอัปเดต ให้ใช้ข้อมูลที่มีอยู่ในตารางความเข้ากันได้ระหว่างเหตุการณ์ UA กับ GA4 และพารามิเตอร์ที่เปรียบเทียบได้สําหรับ UA กับ GA4 และ/หรือโปรแกรมช่วยย้ายข้อมูลอีคอมเมิร์ซเพื่อระบุชื่อเหตุการณ์ GA4 ที่เกี่ยวข้อง ตัวอย่างเช่น หากคุณอัปเดตเหตุการณ์เพื่อวัดการคลิกผลิตภัณฑ์ ชื่อเหตุการณ์ GA4 จะเป็น select_item
  2. อัปเดตการกําหนดค่าแท็ก Universal Analytics สําหรับเหตุการณ์โดยทําดังนี้
    1. ในส่วนการตั้งค่าเพิ่มเติม จากนั้นเลือกอีคอมเมิร์ซ แล้วเลือกใช้สคีมา GA4 เพื่อให้แน่ใจว่าแท็กที่มีอยู่จะอ่านเหตุการณ์อีคอมเมิร์ซของ GA4 ที่อัปเดตอย่างถูกต้อง คุณจะทําการเปลี่ยนแปลงนี้ก่อนย้ายข้อมูลจากชั้นข้อมูลไปยัง API ของ gtag.js ได้
    2. ในส่วนการทริกเกอร์ ให้เพิ่มทริกเกอร์เหตุการณ์ที่กําหนดเองใหม่ โดยที่ชื่อเหตุการณ์คือเหตุการณ์อีคอมเมิร์ซของ GA4 ที่ระบุข้างต้น หลังจากเสร็จสิ้นขั้นตอนนี้ คุณควรมีทริกเกอร์อย่างน้อย 2 ตัว ได้แก่ ทริกเกอร์ดั้งเดิมที่เริ่มการทํางานของแท็กและทริกเกอร์ที่เพิ่มใหม่ซึ่งจะเริ่มทํางานในที่สุดเมื่อคุณเปลี่ยนไปใช้เหตุการณ์ GA4 โดยสมบูรณ์ ทริกเกอร์เพิ่มเติมคือต้องไม่มีการหยุดชะงักของข้อมูลเมื่อเปลี่ยนจากชั้นข้อมูลเป็น gtag.js ดังที่อธิบายไว้ในเอกสารนี้
    3. บันทึกการเปลี่ยนแปลง
  3. เพิ่มทริกเกอร์ใหม่ลงในแท็กเหตุการณ์ GA4 ดังนี้
    1. เปิดแท็กเหตุการณ์ GA4 ที่คุณกําหนดค่าไว้ก่อนหน้านี้เพื่อส่งเหตุการณ์และพารามิเตอร์อีคอมเมิร์ซไปยังพร็อพเพอร์ตี้ GA4
    2. ในส่วนทริกเกอร์ ให้เพิ่มทริกเกอร์เหตุการณ์ที่กําหนดเองที่สร้างขึ้นด้านบน (เช่น select_item) เพื่อให้แท็กเหตุการณ์ GA4 เริ่มทํางานสําหรับเหตุการณ์อีคอมเมิร์ซที่เกี่ยวข้องหลังจากที่คุณเปลี่ยนไปใช้เหตุการณ์ GA4
    3. บันทึกการเปลี่ยนแปลง
  4. ทําซ้ําขั้นตอนด้านบนสําหรับกิจกรรมอีคอมเมิร์ซของ Universal Analytics แต่ละรายการ เผยแพร่การเปลี่ยนแปลงใน Tag Manager เมื่อดําเนินการเสร็จสิ้น

4. เปิดใช้ gtag.js API

หากต้องการอัปเดตการใช้งานอีคอมเมิร์ซจาก UA เป็น GA4 เราขอแนะนําให้เปลี่ยนจากการใช้ชั้นข้อมูลไปใช้ gtag.js API ซึ่งทํางานร่วมกับ Tag Manager ได้

หากต้องการเปิดใช้ gtag.js API ให้เพิ่มข้อมูลโค้ดต่อไปนี้ที่ด้านบนของหน้าเว็บเหนือข้อมูลโค้ดคอนเทนเนอร์ของ Tag Manager

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
</script>

5. การเปลี่ยนจากการใช้ชั้นข้อมูลไปใช้ gtag.js

เมื่ออัปเดตการกําหนดค่าแท็กทั้งหมดและเปิดใช้ API gtag.js แล้ว คุณก็พร้อมที่จะเปลี่ยนจากการใช้ชั้นข้อมูลไปใช้ gtag.js API

โปรดใช้แหล่งข้อมูลต่อไปนี้เพื่อช่วยอัปเดต

สําหรับเหตุการณ์อีคอมเมิร์ซของ Universal Analytics แต่ละรายการ ขั้นตอนทั่วไปในการเปลี่ยนจากการใช้ dataLayer.push() API กับเหตุการณ์อีคอมเมิร์ซของ UA ไปใช้ API ของ gtag.js กับเหตุการณ์อีคอมเมิร์ซของ GA4 ที่เกี่ยวข้องมีดังนี้

  1. อัปเดตชื่อเหตุการณ์ที่กําหนดเองเป็นชื่อเหตุการณ์ GA4 ที่สอดคล้องกัน ตัวอย่างเช่น หากคุณอัปเดตเหตุการณ์เพื่อวัดการคลิกผลิตภัณฑ์ซึ่งใช้ชื่อเหตุการณ์ที่กําหนดเองของ productClick ชื่อเหตุการณ์ที่อัปเดตสําหรับ GA4 จะเป็น select_item ชื่อเหตุการณ์ GA4 ต้องตรงกับชื่อเหตุการณ์ของทริกเกอร์ที่คุณกําหนดค่าไว้ก่อนหน้านี้

    เช่น เหตุการณ์การคลิกผลิตภัณฑ์ต่อไปนี้โดยใช้ชั้นข้อมูล

    dataLayer.push({'event': 'productClick', 'ecommerce': {<ecommerce_parameters>}});

    จะกลายเป็นดังนี้เมื่อเปลี่ยนไปใช้ gtag.js API

    gtag('event', 'select_item', {<ecommerce_parameters>});

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

ตัวอย่าง: อัปเดตเหตุการณ์ UA เป็น GA4

ตัวอย่างต่อไปนี้แสดงวิธีสร้างเหตุการณ์ GA4 ที่เทียบเท่าสําหรับเหตุการณ์อีคอมเมิร์ซการคลิกผลิตภัณฑ์ที่ใช้ใน Tag Manager สําหรับ Universal Analytics

ก่อนหน้านี้: การส่งเหตุการณ์ UA โดยใช้ชั้นข้อมูล

การวัดคลิกผลิตภัณฑ์ต่อไปนี้สําหรับ Universal Analytics เป็นการนําการใช้ชั้นข้อมูลมาใช้ ชื่อเหตุการณ์ที่กําหนดเองคือ productClick

<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({
    '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>

ใน Tag Manager การกําหนดค่าแท็ก Universal Analytics มีดังนี้

ประเภทแท็ก : Universal Analytics
ประเภทการติดตาม : เหตุการณ์
หมวดหมู่เหตุการณ์: Ecommerce
การทํางานของเหตุการณ์: Product Click
เปิดใช้ฟีเจอร์อีคอมเมิร์ซที่เพิ่มประสิทธิภาพ: true
ใช้ชั้นข้อมูล: true
ทริกเกอร์: event เท่ากับ productClick

การกําหนดค่าแท็ก Universal Analytics สําหรับคลิกผลิตภัณฑ์

การกําหนดค่าทริกเกอร์ได้รับการตั้งค่าให้เริ่มการทํางานของแท็กเมื่อเหตุการณ์ productClick พุชไปยังชั้นข้อมูล

การกําหนดค่าทริกเกอร์สําหรับเหตุการณ์ที่กําหนดเอง ProductClick

หลังการส่งเหตุการณ์ GA4 โดยใช้ gtag.js

การอัปเดตการกําหนดค่าแท็กสําหรับ UA

ใน Tag Manager การกําหนดค่าแท็ก Universal Analytics จะได้รับการอัปเดตสําหรับเหตุการณ์การคลิกผลิตภัณฑ์เพื่อเรียกใช้ในชื่อเหตุการณ์ GA4 และเปิดใช้ตัวเลือกใช้สคีมา GA4 ไว้ การกําหนดค่าแท็กมีดังต่อไปนี้

ประเภทแท็ก : Universal Analytics
ประเภทการติดตาม : เหตุการณ์
หมวดหมู่เหตุการณ์: Ecommerce
การดําเนินการของเหตุการณ์: Product Click
เปิดใช้ฟีเจอร์อีคอมเมิร์ซที่เพิ่มประสิทธิภาพ: true
ใช้ชั้นข้อมูล: true
ใช้สคีมา GA4: true
ทริกเกอร์ #1: event เท่ากับ productClick
ทริกเกอร์ #2: event เท่ากับ select_item

การกําหนดค่าแท็ก Universal Analytics โดยใช้ GA4 สําหรับการคลิกผลิตภัณฑ์

การกําหนดค่าทริกเกอร์ของเหตุการณ์ที่กําหนดเองใหม่ได้รับการตั้งค่าเพื่อให้แท็กเริ่มทํางานในชื่อเหตุการณ์ select_item ดังนี้

การกําหนดค่าทริกเกอร์สําหรับเหตุการณ์ select_item

การอัปเดตการกําหนดค่าแท็กสําหรับ GA4

เหตุการณ์ GA4 ได้รับการกําหนดค่าให้วัดกิจกรรมอีคอมเมิร์ซที่ติดตั้งใช้งานโดยใช้เหตุการณ์และพารามิเตอร์ GA4 แท็กจะใช้ตัวแปรเหตุการณ์ในตัวเพื่อส่งผ่านชื่อเหตุการณ์ไปยัง GA4 ทริกเกอร์เดียวกันที่สร้างขึ้นสําหรับแท็ก UA (นั่นคือ select_item) จะใช้เพื่อทําให้แท็ก GA4 เริ่มทํางาน

การกําหนดค่าแท็กเหตุการณ์ GA4 สําหรับกิจกรรมอีคอมเมิร์ซหลายรายการ

การเปลี่ยนจากการใช้ชั้นข้อมูลไปใช้ gtag.js

ต่อไปนี้แสดงให้เห็นว่าการใช้งาน UA ด้านบนเปลี่ยนจากการใช้เหตุการณ์ที่กําหนดเอง productClick ที่มี dataLayer.push() API ไปใช้เหตุการณ์ GA4 select_item ด้วย gtag.js API อย่างไร ระบบจะตั้งค่าค่าพารามิเตอร์สําหรับ select_item ให้สอดคล้องกัน

<script>
/**
 * Call this function when a user clicks on a product link.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  gtag('event', 'select_item', {
    'items': [{
      'item_id': productObj.id,
      'item_name': productObj.name,
      'index': productObj.position,
      'item_list_name': 'Search Results',
      'item_brand': productObj.brand,
      'item_category': productObj.cat,
      'item_variant': productObj.variant,
      'price': productObj.price
    }]
  });
}
</script>