คู่มือนี้อธิบายวิธีใช้ 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 ที่มาที่ไม่ถูกต้อง รวมถึงข้อมูลแคมเปญที่ไม่ถูกต้องดังที่อธิบายไว้ข้างต้น