ลองใช้งาน Google Tag Manager (ฉบับรวบรัด)
มาดูกันว่า…
Google Tag Manager(GTM) คืออะไร
เป็นเครื่องมือที่ช่วยคำอวยความสะดวกในการจัดการระบบ Tracking ต่างๆไว้ที่ GTM ที่เดียว ยกตัวอย่างเช่น Google Analytics, Google AdWords, Facebook Pixel ฯลฯ ปกติเราก็ต้อง เอา code ของ third party ทั้งหลาย ใส่ไว้ใน code เรา
ปัญหาคือ ถ้ามีการเพิ่ม third party มาอีกสักตัว เราก็ต้องไปเพิ่ม code ซึ่งมันดูลำบาก(เมื่อก่อนก็คิดว่าไม่ลำบากนะ ฮ่าๆ)
… แต่ถ้ามีเจ้า GTM นี้ง่ายเลย แค่ทำผ่านตัว GTM ไม่ต้องเพิ่มโค๊ด(ในบางกรณี) และการเพิ่ม Traking ต่างๆจะไม่ได้จำกัดแค่ตัว Developer เท่านั้น จะเป็น Marketing หรือ คนอื่นดูแลยังได้เลย
Google Tag Manager(GTM) ประกอบไปด้วย
- Tags
- Triggers
- Variables
- The data layer (ชอบอันนี้เป็นการส่วนตัว ทำอะไรแปลกๆได้เยอะดี)
การติดตั้ง
- Create Account https://tagmanager.google.com/
- Create Container Name
- เอาสคริปท์ที่ได้ไปแปะไว้ใน
<head></head>
และใน
<body></body>
คราวๆก็ประมาณนี้ รายละเอียดขอข้ามไปนะครับ เนื่องจาก Google Tag Manager มีบอกการติดตั้งไว้ชัดเจนแล้ว
Link: Setup and install Tag Manager
การทำงาน
เมื่อผู้ใช้เปิด website ของเราขึ้นมา ก็จะโหลดสคริปท์(1) Google Tag Manager และตามด้วย Tags, Triggers ที่เรากำหนดไว้ และเมื่อเกิดเหตุการณ์(2) ที่ตรงกับ Triggers ที่เรากำหนดไว้ Tags ต่างๆที่ใช้งาน Trigger นั้นๆก็จะเริ่มทำงาน(3)
โปรแกรมสำหรับทดสอบ และ Debug
Tag Assistant (by Google) เอาไว้ดูว่าแต่ล่ะ Tags ที่เราทำไว้นั้นทำงานหรือไม่
Facebook Pixel Helper อันนี้สำหรับ Facebook Pixel
การ Debug ก็ง่ายมากเลย Google ได้ทำ Preview Mode ไว้ให้เรียบร้อยแล้ว
- คลิกมุมขวาบน Preview
- ถ้ามีการแก้ไข Tags หรือ Triggers อย่าลืมกด Refresh ด้วยนะ
The Data Layer to GTM
การใช้งาน Data Layer
เพิ่มตัวแปร Data layer โดยการ
1. Variables
2. User-Defined Variables
3. New
4. Choose a variable type to begin set
5. Page Variables
6. Data Layer Variable
7. Data Layer Variable Name: amount
ตัวอย่างการเพิ่มข้อมูล เฉพาะเจาะจงบางอย่างเข้าไปที่ The Data Layer เพื่อให้ใน Tags ของเรานั้นสามารถนำไปใช้ได้ ยกตัวอย่างเช่น
dataLayer.push({'amount': user.amount});หรือwindow.dataLayer.push({'amount': user.amount});
Custom html
ส่วนนี้เป็นส่วนที่ผมใช้บ่อยเป็นพิเศษ เพราะมันสามารถเขียน JavaScript เข้าไปได้เลย จะพลิกแพลงอะไรก็ทำได้ง่ายมากๆ ยกตัวอย่างเช่น
<script>
if ({{amount}} > 0) {
fbq('trackCustom', 'saveForm', { value: '{{amount}}', currency: 'THB' });
}
</script>ตัวอย่างข้างบนนี้คือเมื่อผู้ใช้กดส่งแบบฟอร์มเข้ามา ผมก็จะส่งข้อมูลให้ Facebook Pixel เฉพาะผู้ใช้ ที่มี amount มากกว่า 0 เท่านั้น
*{{}} คือการอ้างอิงถึงตัวแปรใน Google Tag Manager
ข้อดี
- สะดวก
- ลดภาระของตัว Developer เอง
ข้อเสีย
- ต้องเรียนรู้เพิ่มเติม
- ในเงื่อนไขบางอย่างที่มีความซับซ้อนสูง เราจะต้องคิดมากขึ้น เพื่อให้ชีวิตมันง่ายเหมือนเดิม CƆ
You Can Do IT. ☝
หาข้อมูลเพิ่มเติมได้ที่
