เอกสารนี้มีไว้สำหรับนักพัฒนาแอปที่ต้องการวัดการดูหน้าเว็บใน แอปพลิเคชันหน้าเว็บเดียวโดยใช้ 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 โดยอัตโนมัติตามประวัติของเบราว์เซอร์
เปิด Google Analytics
ในส่วนผู้ดูแลระบบ ภายในการเก็บรวบรวมและการแก้ไขข้อมูล ให้คลิกสตรีมข้อมูล > เว็บ
ในส่วนการวัดที่ปรับปรุงแล้ว ให้เลื่อนสวิตช์เป็นเปิด เพื่อเปิดใช้ตัวเลือกทั้งหมด
คลิกเพื่อแก้ไขตัวเลือกแต่ละรายการ ในส่วนการดูหน้าเว็บ ให้คลิกแสดง การตั้งค่าขั้นสูง ตรวจสอบว่าได้เปิดใช้ทั้งการโหลดหน้าเว็บและการเปลี่ยนแปลงหน้าเว็บ ตามเหตุการณ์ประวัติการท่องเว็บ
บันทึกการเปลี่ยนแปลง
ยืนยันการตั้งค่าการวัดผล
วิธีตรวจสอบว่าแอปพลิเคชันหน้าเว็บเดียววัดการดูหน้าเว็บได้อย่างถูกต้อง
เปิดใช้โหมดแก้ไขข้อบกพร่องสําหรับแท็กทุกแท็กในการตั้งค่าการวัดผล SPA ดูวิธี ตรวจสอบเหตุการณ์ใน DebugView
คลิกผ่านแอปพลิเคชันหน้าเว็บเดียว เมื่อคลิกไปยังหน้าจอเสมือนใหม่ คุณควรเห็นเหตุการณ์
page_viewใหม่ใน DebugView เปรียบเทียบพารามิเตอร์เหตุการณ์page_viewกับเหตุการณ์page_viewก่อนหน้าเพื่อตรวจสอบว่า ผู้เข้าชมที่มาจากหน้าเว็บอื่นและตําแหน่งหน้าเว็บได้รับการอัปเดตอย่างถูกต้องหรือไม่