หน้านี้อธิบายวิธีใช้ gtag.js เพื่อวัดการโต้ตอบกับหน้าเว็บในเว็บไซต์ที่โหลดเนื้อหาแบบไดนามิก โดยไม่มีการโหลดหน้าเว็บทั้งหน้าตามแบบดั้งเดิม
ภาพรวม
แอปพลิเคชันหน้าเว็บเดียว (SPA) คือเว็บแอปพลิเคชันหรือเว็บไซต์ที่โหลดทรัพยากรทั้งหมดที่จำเป็นต่อการไปยังส่วนต่างๆ ของเว็บไซต์เมื่อโหลดหน้าเว็บครั้งแรก เมื่อผู้ใช้คลิกลิงก์และโต้ตอบกับหน้าเว็บ เนื้อหาที่ตามมาจะโหลดแบบไดนามิก แอปพลิเคชันมักจะอัปเดต URL ในแถบที่อยู่เพื่อเลียนแบบการนำทางหน้าเว็บแบบดั้งเดิม แต่จะไม่มีการส่งคำขอข้อมูลแบบเต็มหน้าแยกต่างหาก
แท็ก Google ทำงานได้ดีกับเว็บไซต์แบบดั้งเดิม เนื่องจากข้อมูลโค้ดจะทำงานทุกครั้งที่ผู้ใช้โหลดหน้าเว็บใหม่ อย่างไรก็ตาม สำหรับแอปพลิเคชันหน้าเว็บเดียวที่เว็บไซต์โหลดเนื้อหาของหน้าใหม่แบบไดนามิกแทนการโหลดหน้าเว็บแบบเต็ม ข้อมูลโค้ด gtag.js จะทำงานเพียงครั้งเดียว ซึ่งหมายความว่าคุณต้องวัดการดูหน้าเว็บที่เกิดตามมา (เสมือน) ด้วยตนเองเมื่อโหลดเนื้อหาใหม่
วัดการเปิดดูหน้าเว็บเสมือน
เมื่อแอปพลิเคชันโหลดเนื้อหาแบบไดนามิกและอัปเดต URL ในแถบที่อยู่ คุณควรอัปเดต URL ของหน้าเว็บที่จัดเก็บไว้ใน gtag.js ด้วย นอกจากนี้ คุณยังวัดการเปลี่ยนแปลงที่อยู่ในเว็บไซต์ได้จากการดูหน้าเว็บ
หากต้องการตั้งค่ารายงานเส้นทาง gtag.js ให้ใช้คำสั่ง set เพื่อระบุค่าสำหรับพารามิเตอร์ page_path ดังนี้
gtag('set', 'page_path', page_path);
gtag('event', 'page_view');
เช่น
gtag('set', 'page_path', '/new-page.html');
gtag('event', 'page_view');
หลังจากเพิ่มค่าใหม่สำหรับ page_path แล้ว เหตุการณ์ต่อๆ มาทั้งหมดที่ส่งไปยังพร็อพเพอร์ตี้นั้นจะใช้ค่าใหม่นั้น
การจัดการ URL หลายรายการสำหรับทรัพยากรเดียวกัน
SPA บางรายจะอัปเดตเฉพาะส่วนแฮชของ URL เมื่อโหลดเนื้อหาแบบไดนามิกเท่านั้น วิธีนี้อาจทำให้เกิดสถานการณ์ที่มีเส้นทางหน้าเว็บหลายเส้นทางนำไปยังแหล่งข้อมูลเดียวกัน ในกรณีดังกล่าว วิธีที่ดีที่สุดคือการเลือก Canonical URL และส่งเฉพาะค่า page_path นั้นไปยัง Google Analytics
เช่น ลองพิจารณาเว็บไซต์ที่มีหน้า "เกี่ยวกับเรา" ที่เข้าถึงได้ผ่านทาง URL ต่อไปนี้
/about/#/about/home/#/about
เพื่อป้องกันไม่ให้รายงานซ้ำซ้อนกัน วิธีที่ดีที่สุดคือบันทึกหน้าเหล่านี้ทั้งหมดโดยใช้ /about สำหรับ page_path