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

เอกสารนี้มีไว้สำหรับนักพัฒนาแอปที่ต้องการวัดการดูหน้าเว็บใน แอปพลิเคชันหน้าเว็บเดียวโดยใช้ 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 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 ได้ ทําให้เข้าใจเส้นทางของผู้ใช้ได้แม่นยํามากขึ้น