อีคอมเมิร์ซของ 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
    1. เปิดคอนเทนเนอร์ Google Tag Manager สำหรับการติดตั้งใช้งาน Universal Analytics ที่มีอยู่
    2. คลิกแท็ก > ใหม่
    3. คลิกการกําหนดค่าแท็ก แล้วเลือกแท็ก Google
    4. ป้อนรหัสแท็กของพร็อพเพอร์ตี้ Google Analytics 4
    5. เลือกเพื่อทริกเกอร์แท็กในหน้าเว็บทุกหน้า (หรือบางหน้าที่ต้องการวัด)
    6. บันทึกและนำการกำหนดค่าแท็กไปใช้จริง

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

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

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

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

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

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

  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 API ตามที่อธิบายไว้ภายหลังในเอกสารนี้
    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 ไปใช้ gtag.js API กับเหตุการณ์อีคอมเมิร์ซ 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 กับ API gtag.js ระบบจะตั้งค่าพารามิเตอร์ของ 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>