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

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

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

ตัวอย่างเช่น สมมติว่าคุณมีแบบฟอร์มเพื่อรับโอกาสในการขาย แบบฟอร์มมี 3 หน้าจอ ดังนี้ > * หน้าจอแรกสำหรับบันทึกข้อมูลลูกค้า * หน้าจอที่ 2 ที่ลูกค้าแสดงความสนใจในบริการบางอย่าง * หน้าจอที่ 3 สำหรับลงชื่อสมัครรับการสัมมนาผ่านเว็บที่เกี่ยวข้องกับความสนใจของลูกค้า

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

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

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

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

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

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

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

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

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

การติดตั้งใช้งานประวัติการเข้าชมของเบราว์เซอร์ การติดตั้งใช้งานเหตุการณ์ที่กำหนดเอง

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

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

ประเด็นสำคัญ: หากกำหนดค่าแท็กโดยใช้ Google Tag Manager อย่าเปิดใช้ การติดตามประวัติอัตโนมัติใน GA4 เนื่องจากอาจทำให้เกิดการนับการดูหน้าเว็บ ซ้ำ ให้ดูบทแนะนำการวัดผลแอปพลิเคชันหน้าเว็บเดียวด้วย Google Tag Manager แทน

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

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

1. เปิด Google Analytics

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

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

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

   

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

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

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

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

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

ข้อควรพิจารณาเพิ่มเติมสำหรับ SPA

นอกจากการส่งเหตุการณ์ page_view แล้ว ให้พิจารณาประเด็นเพิ่มเติมต่อไปนี้เพื่อการผสานรวม SPA กับ Google Analytics อย่างมีประสิทธิภาพและประสบการณ์การใช้งานของผู้ใช้ที่ดีขึ้น

จัดการตำแหน่งการเลื่อน

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

คำแนะนำ: รีเซ็ตตำแหน่งการเลื่อนเป็นส่วนบนของหน้าเว็บหรือคอนเทนเนอร์เนื้อหาหลักโดยโปรแกรมหลังจากเปลี่ยนหน้าเว็บเสมือนแต่ละครั้ง

// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);

// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);

เมื่อมีการเปลี่ยนแปลงนี้ ผู้ใช้จะเริ่มต้นที่ส่วนบนของเนื้อหาใหม่ ซึ่งจะช่วยให้การติดตามการเลื่อนของ Google Analytics วัดการมีส่วนร่วมในหน้าเว็บเสมือนใหม่ได้อย่างถูกต้อง

ตรวจสอบการเข้าถึงเนื้อหาสำหรับฟีเจอร์ของเบราว์เซอร์

หากผู้ใช้รายงานปัญหาเกี่ยวกับฟีเจอร์ของเบราว์เซอร์ เช่น การค้นหาในหน้า (Ctrl+F) ไม่ทำงานหลังจาก การโหลดหน้าเว็บ เสมือน ปัญหานี้อาจบ่งบอกถึงวิธีที่ SPA อัปเดต DOM

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

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

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

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

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

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

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