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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. เปิด Google Analytics

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

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

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

   

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

หมายเหตุ: เมื่อเปิดใช้การวัดที่ปรับปรุงแล้วสำหรับ "การเปลี่ยนแปลงหน้าเว็บตามเหตุการณ์ประวัติการเข้าชมของเบราว์เซอร์" Google Analytics จะรอฟังเหตุการณ์ประวัติ (เช่น เหตุการณ์ที่ใช้ใน SPA) โดยอัตโนมัติและส่งเหตุการณ์ page_view คุณไม่จำเป็นต้องกำหนดค่าตัวแปรหรือทริกเกอร์ประวัติที่เฉพาะเจาะจงใน Google Tag Manager เพื่อวัตถุประสงค์ในการส่งการดูหน้าเว็บไปยัง GA4

ใช้ทริกเกอร์ Google Tag Manager สำหรับเหตุการณ์ประวัติ

หากต้องการเริ่มทำงานแท็กประเภทอื่นๆ ใน Google Tag Manager ตามการเปลี่ยนแปลงประวัติการเข้าชมของเบราว์เซอร์ เช่น เพื่อส่งข้อมูลไปยังแพลตฟอร์มการตลาดอื่นๆ คุณสามารถใช้ประเภททริกเกอร์ "การเปลี่ยนแปลงประวัติ" ได้

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

• History New URL Fragment: ส่วนย่อยของ URL หลังจากเหตุการณ์ประวัติ
• History Old URL Fragment: ส่วนย่อยของ URL ก่อนเหตุการณ์ประวัติ
• History New State: ออบเจ็กต์สถานะประวัติใหม่
• History Old State: ออบเจ็กต์สถานะประวัติเก่า
• History Source: แหล่งที่มาของเหตุการณ์ประวัติ (เช่น popstate, pushState, replaceState)

คุณอาจต้องเปิดใช้ตัวแปรที่มีให้เหล่านี้ใน Google Tag Manager ก่อนในส่วนตัวแปร > กำหนดค่า

ดูรายละเอียดเพิ่มเติมเกี่ยวกับทริกเกอร์นี้ได้ที่ ทริกเกอร์การเปลี่ยนแปลงประวัติ

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

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

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 ได้ ทำให้คุณเข้าใจเส้นทางของผู้ใช้ได้แม่นยำยิ่งขึ้น