Home
Analytics
Google Analytics 4 (GA4) สำหรับ Webflow — ติดตั้งให้ถูก + Events ครบ

Google Analytics 4 (GA4) สำหรับ Webflow — ติดตั้งให้ถูก + Events ครบ

วัดผลบน Webflow ด้วย GA4 ให้ “คลีนและใช้การได้จริง” — ติดผ่าน Google Tag หรือ GTM, เก็บ UTM/คลิกปุ่ม/ฟอร์ม, ตั้ง DebugView/Consent และส่งอีเวนต์เข้า GA4 อย่างเป็นระบบ
🤝 ไปยังเว็บไซต์
Google Analytics 4 (GA4)
*ลิงก์ที่ปุ่มเป็นลิงก์แบบ Affiliate ถ้าคุณซื้อคลิกและซื้อซอฟต์แวร์ตัวนี้ Vision x Brain จะได้รับค่าแนะนำ โดยที่คุณไม่มีค่าใช้จ่ายใดๆ เพิ่มเติม

GA4 ช่วยวัดผล Webflow อย่างแม่นยำเมื่อวางโครงอีเวนต์ให้ดี: เลือกติดตั้งผ่าน Google Tag หรือ GTM, เก็บ UTM/Client ID, ติดตาม form_submit/cta_click/outbound/scroll และตรวจใน DebugView ก่อนขึ้นจริง พร้อมโหมดยินยอม (Consent).

Analytics GA4 GTM Events UTM

ข้ามไป: อีเวนต์ที่ควรมี · วิธีติดตั้ง · เปรียบเทียบ Google Tag vs GTM · โค้ดตัวอย่าง · เช็กลิสต์ · FAQ

ตาราง: อีเวนต์ GA4 ที่ควรตั้งบน Webflow

Eventเกิดจากพารามิเตอร์แนะนำใช้ทำอะไร
form_submit ส่งฟอร์ม Webflow form_id, form_name, page_location นับลีดจริง, ผูกกับ UTM
cta_click คลิกปุ่มสำคัญ button_text, section, page_location วัด CRO ของ CTA
outbound_click คลิกลิงก์ออกนอกโดเมน link_url, link_domain, page_location เข้าใจเส้นทางออก
scroll เลื่อนถึง 50%/90% percent_scrolled, page_location ดูการมีส่วนร่วมกับหน้า

อยากได้สกีมาพารามิเตอร์ + GTM container ตั้งค่าแล้ว? คุยกับทีม Vision X Brain

How-to: ติด GA4 บน Webflow (2 ทางเลือก)

  1. Google Tag (gtag.js): สร้าง Measurement ID (G-XXXX) → วางสคริปต์ใน Site settings → Custom code → Head.
  2. Google Tag Manager (GTM): วาง Container code ใน Head/Body → ใช้แท็ก GA4 + ทริกเกอร์คลิก/ฟอร์ม/สกรอลล์.
  3. ตั้ง UTM/Client ID: เก็บ UTM ใน localStorage และแนบกับฟอร์ม/อีเวนต์.
  4. ทดสอบ ด้วย DebugView และ Tag Assistant ก่อน Publish.
  5. Consent: ตั้งค่าการยินยอมให้ตรงนโยบาย แล้วค่อยเปิดวัดผลเมื่อยอมรับ.

ตาราง: Google Tag vs GTM

วิธีจุดเด่นข้อควรระวังเหมาะกับ
Google Tag (gtag.js) เบา/เร็ว ตั้งน้อย ลอจิกซับซ้อนน้อยกว่า เว็บเล็ก–กลาง ต้องการวัดผลหลัก
GTM ยืดหยุ่นสูง คุมทริกเกอร์ละเอียด ต้องดูแลคอนเทนเนอร์ ทีมมาร์เก็ตติ้ง/เอเจนซี หลายแคมเปญ

โค้ดตัวอย่าง (ก๊อปวางใน Custom Code)

<!-- 1) Google Tag: ใส่ใน <head> ทั้งไซต์ -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config','G-XXXXXXXX'); // ใส่ Measurement ID ของคุณ

  // เก็บ UTM ลง localStorage เพื่อใช้กับฟอร์ม/อีเวนต์
  (function(){
    const q = new URLSearchParams(location.search);
    ['utm_source','utm_medium','utm_campaign','utm_content','utm_term'].forEach(k => {
      const v = q.get(k); if(v) localStorage.setItem(k, v);
    });
  })();

  // ติดตามคลิก CTA (ปุ่มที่มี data-cta)
  document.addEventListener('click', e => {
    const b = e.target.closest('[data-cta]');
    if(!b) return;
    gtag('event','cta_click',{
      button_text: (b.innerText || '').trim(),
      section: b.getAttribute('data-cta') || 'unknown',
      page_location: location.href
    });
  });

  // ติดตามลิงก์ออกนอกโดเมน
  document.addEventListener('click', e => {
    const a = e.target.closest('a[href]');
    if(!a) return;
    const url = new URL(a.href, location.href);
    if(url.hostname !== location.hostname){
      gtag('event','outbound_click',{
        link_url: url.href,
        link_domain: url.hostname,
        page_location: location.href
      });
    }
  });

  // ติดตามส่งฟอร์ม Webflow
  document.addEventListener('submit', e => {
    const f = e.target;
    if(!(f instanceof HTMLFormElement)) return;
    // แนบ UTM ลง hidden field ถ้าต้องส่งเข้า CMS/CRM
    ['utm_source','utm_medium','utm_campaign','utm_content','utm_term'].forEach(k => {
      let input = f.querySelector('input[name="'+k+'"]');
      if(!input){ input = document.createElement('input'); input.type='hidden'; input.name=k; f.appendChild(input); }
      input.value = localStorage.getItem(k) || '';
    });
    gtag('event','form_submit',{
      form_id: f.id || f.getAttribute('name') || 'webflow_form',
      form_name: f.getAttribute('data-name') || '',
      page_location: location.href
    });
  }, true);

  // ติดตามสกรอลล์ถึง 50% และ 90%
  (function(){
    let s50=false, s90=false;
    window.addEventListener('scroll', () => {
      const p = (window.scrollY + window.innerHeight) / document.documentElement.scrollHeight * 100;
      if(!s50 && p >= 50){ s50=true; gtag('event','scroll',{ percent_scrolled: 50, page_location: location.href }); }
      if(!s90 && p >= 90){ s90=true; gtag('event','scroll',{ percent_scrolled: 90, page_location: location.href }); }
    }, {passive:true});
  })();
</script>

เช็กลิสต์ก่อนขึ้นโปรดักชัน

  • เปิด DebugView ตรวจอีเวนต์จริงทุกตัว (form/cta/outbound/scroll)
  • กำหนด พารามิเตอร์มาตรฐาน ให้สม่ำเสมอ และบันทึกใน Data Dictionary
  • ตรวจ Consent และข้อความนโยบายความเป็นส่วนตัว
  • ตั้ง Conversion ใน GA4 (เช่น form_submit, purchase)
  • ทดสอบหลายโดเมน/ซับโดเมน (ถ้ามี) และตั้ง Cross-domain ตามต้องการ

บริการ/คอนเทนต์ที่เกี่ยวข้อง (Internal Links)

FAQ (People Also Ask)

เลือก Google Tag หรือ GTM ดี?
ถ้าต้องการวัดผลหลัก ๆ เริ่มไว ใช้ Google Tag; ถ้าต้องแคมเปญหลากหลาย/ลอจิกซับซ้อน ใช้ GTM จะยืดหยุ่นกว่า

ทำไมอีเวนต์ไม่เข้า GA4?
เช็ค DebugView/Tag Assistant, ดูว่าโดนบล็อกด้วย Consent/Adblock หรือพารามิเตอร์สะกดผิด

ต้องเก็บ UTM ยังไง?
เก็บใน localStorage/cookie แล้วแนบกับฟอร์มหรือส่งเป็นพารามิเตอร์อีเวนต์

อัปเดตล่าสุด: 10 Aug 2025

แชร์

Integration Insights

Make (Integromat) สำหรับ Webflow — ออโตเมชัน No-code

ออโตเมชัน No-code สำหรับ Webflow: ฟอร์ม→CRM/Sheets, สร้าง/อัปเดต+Publish CMS และแจ้งเตือนทีม—เริ่มไว ใช้งานได้จริงสำหรับทีมไทย

ดู Insights Tools
Zapier สำหรับ Webflow — เริ่มไว เทมเพลตเยอะ

ออโตเมชัน No-code สำหรับ Webflow ที่เริ่มไวและเทมเพลตเยอะ—ดันฟอร์ม→CRM/Sheets, Create/Update CMS และ (ถ้าต้องการ) Publish/Live ผ่าน Webhooks ได้ พร้อมเวิร์กโฟลว์ตัวอย่างใช้งานจริง

ดู Insights Tools
n8n สำหรับ Webflow — ออโตเมชันโอเพนซอร์ส (Self-hosted)

ออโตเมชันโอเพนซอร์สที่โฮสต์เองได้ เชื่อม Webflow ผ่าน Webhooks/HTTP node สร้าง–อัปเดต–Publish CMS อัตโนมัติ คุมต้นทุน/ความปลอดภัยได้ เหมาะทีม Dev/IT

ดู Insights Tools