ตั้งค่า Event และ Conversion บน Google Analytics 4

GA4 ต่างจากรุ่นก่อนตรงที่ทุกอย่างคือ Event ไม่มีแนวคิดเรื่อง Pageview แยกต่างหากอีกแล้ว การตั้งค่าจึงเปลี่ยนไปพอสมควร และหลายเว็บที่ย้ายมาใช้ยังไม่ได้ตั้ง Event ที่มีความหมายกับธุรกิจจริง จึงเห็นแค่จำนวนผู้เข้าชมโดยไม่รู้ว่ามีกี่คนที่ติดต่อเข้ามา

คู่มือนี้ตั้ง Event ที่วัดผลทางธุรกิจได้จริง และทำเครื่องหมายเป็น Key Event เพื่อให้เห็นในรายงานหลัก

สิ่งที่ต้องเตรียม (Conversion)

• บัญชี Google Analytics 4 และสิทธิ์ผู้ดูแล
• สิทธิ์แก้ไขโค้ดของเว็บ หรือ Google Tag Manager
• รายการสิ่งที่ถือว่าเป็นความสำเร็จของธุรกิจ

ขั้นตอนที่ 1: ตรวจว่าติดตั้งพื้นฐานถูกต้อง (Conversion)

curl -sL https://example.com | grep -oE 'G-[A-Z0-9]{8,}' | sort -u

ควรพบรหัสเดียว หากพบหลายรหัสแปลว่าติดตั้งซ้ำ ซึ่งทำให้ตัวเลขผิดพลาดเป็นสองเท่า

ใช้ DebugView ใน GA4 เพื่อดูเหตุการณ์แบบเรียลไทม์ เปิดโหมดดีบักด้วยการติดตั้งส่วนขยาย Google Analytics Debugger หรือเพิ่มพารามิเตอร์

gtag('config', 'G-XXXX', { debug_mode: true });

ขั้นตอนที่ 2: เข้าใจ Event ที่เก็บให้อัตโนมัติ (Conversion)

GA4 เก็บสิ่งเหล่านี้ให้เองเมื่อเปิด Enhanced Measurement ที่ Admin แล้ว Data Streams

• page_view การเปิดหน้า
• scroll เลื่อนถึง 90% ของหน้า
• click คลิกลิงก์ออกนอกเว็บ
• file_download ดาวน์โหลดไฟล์
• video_start และ video_complete สำหรับวิดีโอ YouTube ที่ฝังไว้
• form_start และ form_submit ซึ่งทำงานได้ไม่แน่นอนกับฟอร์มที่ใช้ JavaScript

Event เหล่านี้มีประโยชน์แต่ไม่ใช่สิ่งที่บอกผลทางธุรกิจ ต้องตั้งเพิ่มเอง

ขั้นตอนที่ 3: ตั้ง Event สำหรับการกดปุ่มโทร (Conversion)

สำหรับธุรกิจที่ลูกค้าโทรเข้ามา นี่คือตัวชี้วัดที่สำคัญที่สุด

<script>
document.addEventListener('click', function (e) {
  var link = e.target.closest('a[href^="tel:"]');
  if (!link) return;

  gtag('event', 'contact_call', {
    phone_number: link.getAttribute('href').replace('tel:', ''),
    link_text: link.textContent.trim().slice(0, 100),
    page_location: window.location.pathname
  });
});
</script>

ทำแบบเดียวกันกับปุ่ม LINE และ Messenger

document.addEventListener('click', function (e) {
  var link = e.target.closest('a[href*="line.me"], a[href*="m.me"]');
  if (!link) return;
  gtag('event', 'contact_chat', {
    channel: link.href.indexOf('line.me') > -1 ? 'line' : 'messenger',
    page_location: window.location.pathname
  });
});

ขั้นตอนที่ 4: ตั้ง Event สำหรับการส่งฟอร์ม

อย่าพึ่ง form_submit อัตโนมัติ เพราะฟอร์มที่ส่งด้วย AJAX มักไม่ถูกจับ ให้ยิง Event ตอนที่ส่งสำเร็จจริง

// Contact Form 7
document.addEventListener('wpcf7mailsent', function (e) {
  gtag('event', 'generate_lead', {
    form_id: e.detail.contactFormId,
    form_name: e.detail.unitTag,
    value: 1,
    currency: 'THB'
  });
});

// ฟอร์มทั่วไปที่ส่งด้วย fetch
async function submitForm(data) {
  const res = await fetch('/api/contact', { method: 'POST', body: JSON.stringify(data) });
  if (res.ok) {
    gtag('event', 'generate_lead', {
      form_name: 'contact_main',
      value: 1,
      currency: 'THB'
    });
  }
}

ยิง Event เมื่อสำเร็จเท่านั้น การยิงตอนกดปุ่มจะนับรวมกรณีที่กรอกข้อมูลผิดและส่งไม่สำเร็จด้วย

ขั้นตอนที่ 5: ตั้ง Event สำหรับร้านค้า

GA4 มี Event มาตรฐานสำหรับอีคอมเมิร์ซ ใช้ชื่อตามมาตรฐานเสมอเพื่อให้รายงานสำเร็จรูปทำงานได้

// ดูสินค้า
gtag('event', 'view_item', {
  currency: 'THB',
  value: 1290,
  items: [{ item_id: 'SKU123', item_name: 'เสื้อยืดคอกลม', item_category: 'เสื้อผ้า', price: 1290, quantity: 1 }]
});

// เพิ่มลงตะกร้า
gtag('event', 'add_to_cart', {
  currency: 'THB', value: 1290,
  items: [{ item_id: 'SKU123', item_name: 'เสื้อยืดคอกลม', price: 1290, quantity: 1 }]
});

// ซื้อสำเร็จ
gtag('event', 'purchase', {
  transaction_id: 'ORDER-2026-0912',
  currency: 'THB',
  value: 2580,
  shipping: 50,
  items: [{ item_id: 'SKU123', item_name: 'เสื้อยืดคอกลม', price: 1290, quantity: 2 }]
});

transaction_id จำเป็นและต้องไม่ซ้ำ GA4 ใช้ค่านี้กันการนับซ้ำเมื่อผู้ใช้รีเฟรชหน้าขอบคุณ