วัดผลแอปหน้าเดียวด้วย Google Tag Manager

บทแนะนำนี้จะแสดงวิธีตั้งค่าการวัดผลของ Google Analytics สำหรับแอปพลิเคชันหน้าเดียว (SPA) โดยใช้ Google Tag Manager คุณจะได้เรียนรู้วิธีกำหนดค่าพร็อพเพอร์ตี้ Google Analytics, เปิดใช้ตัวแปร GTM ที่จำเป็น และสร้างแท็กที่จะทริกเกอร์เมื่อมีการเปลี่ยนแปลงประวัติ

ก่อนเริ่มต้น

บทแนะนำนี้ถือว่าคุณมีสิ่งต่อไปนี้

ขั้นตอนที่ 1: เตรียมสตรีมข้อมูล GA4

หากต้องการติดตามเหตุการณ์ page_view ใน SPA ด้วยตนเอง คุณต้องปิดใช้การดูหน้าเว็บตามประวัติอัตโนมัติใน GA4 ก่อนเพื่อหลีกเลี่ยงการนับซ้ำ

  1. เปิด Google Analytics
  2. ในส่วนผู้ดูแลระบบ ภายใต้ การเก็บรวบรวมข้อมูลและการแก้ไข ให้คลิกสตรีมข้อมูล
  3. เลือกสตรีมข้อมูลเว็บ
  4. ในส่วนการวัดผลที่ปรับปรุงแล้ว ให้คลิกไอคอนการตั้งค่า
  5. ในส่วนการดูหน้าเว็บ > แสดงการตั้งค่าขั้นสูง ให้ยกเลิกการเลือกการเปลี่ยนแปลงหน้าเว็บตามเหตุการณ์ประวัติของเบราว์เซอร์
  6. คลิกบันทึก

ขั้นตอนที่ 2: เปิดใช้ตัวแปรประวัติในตัวใน Tag Manager

หากต้องการใช้ทริกเกอร์หรือตัวแปรตามประวัติใน GTM คุณต้องเปิดใช้ตัวแปรประวัติในตัวก่อน

  1. เปิด Google Tag Manager
  2. ในพื้นที่ทำงาน ให้ไปที่ตัวแปร
  3. ในส่วนตัวแปรบิวท์อิน ให้คลิกกำหนดค่า
  4. ในส่วนประวัติ ให้เปิดใช้ตัวแปรต่อไปนี้
    • History New URL Fragment
    • History Old URL Fragment
    • History New State
    • History Old State
    • History Source
  5. ปิดแผงการกำหนดค่า

ขั้นตอนที่ 3: สร้างทริกเกอร์การเปลี่ยนแปลงประวัติ

จากนั้นสร้างทริกเกอร์ที่จะเริ่มทำงานเมื่อเกิดเหตุการณ์การเปลี่ยนแปลงประวัติ (เช่น pushState หรือ replaceState) ใน SPA

  1. ในพื้นที่ทำงาน Tag Manager ให้ไปที่เมนูทริกเกอร์
  2. คลิกใหม่
  3. ในการกำหนดค่าทริกเกอร์ ให้เลือกทริกเกอร์การเปลี่ยนแปลงประวัติ
  4. (ไม่บังคับ) หากต้องการติดตามเฉพาะการเปลี่ยนแปลงหน้าจอที่ต้องการ ให้อัปเดตทริกเกอร์ให้เริ่มทำงานเมื่อมีการเปลี่ยนแปลงประวัติบางอย่าง
  5. ตั้งชื่อทริกเกอร์ (เช่น "การเปลี่ยนแปลงประวัติ") แล้วคลิกบันทึก

ขั้นตอนที่ 4: สร้างแท็ก Google

ตอนนี้ให้สร้างแท็ก Google ที่อัปเดตพารามิเตอร์ page_location ทุกครั้งที่เกิดการเปลี่ยนแปลงประวัติ

  1. คลิกใหม่ ในเมนูแท็ก
  2. ในการกำหนดค่าแท็ก ให้เลือกแท็ก Google
  3. ป้อนรหัสแท็ก (รหัสเดียวกับที่ใช้สำหรับแท็ก Google เริ่มต้น)

  4. ในส่วนการตั้งค่าการกำหนดค่า ให้เพิ่มพารามิเตอร์ต่อไปนี้

    • page_location: {{Page URL}}
    • page_title: {{Page Title}}
    • update: true

  5. ตั้งชื่อแท็ก (เช่น "แท็ก Google - การอัปเดต SPA") แล้วคลิกบันทึก

ขั้นตอนที่ 5: ส่งเหตุการณ์ page_view เสมือน

สุดท้าย ให้สร้างแท็กเหตุการณ์ GA4 เพื่อส่งเหตุการณ์ page_view จริงสำหรับการโหลดหน้าเว็บเสมือนแต่ละครั้ง

  1. คลิกใหม่ ในเมนูแท็ก
  2. ในการกำหนดค่าแท็ก ให้เลือกเหตุการณ์ Google Analytics: GA4
  3. ป้อนรหัสการวัด
  4. ตั้งค่าชื่อเหตุการณ์ เป็น page_view
  5. ในส่วนการตั้งค่าขั้นสูง > ลำดับแท็ก ให้เลือกเริ่มทำงานแท็กก่อนที่เหตุการณ์ GA4 - การดูหน้าเสมือนจะเริ่มทำงาน แล้วเลือกแท็กแท็ก Google - การอัปเดต SPA ที่คุณสร้างในขั้นตอนที่ 4
  6. ในส่วนการทริกเกอร์ ให้เลือกทริกเกอร์การเปลี่ยนแปลงประวัติ ที่คุณสร้าง ในขั้นตอนที่ 3
  7. ตั้งชื่อแท็ก (เช่น "เหตุการณ์ GA4 - การดูหน้าเสมือน") แล้วคลิกบันทึก

ขั้นตอนที่ 6: ยืนยันการตั้งค่า

วิธีตรวจสอบว่าระบบบันทึกการดูหน้าเสมือนอย่างถูกต้อง

  1. ใน Tag Manager ให้คลิกแสดงตัวอย่าง เพื่อเข้าสู่โหมด แสดงตัวอย่าง
  2. ไปยังส่วนต่างๆ ใน SPA
  3. ใน Google Analytics DebugView ให้ตรวจสอบว่าเหตุการณ์ใหม่ page_viewปรากฏขึ้นสำหรับการเปลี่ยนแปลงหน้าจอแต่ละครั้ง
  4. ตรวจสอบว่าค่า page_location ตรงกับที่คุณคาดไว้
ก่อนหน้า
วัดแอปพลิเคชันหน้าเว็บเดียว (SPA)
ถัดไป
ตั้งค่าเหตุการณ์การซื้อ