วัดผลการคลิกปุ่ม (Button Click Tracking) ทุกจุดบนเว็บ

หลังจากที่เราติดตั้งและ Debug เป็นแล้วในบทก่อนหน้า วันนี้เราจะมาเข้าสู่ Workshop แรกที่สำคัญที่สุดครับ นั่นคือการ "วัดผลการคลิกปุ่ม"

ทำไมต้องวัดผลปุ่ม? เพราะในโลกธุรกิจ "การคลิก" คือสัญญาณของความสนใจ (Intent) ครับ ไม่ว่าจะเป็นปุ่ม "แอดไลน์", "โทรหาเรา" หรือ "สั่งซื้อสินค้า" ถ้าเรารู้ว่าใครคลิกปุ่มไหน เราจะรู้ทันทีว่าเว็บเราทำเงินได้จริงหรือไม่

บทนี้ผมจะพาเพื่อน ๆ ไปจับมือทำทีละขั้นตอน ตั้งแต่การหา ID ของปุ่ม ไปจนถึงส่งข้อมูลเข้า GA4 ครับ

Step 1: เปิดใช้งาน Click Variables (เปิดหูเปิดตาให้ GTM)

โดยค่าเริ่มต้น GTM จะไม่ได้เก็บข้อมูลการคลิกมาให้เราครับ เราต้องไป "เปิดสวิตช์" ก่อน เพื่อให้ GTM รู้จักตัวแปรที่เกี่ยวกับการคลิก

1. ไปที่เมนู Variables ด้านซ้ายมือ
2. ในส่วน Built-In Variables กดปุ่ม Configure
3. เลื่อนลงมาหมวด Clicks แล้วติ๊กถูกให้หมดทุกช่องครับ
   * Click ID (สำคัญมาก)
   * Click Class
   * Click Text
   * Click URL
   * Click Target
   * Click Element

เมื่อติ๊กเสร็จแล้ว GTM จะพร้อมรับข้อมูลทันทีที่มีการคลิกเกิดขึ้นครับ

Step 2: หา "ตัวระบุตัวตน" ของปุ่มที่เราจะ Track

ขั้นตอนนี้ต้องใช้ความเป็น Web Dev นิดนึงครับ เราต้องรู้ก่อนว่าปุ่มที่เราอยากวัดผลมีหน้าตา Code เป็นยังไง

1. เปิดหน้าเว็บไซต์ของคุณ แล้วคลิกขวาที่ปุ่มที่ต้องการ (สมมติเป็นปุ่มแอดไลน์)
2. เลือก Inspect (ตรวจสอบ)
3. ดู Code ที่ Highlight ไว้ครับ ว่ามี id="..." หรือ class="..." หรือไม่

ตัวอย่าง Code ปุ่มบนหน้าเว็บ:

<button id="btn-add-line" class="social-button green">
  แอดไลน์เพื่อสอบถาม
</button>

จากตัวอย่างนี้ เราได้ข้อมูลสำคัญคือ:

• Click ID: btn-add-line (แม่นยำที่สุด แนะนำให้ใช้อันนี้)
• Click Class: social-button green
• Click Text: แอดไลน์เพื่อสอบถาม

Step 3: สร้าง Trigger (ตั้งเงื่อนไขการดักจับ)

เมื่อเรารู้แล้วว่าเป้าหมายคือ ID btn-add-line เราก็มาสร้างกับดัก (Trigger) กันครับ

1. ไปที่เมนู Triggers -> กด New
2. Trigger Configuration: เลือกประเภท Click - All Elements
3. เปลี่ยนจาก All Clicks เป็น Some Clicks

4. ตั้งเงื่อนไขดังนี้:
   * Click ID -> equals -> btn-add-line

5. ตั้งชื่อ Trigger ว่า Click - Line Button แล้วกด Save

Son's Note: ถ้าปุ่มของเพื่อน ๆ เป็นลิงก์ (Tag <a>) การเลือกประเภท Trigger เป็น Just Links จะทำงานได้ดีกว่า All Elements ครับ แต่ถ้าไม่ชัวร์ ใช้ All Elements ไว้ก่อนครับ ครอบคลุมสุด

Step 4: สร้าง Tag (ส่งข้อมูลไป GA4)

เมื่อดักจับการคลิกได้แล้ว ต่อไปคือการส่งข้อมูลนี้ไปบอก GA4 ครับ

1. ไปที่เมนู Tags -> กด New
2. Tag Configuration: เลือก Google Analytics: GA4 Event
3. Measurement ID: ใส่เลข ID ของเรา (หรือเลือก Variable ที่เราสร้างไว้ใน Ep. 3)
4. Event Name: ตั้งชื่อ Event ที่จะไปโชว์ใน Report (ห้ามเว้นวรรค) เช่น click_line_contact
5. Triggering: เลือก Trigger Click - Line Button ที่เราสร้างไว้เมื่อกี้
6. กด Save

Step 5: ทดสอบด้วย Preview Mode (ห้ามลืม!)

อย่างที่ย้ำกันเสมอครับ "ห้าม Publish ถ้ายังไม่ได้ Preview"

1. กด Preview ใส่ URL เว็บเรา
2. เมื่อหน้าเว็บเด้งขึ้นมา ให้ลอง คลิกปุ่มแอดไลน์ จริงๆ 1 ครั้ง
3. กลับมาดูหน้า Tag Assistant
4. ในหน้า Summary ด้านซ้าย คลิกที่เหตุการณ์ Click ล่าสุด
5. ดูว่า Tag ที่ชื่อ GA4 Event - Click Line เด้งขึ้นมาอยู่ในช่อง Tags Fired หรือไม่?

ถ้าขึ้น Fired แปลว่าข้อมูลถูกส่งไป GA4 เรียบร้อยครับ! ยินดีด้วย คุณ Tracking ปุ่มแรกสำเร็จแล้ว!

ตารางสรุป: เลือกใช้ Variable ไหนดี?

เวลาจะ Track ปุ่ม เราควรเลือกใช้อะไรเป็นเกณฑ์ดี? ดูตารางนี้ครับ

สรุปบทเรียน

ในบทนี้เพื่อน ๆ ได้เรียนรู้วิธีการเปลี่ยน "การกระทำบนหน้าเว็บ" ให้กลายเป็น "Data" เรียบร้อยแล้วครับ เทคนิคนี้สามารถนำไปประยุกต์ใช้ได้กับทุกปุ่ม ไม่ว่าจะเป็นปุ่มโทร, ปุ่ม Download PDF, หรือปุ่ม Play Video

ในบทถัดไป (Ep. 6) เราจะขยับไปสู่ Platform ยอดฮิตของแม่ค้าออนไลน์ นั่นคือการ "ติดตั้ง Facebook Pixel (Meta Pixel) ผ่าน GTM" เพื่อเตรียมตัวยิงแอดให้แม่นยำขึ้นครับ

Tip: หากปุ่มสำคัญบนเว็บของเพื่อน ๆ ยังไม่มี ID (เช่น <button class="btn">Click</button>) อย่าพยายามฝืนใช้ Class ที่ซ้ำกันครับ ให้เดินไปบอก Developer หรือแก้ Code เองโดยเติม id="unique-name" เข้าไป จะทำให้การ Tracking แม่นยำและยั่งยืนกว่ามากครับ — Son, WebMastery.dev