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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ประเด็นสำคัญ: หากคุณกำหนดค่าแท็กโดยใช้ Google Tag Manager อย่าเปิดใช้การติดตามประวัติอัตโนมัติใน Google Analytics เนื่องจากอาจทำให้เกิดการนับซ้ำการดูหน้าเว็บ แต่ให้ดูบทแนะนำวัดแอปพลิเคชันหน้าเว็บเดียวด้วย 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 ก่อนหน้าเพื่อตรวจสอบว่า URL ที่มาของหน้าเว็บและตำแหน่งหน้าเว็บได้รับการอัปเดตอย่างถูกต้องหรือไม่

ข้อควรพิจารณาเพิ่มเติมสำหรับ 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 ได้ ซึ่งจะช่วยให้เข้าใจเส้นทางของผู้ใช้ได้แม่นยำยิ่งขึ้น