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

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