คู่มือนี้อธิบายวิธีใช้ analytics.js เพื่อวัดกิจกรรมของหน้าเว็บในเว็บไซต์ที่มีการโหลดเนื้อหาแบบไดนามิกโดยไม่ต้องโหลดหน้าเว็บแบบเต็มหน้า
ภาพรวม
แอปพลิเคชันหน้าเว็บเดียว (SPA) คือเว็บแอปพลิเคชันหรือเว็บไซต์ที่โหลดทรัพยากรทั้งหมดที่จําเป็นในการไปยังส่วนต่างๆ ของเว็บไซต์ในการโหลดหน้าเว็บหน้าแรก เมื่อผู้ใช้คลิกลิงก์และโต้ตอบกับหน้าเว็บ เนื้อหาที่ตามมาจะโหลดแบบไดนามิก แอปพลิเคชันนี้มักจะอัปเดต URL ในแถบที่อยู่เพื่อจําลองการนําทางของหน้าแบบดั้งเดิม แต่ระบบไม่ได้สร้างคําขอแบบเต็มหน้า
แท็ก Google Analytics ที่เป็นค่าเริ่มต้นทํางานได้ดีกับเว็บไซต์แบบดั้งเดิม เนื่องจากโค้ดข้อมูลโค้ดจะทํางานทุกครั้งที่ผู้ใช้โหลดหน้าเว็บใหม่ อย่างไรก็ตาม สําหรับแอปพลิเคชันหน้าเว็บเดียวที่เว็บไซต์โหลดเนื้อหาหน้าเว็บใหม่แบบไดนามิกแทนการโหลดหน้าเว็บแบบเต็ม ข้อมูลโค้ด analytics.js จะทํางานเพียงครั้งเดียวเท่านั้น ซึ่งหมายความว่าจะมีการจับภาพการดูหน้าเว็บที่ตามมา (เสมือน) ด้วยตนเองเมื่อมีการโหลดเนื้อหาใหม่
การติดตามการเปิดดูหน้าเว็บเสมือน
เมื่อแอปพลิเคชันโหลดเนื้อหาแบบไดนามิกและอัปเดต URL ในแถบที่อยู่ ควรอัปเดตข้อมูลที่เก็บไว้ในเครื่องติดตามด้วยเช่นกัน
หากต้องการอัปเดตเครื่องมือติดตาม ให้ใช้คําสั่ง set และใส่ค่า page ใหม่ ดังนี้
ga('set', 'page', '/new-page.html');
หลังจากที่กําหนดมูลค่าหน้าเว็บใหม่แล้ว Hit ที่ตามมาทั้งหมดที่ส่งจะใช้ค่านั้น หากต้องการบันทึกการดูหน้าเว็บ ให้ส่ง Hit การดูหน้าเว็บทันทีหลังจากที่อัปเดตเครื่องมือติดตาม
ga('set', 'page', '/new-page.html');
ga('send', 'pageview');
แม้ว่าในทางเทคนิค คําสั่ง send สําหรับ Hit การดูหน้าเว็บจะยอมรับช่อง page ซึ่งไม่บังคับเป็นพารามิเตอร์ที่ 3 แต่เราไม่แนะนําให้ส่งช่อง page ด้วยวิธีนี้เมื่อวัดแอปพลิเคชันหน้าเว็บเดียว เนื่องจากช่องที่ส่งผ่านคําสั่ง send ไม่ได้ตั้งค่าอยู่ในเครื่องมือติดตาม แต่จะมีผลกับ Hit ปัจจุบันเท่านั้น หากไม่อัปเดตเครื่องมือติดตาม จะทําให้เกิดปัญหาหากแอปพลิเคชันส่ง Hit ที่ไม่ใช่การดูหน้าเว็บ (เช่น เหตุการณ์หรือการโต้ตอบทางโซเชียล) เนื่องจาก Hit เหล่านั้นจะเชื่อมโยงกับค่า page ที่เครื่องมือติดตามมีขณะสร้าง
การจัดการ URL หลายรายการสําหรับทรัพยากรเดียวกัน
SPA บางรายการจะอัปเดตเฉพาะส่วนแฮชของ URL เมื่อโหลดเนื้อหาแบบไดนามิกเท่านั้น การดําเนินการนี้อาจทําให้เกิดสถานการณ์ที่เส้นทางหน้าเว็บหลายเส้นทางชี้ไปยังทรัพยากรเดียวกัน ในกรณีดังกล่าว คุณควรเลือก Canonical URL และส่งค่า page นั้นไปยัง Google Analytics เท่านั้น
เช่น ลองพิจารณาเว็บไซต์ที่ ""เกี่ยวกับเรา" สามารถเข้าถึงหน้าเว็บได้จาก URL ต่อไปนี้
/about.html/#about.html/home.html#about.html
เพื่อหลีกเลี่ยงการทําซ้ําในรายงาน คุณควรบันทึกการดูหน้าเว็บทั้งหมดเหล่านี้เป็น /about.html
สิ่งสําคัญที่ควรพิจารณา
ไม่ต้องอัปเดต URL ที่มาของเอกสาร
เมื่อคุณสร้างออบเจ็กต์เครื่องมือติดตามโดยใช้คําสั่ง create ระบบจะจัดเก็บค่าของ document.referrer ในช่อง referrer ของเครื่องมือติดตาม ในบริบทของแอปพลิเคชันหน้าเว็บเดียวที่ไม่ได้ใช้การโหลดหน้าเว็บแบบเต็ม ช่อง referrer จะยังคงเหมือนเดิมเสมอ
อย่างไรก็ตาม คุณไม่จําเป็นต้องอัปเดตช่องผู้อ้างอิงด้วยตนเองก่อนส่ง Hit การดูหน้าเว็บ Google Analytics สามารถกําหนดเส้นทางการนําทางที่ถูกต้องได้โดยอัตโนมัติ
ไม่ต้องอัปเดตตําแหน่งเอกสาร
ในลักษณะเดียวกับที่เครื่องมือติดตามใช้ document.referrer สําหรับช่อง referrer แท็กนี้จะใช้ document.location สําหรับช่อง location ซึ่งอาจมีข้อมูลแคมเปญหรือข้อมูลเมตาอื่นๆ ในรูปแบบของพารามิเตอร์การค้นหาต่อท้าย URL
การอัปเดตช่องแคมเปญหรือข้อมูลเมตาอื่นๆ ที่ Google Analytics กําลังตรวจสอบอาจทําให้เซสชันปัจจุบันสิ้นสุดและเซสชันใหม่จะเริ่มขึ้น โปรดอย่าอัปเดตช่อง location เมื่อวัดการเปิดดูหน้าเว็บเสมือนในแอปพลิเคชันหน้าเว็บเดียวเพื่อหลีกเลี่ยงปัญหานี้ โปรดใช้ช่อง page แทน
ไม่สร้างเครื่องมือติดตามใหม่
อย่าสร้างเครื่องมือติดตามใหม่ในแอปหน้าเดียวเพื่อพยายามเลียนแบบข้อมูลโค้ดการติดตาม JavaScript ของเว็บไซต์แบบดั้งเดิม เพราะการดําเนินการนี้จะทําให้มีความเสี่ยงที่จะส่งต่อ URL ที่มาที่ไม่ถูกต้องรวมทั้งข้อมูลแคมเปญที่ไม่ถูกต้องดังที่อธิบายไว้ข้างต้น