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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

หาก SPA ใช้ History API คุณสามารถเปิดใช้การวัดที่ปรับปรุงแล้วใน Google Analytics เพื่อติดตามการดูหน้าเว็บโดยอัตโนมัติตามเหตุการณ์ประวัติเบราว์เซอร์

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

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

  1. เปิด Google Analytics

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

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

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

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

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

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

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

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

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

ผลกระทบต่อเหตุการณ์อัตโนมัติ

หากคุณติดตั้งใช้งานการวัดจำนวนการดูหน้าเว็บเสมือนใน SPA อย่างถูกต้อง Google Analytics จะจัดการเหตุการณ์อัตโนมัติอื่นๆ อย่างเหมาะสม หากไม่ได้บันทึกการดูหน้าเว็บเสมือน สําหรับการเปลี่ยนแปลงหน้าจอ Google Analytics จะถือว่า SPA เป็นหน้าเว็บเดียว ซึ่งทําให้เมตริกไม่ถูกต้อง

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

เมื่อติดตั้งใช้งานการวัดการดูหน้าเว็บเสมือนอย่างถูกต้อง

  • ระบบจะส่งเหตุการณ์ user_engagement เมื่อผู้ใช้ไปยังหน้าเสมือนจากหน้าหนึ่ง ไปยังอีกหน้าหนึ่ง
  • ระบบจะคํานวณเวลาในการมีส่วนร่วมสําหรับหน้าเสมือนก่อนหน้าและส่งพร้อมกับเหตุการณ์ user_engagement โดยปกติจะส่งก่อนที่ระบบจะประมวลผลเหตุการณ์ page_view สําหรับหน้าเสมือนใหม่
  • เหตุการณ์อื่นๆ เช่น การคลิกหรือการเลื่อน จะเชื่อมโยงกับ page_locationของหน้าเสมือนที่ผู้ใช้กําลังดูอยู่

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