อีคอมเมิร์ซของ GA4 (analytics.js - อีคอมเมิร์ซมาตรฐาน): ส่งเหตุการณ์อีคอมเมิร์ซของ GA4

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

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

ผลลัพธ์

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

การย้ายข้อมูลแบ่งออกเป็น 2 ระยะ ดังนี้

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

  1. ยืนยันว่าข้อมูลต่อไปนี้อธิบายถึงการใช้งานปัจจุบันของคุณ

    • คุณกำลังใช้พร็อพเพอร์ตี้ Universal Analytics
    • เว็บไซต์ใช้ไลบรารี analytics.js เพื่อส่งเหตุการณ์อีคอมเมิร์ซ

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

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

ข้อดีและข้อพิจารณา

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

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

การใช้งาน

1. ย้ายข้อมูลการวัด UA จาก analytics.js ไปยัง gtag.js

หากต้องการส่งเหตุการณ์อีคอมเมิร์ซของ GA4 คุณจะต้องย้ายข้อมูลจาก analytics.js ไปยัง gtag.js รวมถึงการวัดที่กําหนดเอง

โดยทั่วไป ขั้นตอนการย้ายข้อมูลให้เสร็จสมบูรณ์มีดังนี้

  1. โปรดนำข้อมูลโค้ด analytics.js ออก
  2. ติดตั้งแท็ก Google (gtag.js) และกำหนดค่าด้วยรหัสติดตามของพร็อพเพอร์ตี้ UA
  3. ย้ายข้อมูลโค้ดการวัดที่กําหนดเองจาก analytics.js ไปยัง gtag.js ส่วนด้านล่างอธิบายวิธีย้ายข้อมูลธุรกรรมอีคอมเมิร์ซมาตรฐาน ดูการย้ายข้อมูลการวัดสําหรับความช่วยเหลือทั่วไปในการย้ายข้อมูลสถานการณ์การวัดอื่นๆ

ก่อน: แท็ก analytics.js

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');    // Universal Analytics property.
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

หลัง: แท็ก Google (gtag.js)

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXX-Y');    // Universal Analytics property.
</script>

2. อัปเดตการติดตั้งใช้งานอีคอมเมิร์ซเพื่อส่งเหตุการณ์ GA4

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

ตัวอย่างด้านล่างแสดงวิธีย้ายข้อมูลเหตุการณ์ธุรกรรมอีคอมเมิร์ซมาตรฐาน analytics.js ไปยังเหตุการณ์ purchase อีคอมเมิร์ซของ GA4 ที่เทียบเท่า ซึ่งเข้ากันได้กับ Universal Analytics

ก่อน: ธุรกรรมอีคอมเมิร์ซมาตรฐานของ UA (analytics.js)

ตัวอย่างต่อไปนี้แสดงการติดตั้งใช้งานอีคอมเมิร์ซมาตรฐาน analytics.js สำหรับธุรกรรมที่มี 2 รายการ

// Add the transaction.
ga('ecommerce:addTransaction', {
  id: '1234',     // Transaction ID.
  affiliation: 'Google Store',
  revenue: '29.97',
  shipping: '5.25',
  tax: '2.42'
});

// Add the items belonging to the transaction.
ga('ecommerce:addItem', {
  id: '1234',     // Transaction ID.
  name: 'Android Warhol T-Shirt',
  sku: 'P12345',  // Item ID.
  category: 'Apparel/T-Shirts',
  price: '12.99',
  quantity: '2'
});
ga('ecommerce:addItem', {
  id: '1234',     // Transaction ID.
  name: 'Flame challenge T-Shirt',
  sku: 'P67890',  // Item ID.
  category: 'Apparel/T-Shirts',
  price: '3.99',
  quantity: '1'
});
ga('ecommerce:send');

หลัง: การซื้อผ่านอีคอมเมิร์ซของ GA4 (gtag.js)

เมื่อย้ายข้อมูลเหตุการณ์ธุรกรรม analytics.js ไปยังเหตุการณ์ purchase ของ GA4 ความแตกต่างที่สำคัญมีดังนี้

  • GA4 มีเหตุการณ์ purchase รายการเดียวที่มีรายละเอียดและรายการทั้งหมดที่เกี่ยวข้องกับธุรกรรม โดย analytics.js จะดำเนินการตามคำสั่งอีคอมเมิร์ซของ ga() หลายรายการเพื่อบันทึกข้อมูลเดียวกัน
  • GA4 มีช่อง transaction_id เพียงช่องเดียวสำหรับทั้งเหตุการณ์ analytics.js ต้องระบุรหัสธุรกรรมไว้กับแต่ละรายการ
  • GA4 มีช่องหมวดหมู่รายการหลายช่อง analytics.js ใช้ช่องหมวดหมู่เดียวที่มีตัวคั่น / เพื่ออธิบายลำดับชั้น อย่างไรก็ตาม เหตุการณ์ GA4 ที่มีช่องหมวดหมู่รายการหลายช่องจะใช้ได้กับพร็อพเพอร์ตี้ UA เนื่องจากการแปลพารามิเตอร์หมวดหมู่
 gtag('event', 'purchase', {
   currency: 'USD',
   transaction_id: '1234',    // Transaction ID.
   value: 29.97,
   affiliation: 'Google Store',
   shipping: 5.25,
   tax: 2.42,
   items: [
    {
      item_id: 'P12345',     // Item ID.
      item_name: 'Android Warhol T-Shirt',
      item_category: 'Apparel',
      item_category2: 'T-Shirts',
      price: 12.99,
      quantity: 2
    },
    {
      item_id: 'P67890',    // Item ID.
      item_name: 'Flame challenge T-Shirt',
      item_category: 'Apparel',
      item_category2: 'T-Shirts',
      price: 3.99,
      quantity: 1
    }
  ]
});

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

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

ตัวเลือกที่ 1: ใช้ผู้ช่วยการตั้งค่า GA4 และเปิดใช้แท็กเว็บไซต์ที่เชื่อมต่อ

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

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

ตัวเลือกที่ 2: อัปเดตข้อมูลโค้ด gtag.js

  1. สร้างพร็อพเพอร์ตี้ Google Analytics 4 ใหม่
    • ใช้ผู้ช่วยการตั้งค่า GA4 เพื่อเพิ่มพร็อพเพอร์ตี้ Google Analytics 4 อย่างไรก็ตาม ให้ยกเลิกการเลือกตัวเลือกเปิดใช้การเก็บรวบรวมข้อมูลโดยใช้แท็กที่มีอยู่เมื่อได้รับข้อความแจ้งระหว่างการตั้งค่า หรือสร้างพร็อพเพอร์ตี้ Google Analytics 4 โดยไม่มีผู้ช่วยการตั้งค่า GA4 ข้อดีของการใช้ Assistant คือจะคัดลอกการตั้งค่าพื้นฐานบางอย่างจากพร็อพเพอร์ตี้ Universal Analytics ของคุณ
  2. ค้นหารหัสแท็กของพร็อพเพอร์ตี้ Google Analytics 4
  3. เพิ่มพร็อพเพอร์ตี้ Google Analytics 4 ลงในข้อมูลโค้ด gtag.js ที่มีอยู่โดยใช้คำสั่ง config กับรหัสแท็ก

ต่อไปนี้เป็นตัวอย่างข้อมูลโค้ด gtag.js ที่กําหนดค่าพร็อพเพอร์ตี้ Universal Analytics และ Google Analytics 4

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXX-Y');         // Universal Analytics property.
  gtag('config', 'TAG_ID');  // Google Analytics 4 property.
</script>

4. (ไม่บังคับ) วัดเหตุการณ์อีคอมเมิร์ซเพิ่มเติม

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

หากคุณใช้การกําหนดค่าข้อมูลโค้ด gtag.js เริ่มต้น ระบบจะส่งเหตุการณ์ GA4 ไปยังทั้งพร็อพเพอร์ตี้ UA และ GA4 ระบบจะแปลเหตุการณ์ GA4 ที่ส่งไปยังพร็อพเพอร์ตี้ UA ตามที่ระบุไว้ในข้อมูลอ้างอิงความเข้ากันได้ของเหตุการณ์ หากคุณต้องการลักษณะการทำงานที่ต่างกัน คุณสามารถใช้ฟังก์ชันจัดกลุ่มและกำหนดเส้นทางข้อมูลของ gtag.js เพื่อควบคุมเหตุการณ์ที่ส่งไปยังพร็อพเพอร์ตี้ UA และ GA4 เช่น คุณสามารถส่งเหตุการณ์ purchase ไปยังทั้งพร็อพเพอร์ตี้ UA และ GA4 ได้ แต่สามารถส่งเฉพาะเหตุการณ์อีคอมเมิร์ซอื่นๆ ของ GA4 ไปยังพร็อพเพอร์ตี้ GA4 เท่านั้น