วิธีการสร้าง Click Event Tracking ด้วย Google Tag Manager

วิธีการสร้าง Click Event Tracking ด้วย Google Tag Manager

ทุกวันนี้เราใช้ Google Analytics เพื่ออ่านและวิเคราะห์ข้อมูลต่างๆ นานา เช่น ในแต่ละวันคนเข้าเว็บของคุณเท่าไหร่ หรือ พวกเขาใช้เวลานานขนาดไหน แต่ในวันนี้ผมจะมาบอกว่าเราอาจจะต้องวิเคราะห์ไปให้ได้มากกว่านั้นอีกวันนี้เลยจะมาสอน วิธีการสร้าง Click Event Tracking เพื่อดูว่ามีคนคลิกปุ่ม หรือไลน์แอดบ้างหรือไม่

แนะนำให้อ่าน การติดตั้ง Click Event Tracking บน Google Analytics 4 Property โดยไม่ง้อ Tag Manager

Click Event ใน Google Tag Manager คืออะไร?

ก่อนที่จะเริ่มการสร้าง Click Event Tracking ด้วย GTM ผมขออธิบายก่อนว่าฟังก์ชั่นนี้มันคืออะไร รวมไปจนถึงจะต้องใช้งานอย่างไร เพื่อที่จะทำให้เราสามารถเก็บข้อมูลได้ถูกต้อง Click Event หน้าที่หลักๆ ของมันเลยก็คือ การตรวจสอบว่า Users คลิกไปในส่วนไหนของเว็บบ้าง แต่โดยส่วนมากเรามักจะใช้ตรวจสอบว่ามีคลิกในปุ่มไหนบ้าง เช่น แอดไลน์, คลิกไปที่เฟสบุ๊คแฟนเพจ หรือ คลิกที่หมายเลขโทรศัพท์ เป็นต้น แต่ฟังก์ชั่นนี้จะไม่ถูกรายงานใน Google Analytics ตั้งแต่ต้น ยกเว้นว่าเราจะมา Set Up เพื่อสร้างเป็นอีเว้นท์ให้ทาง GA ได้ทราบว่าได้เกิดอีเว้นท์ขึ้นแล้ว ทั้งหมดเราเลยเรียกว่า Event Tracking

วิธีการสร้าง Click Event Tracking ด้วย Google Tag Manager digi era ภาพที่ 1

Click Trigger และ Variable

สำหรับใน Google Tag Manager จะมี Click Trigger ให้เลือกใช้อยู่ 2 แบบด้วยกันนั่นก็คือ All Elements และ Just Link ทั้งสองต่างใช้เอาไว้วัดค่าอีเว้นท์คลิกเหมือนกัน แต่จุดประสงค์ในการใช้งานนั้นต่างกัน

  • All Elements มักจะใช้สำหรับตั้งค่าปุ่มต่างๆ บนเว็บไซต์ เช่น Submit Button เป็นต้น
  • Just Link มักจะใช้สำหรับการวัดค่าการคลิกไปยังเว็บไซต์อื่นๆ หรือ Outbounce เช่น คลิกเพื่อแอดไลน์ หรือ ไปยังแฟนเพจของเรา

ทั้งสอง Click Trigger จะสามารถทำงานได้เมื่อเราเซ็ต Click Variable ได้ถูกต้อง ซึ่งถ้าเราเพิ่งเริ่มใช้งานอาจจะต้องเปิดใช้งานก่อนโดยให้ไปที่ Variable แล้วเปิดอันที่เป็นของ Click Trigger ให้หมด โดยประกอบไปด้วย

  • Click Element
  • Click Class
  • Click ID
  • Click Target
  • Click URL
  • Click Text
Image 2 - click variable setting

เมื่อได้เปิดใช้งาน Click Variable ตามคำแนะนำด้านบนแล้ว ต่อมาเราก็จะมาทำการสร้าง Click Trigger ที่เป็นแบบ All Click กันก่อน ให้ย้อนกลับไปที่คำว่า Trigger ใน GTM แล้วเลือกเป็น All Clicks หลังจากนั้นให้กดคลิกเป็น ตั้งชื่อแล้วกดเซฟก่อนเลยครับ เมื่อกดเซฟแล้วให้กด Preview ในคราวนี้ผมจะทดสอบในหน้านี้ครับ staging.digi-era.co/demo/ 

Image 2 - even tracking click variable explain

เมื่อเราเข้าไปยังหน้าที่ได้ติดตั้ง Google Tag Manager เอาไว้ ทางระบบจะแสดงออมาเป็น Preview Mode เหมือนกับภาพด้านบน ผมได้ทดลองคลิกไปที่ปุ่ม Submit ทางด้านซ้ายก็จะโชว์ให้เห็นว่ามีการคลิกเกิดขึ้น หากแต่ว่ามันเป็น ‘All Click’ ซึ่งจะทำให้มันแสดงโชว์ทุกครั้งเมื่อเราได้คลิกไปลงในทุกพื้นที่ของเว็บไซต์เรา ดังนั้นเพื่อให้เกิดความแม่นยำใน เราจะต้องใช้ Click Variable เข้ามาเป็นตัวช่วยเพื่อเป็นกำหนดว่าจะให้ Trigger นี้ทำงานในตอนไหน เพราะถ้าเรานับทุกคลิกที่เกิดขึ้นดอาจจะทำให้สับสนได้

Click Variable ที่สามารถใช้ได้ประกอบไปด้วย

  • Click ID
  • Click Class
  • Click Text

ซึ่งระบบของทาง Google Tag Manager จะสามารถรู้ค่าเหล่านี้มาแล้วในเบื้องต้น ถ้าเว็บไซต์ได้กำหนด HTML + CSS มาอย่างถูกต้อง ในบางเว็บอาจจะขาด Click ID, Class หรืออาจจะมี Text อันนี้ก็อาจจะต้องให้ทาง Developer ช่วยใส่เพิ่มเติมเพื่อทำให้เกิดความง่ายในการตั้งค่า เหมือนกับภาพด้านล่าง

Image 3 - event tracking click variable explain id class and text
HTML อันนี้ผมดาวน์โหลดมาจาก https://html5up.net/story

จากภาพด้านบนเป็นตัวอย่าง HTML + CSS ธรรมดาที่ผมดาวน์โหลดของฟรีมาจากเว็บไซต์หนึ่ง จะสังเกตว่าสีแดงผมทำสีเอาไว้ในตัว Click Variable ของ GTM จะถูกตีค่าเอาไว้ว่าเป็น Click Class แล้วสีเหลืองก็เป็น Click ID และ Click Text ก็เป็นสีเขียว แต่จากภาพด้านบนจะเห็นว่าจะมี Click Element อยู่ด้วย อันนี้แนะนำอาจจะให้เลือกใช้เป็นอันสุดท้ายเพราะอาจจะทำให้มันไม่ได้ Unique เท่าที่ควร อาจจะมีซ้ำกันอยู่บ้าง ส่วนมัน Trigger มาจากไหนอันนี้ตอบยากมาก เพราะผมก็ไม่ได้เขียนโค้ดขึ้นมาเอง

วิธีสร้าง Click Event แบบ All Click ด้วย Tag Manager

สำหรับการทำ Click Event ในรอบนี้ผมจะใช้ Click ID มาเป็น Variable เพื่อที่จะทำให้กำหนด Trigger ของเราได้ง่ายขึ้น เพราะถ้าเป็น Click Class หรือ Text อาจจะทำให้ระบบสับสนได้ เพราะ Class อาจจะกำหนดเอาไว้ในหลายๆ ที่ และถ้าเป็น Click Text ในบางครั้ง GTM มักจะไม่สามารถอ่านค่านี้ได้ ทำให้หลุดได้เมื่อเราต้องการทำอีเว้นท์จริงๆ ให้กลับไปที่ Trigger ที่เราตั้งค่าไว้เป็น All Click ตั้งแต่ทีแรก แล้วเลือก Edit เปลี่ยนจาก ‘All ให้กลายเป็น Some Click’ เพื่อที่เราจะสามารถกำหนด Variable ได้ว่าจะให้มันทำงานในตอนไหน ลองตั้งค่าตามภาพด้านล่างได้เลยครับ

Image 4 all click and variable normal button click digi era

ทำเป็นสีๆ ไว้เหมือนเดิม เพราะคิดว่าอาจจะทำให้เข้าใจง่าย ผมได้แบ่งออกเป็น 4 ส่วนด้วยกันแบบแรกตรงสีแดงให้เราเลือกเป็น Some Clicks เพื่อที่จะกำหนดว่าในคลิกนี้เราจะเอาไว้ใช้กับปุ่มใด ปุ่มหนึ่งเท่านั้น เมื่อเราเลือกเป็น Some Click เรียบร้อยระบบจะทำให้กำหนดค่า Variable ได้ด้านล่างในช่องสีเขียวให้เรากำหนดว่าในครั้งนี้เราจะใช้เป็น Click ID และต่อมาในช่องสีเหลืองก็กำหนด Condition ว่าจะใช้ ID อันไหน อันนี้สามารถเลือกได้หลายอย่างครับ แต่ผมจะใช้เป็น Equal คือต้องตรงกับคำๆ นี้เท่านั้น ในช่องสุดท้ายคือค่า Value ที่เราได้มาในตอนกด Preview ในรอบแรกซึ่งก็คือ Normal Button ก็ให้ใส่ค่านี้ลงไป ในปุ่มหนึ่งเราอาจจะใช้กี่ Variable ก็ได้ แต่ใช้อันเดียวก็พอละ

ทั้งหมดเป็นค่า Trigger ให้สามารถทำงานได้ แต่เรายังไม่ได้สร้าง Tag เราก็ต้องกลับไปที่อันแรกที่คำว่า Tag แล้วเลือกเป็น Google Analytics แบบ Universal แล้วตั้งค่าตาม Setting ด้านล่างได้เลย

Image 5 google analytics click event setting up digi era

เพื่อให้เข้าใจการตั้งค่าในแต่ละอย่างมากขึ้น ผมขออธิบายว่าในการทำ Event Tracking เพื่อส่งค่ากลับไปยัง Google Analytics จะต้องประกอบไปด้วย Category, Actions, Label และ Value โดยแต่ละค่าที่ส่งไปจะถูกรายครบทั้งหมด แต่ส่วนที่เป็น Category และ Actions เป็นค่าที่สำคัญที่สุด ส่วน label และ Value จะใส่หรือไม่ใส่ก็ไม่ว่ากัน

  1. Track Type – รอบนี้เราไม่ได้ตั้งค่าเพื่อดูว่าคนเข้าเท่าไหร่ ให้เปลี่ยนจาก View เป็น Event
  2. Category – อันนี้ผมเลือกที่จะใส่ว่า Clicks Event อันที่จริงเราใส่อะไรลงไปก็ได้ ขอเพียงแต่ว่าเราสามารถที่จะสื่อสารกับคนที่จะต้องอ่าน Report ในภายหลังให้ได้เพียงเท่านั้น ในครั้งนี้ผมเลือก Click Event เพราะเราทำคลิกอีเว้นท์ แค่นั้นแหละ
  3. Actions – อันนี้อาจจะเจาะจงลงไปหน่อย ในรอบนี้เลยใช้คำว่า Normal Button เพื่อที่จะรู้ว่าอีเว้นท์คลิกอันนี้กดที่ปุ่มไหนเป็นต้น
  4. Non-Interaction Hit – ให้เปลี่ยนจาก False เป็น True เพราะมันจะส่งผลทำให้ทาง GA รู้ว่าได้เกิด Actions หรือ Hit ขึ้นแล้ว ซึ่งจะส่งผลทำให้อัตราการตีกลับหรือ bounce rate ลดลงได้
  5. ตรงนี้ให้เราเลือกว่าจะตั้งค่า Google Analytic ID เป็น Variable หรือต้องการใส่แบบเดิมๆ ซึ่งถ้าตั้งค่าแบบ Variable ในการสร้างอีเว้นท์อื่นๆ เราก็ไม่ต้องใส่ ID หลายๆ รอบแค่นั้นเอง

เมื่อเสร็จเรียบร้อยแล้ว ให้เราเลือก Trigger ที่ได้สร้างมาตั้งแต่ตอนแรก มาใส่ในตัวเลือกด้านล่างสุดตามภาพด้านล่างได้เลยครับ เพื่อกำหนดเอาไว้ว่าจะให้ Click Event ที่เพิ่งสร้างขึ้นมาถูกใช้งานกับ Normal Button เพียงเท่านั้น ไม่ควรใช้กับอันอื่นๆ เมื่อเลือกเสร็จเรียบร้อยเราก็กด Save การสร้าง Google Analytics ที่เอาไว้ Track Event Click ก็เสร็จเรียบร้อย แต่เราต้องตรวจสอบก่อนว่ามันเป็นไปตามที่เราหวังหรือไม่ ให้กดเข้าสู่ Preview Mode อีกรอบหนึ่ง

Image 5 google analytics trigger digi era

เมื่อกด Preview Mode ใน Google Tag Manager เป็นที่เรียบร้อยแล้วให้กลับไปที่หน้าเดิมที่เราต้องการจะ Track นั่นแหละ ในรอบนี้ผมจะใช้อีเว้นท์ในหน้า staging.digi-era.co/demo/ เพื่อตรวจสอบว่าอีเว้นท์ที่ได้สร้างขึ้นมามันสามารถใช้งานได้จริง เมื่อรู้แล้วว่ามันสามารถใช้งานได้จริงเราก็กด Submit ใน Tag Manager ก็เป็นอันว่าอีเว้นท์ของเราถูกสร้างขึ้นมาเรียบร้อยแล้ว โดยเราก็แค่รอดูการรายงานผลใน Google analytics เพียงเท่านั้น

Image 6 preview modedigi era

ทั้งหมดเป็นการสร้าง Click Event Tracking แบบที่เราเรียกกันว่า All Element มักจะใช้กับปุ่มประเภท Submit Button แต่ถ้าจะใช้กับการคลิกไปที่ปุ่ม Line@ หรือคำว่า Line@ หรือจะต้องการจะแทรคเพื่อตรวจสอบว่าคนคลิกไปที่เว็บไซต์อื่นๆ อีกหรือไม่ อาจจะต้องรอสักนิดบทความนี้ยาวไปละ เดี๋ยวผมจะเขียนอีกคอนเทนส์เพื่อบอกว่าถ้าใช้แบบ Just Link จะต้องทำแบบไหน ถ้าใครชอบบทความนี้ก็อย่าลืมแชร์กันนะครับ

#ขายถ้าใครสนใจเรียน Google Analytics, Google Ads ลองแอดไลน์ มาได้เลยนะครับ

More articles