วัดแอปพลิเคชันหน้าเว็บเดียว

เอกสารนี้มีไว้สำหรับนักพัฒนาแอปที่ต้องการวัดการดูหน้าเว็บใน แอปพลิเคชันหน้าเว็บเดียวโดยใช้ Google Analytics

แอปพลิเคชันหน้าเว็บเดียว (SPA) คือเว็บไซต์ที่โหลดเอกสาร HTML เพียงครั้งเดียวและดึงเนื้อหาเพิ่มเติมโดยใช้ JavaScript API

ตัวอย่าง: สมมติว่าคุณมีแบบฟอร์มเพื่อดึงดูดผู้มีโอกาสเป็นลูกค้า แบบฟอร์มมี 3 หน้าจอ ดังนี้

  • หน้าจอแรกเพื่อบันทึกข้อมูลลูกค้า
  • หน้าจอที่ 2 ซึ่งลูกค้าจะระบุความสนใจในบริการบางอย่าง
  • หน้าจอที่ 3 สำหรับลงชื่อสมัครเข้าร่วมการสัมมนาผ่านเว็บที่เกี่ยวข้องกับความสนใจของลูกค้า

เคล็ดลับในการวัดการดูหน้าเว็บจาก SPA อย่างถูกต้องคือการนับการดูหน้าเว็บสำหรับแต่ละหน้าจอที่ผู้ใช้โต้ตอบด้วย และรับผู้เข้าชมหน้าเว็บที่ถูกต้อง เพื่อให้คุณติดตามเส้นทางของผู้ใช้ได้อย่างถูกต้อง

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

หน้านี้ถือว่าคุณมีสิ่งต่อไปนี้อยู่แล้ว

  • บัญชีและพร็อพเพอร์ตี้ Google Analytics 4 สําหรับเว็บไซต์ ดูวิธี ตั้งค่า Google Analytics

  • แท็ก Google ที่ติดตั้งใช้งานในเว็บไซต์ซึ่งจะเริ่มทํางานเมื่อหน้าเว็บโหลดในตอนแรก ดูวิธีตั้งค่าแท็ก Google

ติดตั้งใช้งานการวัดผลแอปพลิเคชันหน้าเว็บเดียว

หากต้องการใช้การวัด SPA ที่แม่นยำ ให้ใช้วิธีใดวิธีหนึ่งต่อไปนี้เพื่อทริกเกอร์การดูหน้าเว็บเสมือนใหม่

  • การเปลี่ยนแปลงประวัติเบราว์เซอร์ (แนะนำ): หาก SPA ใช้ History API โดยเฉพาะ เมธอด pushState() และ replaceState() เพื่ออัปเดตหน้าจอ ให้ใช้ตัวเลือกนี้

  • เหตุการณ์ที่กําหนดเอง: หากเว็บไซต์ใช้ออบเจ็กต์ DocumentFragment เพื่อแสดงหน้าจอต่างๆ ให้ใช้ตัวเลือกนี้

การติดตั้งใช้งานการเปลี่ยนแปลงประวัติการเข้าชมของเบราว์เซอร์

เปิดใช้การวัดที่ปรับปรุงแล้วใน GA4

วิธีวัด page_views โดยอัตโนมัติตามประวัติของเบราว์เซอร์

  1. เปิด Google Analytics

  2. ในส่วนผู้ดูแลระบบ ภายในการเก็บรวบรวมและการแก้ไขข้อมูล ให้คลิกสตรีมข้อมูล > เว็บ

  3. ในส่วนการวัดที่ปรับปรุงแล้ว ให้เลื่อนสวิตช์เป็นเปิด เพื่อเปิดใช้ตัวเลือกทั้งหมด

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

    รูปภาพแสดงการตั้งค่าการดูหน้าเว็บ

  5. บันทึกการเปลี่ยนแปลง

ยืนยันการตั้งค่าการวัดผล

วิธีตรวจสอบว่าแอปพลิเคชันหน้าเว็บเดียววัดการดูหน้าเว็บได้อย่างถูกต้อง

  1. เปิดใช้โหมดแก้ไขข้อบกพร่องสําหรับแท็กทุกแท็กในการตั้งค่าการวัดผล SPA ดูวิธี ตรวจสอบเหตุการณ์ใน DebugView

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