วิธีติดตามหน้าเว็บใน Single Page Application (SPA) ด้วย Google Analytics

บทนำ

Single Page Application (SPA) โหลดทรัพยากรครั้งเดียวครั้งแรก แล้วเปลี่ยนเนื้อหาแบบไดนามิกโดยไม่โหลดหน้าใหม่ Google Analytics ต้องการการอัปเดต tracker ด้วยตนเองเมื่อเปลี่ยน "หน้า" ใน SPA

ขั้นตอนการติดตาม

1. อัปเดต Tracker (Update the tracker)

ga('set', 'page', '/new-page.html');

บอก GA ว่าผู้ใช้ "ไปที่" หน้าใหม่ โดยระบุ path ของหน้าใหม่

2. บันทึก Pageview (Record pageview)

ga('send', 'pageview');

ส่ง hit pageview ทันทีหลังอัปเดต tracker

ตัวอย่างการใช้งานกับ Router

Vue Router

router.afterEach((to) => {
  ga('set', 'page', to.fullPath);
  ga('send', 'pageview');
});

React Router

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function AnalyticsTracker() {
  const location = useLocation();
  
  useEffect(() => {
    ga('set', 'page', location.pathname + location.search);
    ga('send', 'pageview');
  }, [location]);
  
  return null;
}

Angular

// ใน AppComponent
constructor(private router: Router) {
  this.router.events
    .filter(event => event instanceof NavigationEnd)
    .subscribe((event: NavigationEnd) => {
      ga('set', 'page', event.urlAfterRedirects);
      ga('send', 'pageview');
    });
}

gtag.js (Google Analytics 4 / Universal Analytics)

// gtag.js syntax
gtag('config', 'GA_MEASUREMENT_ID', {
  page_path: '/new-page.html'
});

// หรือ
gtag('event', 'page_view', {
  page_path: '/new-page.html',
  page_title: 'New Page Title'
});

Best Practices

• อัปเดต tracker ก่อน send pageview เสมอ
• ใช้ path ที่สื่อความหมาย (ไม่ใช่ hash fragment อย่างเดียว)
• ตั้งค่า page_title ให้ถูกต้อง
• ทดสอบด้วย Real-time reports ใน GA
• พิจารณาใช้ gtag.js หรือ Google Tag Manager สำหรับการติดตั้งใหม่

สิ่งที่ควรหลีกเลี่ยง

• ส่ง pageview ซ้ำ (duplicate hits)
• ลืมอัปเดต tracker ก่อน send
• ใช้ hash fragment (#page) เป็น page path โดยไม่แปลง