ติดตั้งและใช้งาน Google Tag Manager
เว็บที่ใช้งานมานานมักมีสคริปต์ติดตามสะสมอยู่ในโค้ดหลายตัว ทั้ง Google Analytics, Facebook Pixel, สคริปต์แชท และสคริปต์โฆษณาที่เคยใช้แล้วเลิกแต่ลืมถอดออก การแก้ไขแต่ละครั้งต้องผ่านนักพัฒนาและรอรอบปรับใช้
Google Tag Manager แก้ปัญหานี้ด้วยการวางโค้ดกลางไว้ครั้งเดียว แล้วจัดการสคริปต์ทั้งหมดผ่านหน้าเว็บ ทีมการตลาดเพิ่มหรือถอนเครื่องมือได้เองโดยไม่ต้องแตะโค้ด
สิ่งที่ต้องเตรียม
- บัญชี Google และสิทธิ์แก้ไขโค้ดของเว็บครั้งเดียว
- รายการสคริปต์ติดตามที่ใช้อยู่ปัจจุบัน
ขั้นตอนที่ 1: สร้างบัญชีและ Container
ไปที่ tagmanager.google.com สร้างบัญชีใหม่ ใส่ชื่อบริษัท เลือกประเทศไทย แล้วสร้าง Container โดยใส่ชื่อโดเมนและเลือกแพลตฟอร์ม Web
จะได้รหัสรูปแบบ GTM-XXXXXXX พร้อมโค้ดสองชุดสำหรับติดตั้ง
ขั้นตอนที่ 2: วางโค้ดบนเว็บ
ชุดแรกวางใน <head> ให้สูงที่สุดเท่าที่ทำได้
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->ชุดที่สองวางทันทีหลัง <body>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>ใน WordPress ใช้ hook แทนการแก้ไฟล์ธีมโดยตรง
add_action('wp_head', function () {
?><script>/* โค้ดชุดแรก */</script><?php
}, 1);
add_action('wp_body_open', function () {
?><noscript><!-- โค้ดชุดที่สอง --></noscript><?php
});ตรวจว่าติดตั้งสำเร็จ
curl -sL https://example.com | grep -o 'GTM-[A-Z0-9]*' | sort -uขั้นตอนที่ 3: เข้าใจสามองค์ประกอบหลัก
- Tag คือสคริปต์ที่จะทำงาน เช่น โค้ด GA4 หรือ Facebook Pixel
- Trigger คือเงื่อนไขว่าจะให้ Tag ทำงานเมื่อไร เช่น เมื่อเปิดหน้าใดหน้าหนึ่ง หรือเมื่อคลิกปุ่ม
- Variable คือค่าที่ดึงมาใช้ เช่น URL ปัจจุบัน ข้อความบนปุ่มที่คลิก หรือมูลค่าคำสั่งซื้อ
ทุก Tag ต้องมีอย่างน้อยหนึ่ง Trigger ไม่เช่นนั้นจะไม่ทำงานเลย
ขั้นตอนที่ 4: ติดตั้ง GA4 ผ่าน GTM
ถอดโค้ด GA4 เดิมออกจากเว็บก่อน ไม่เช่นนั้นจะนับซ้ำ
ใน GTM กด Tags แล้ว New ตั้งชื่อว่า GA4 Configuration เลือกชนิด Google Tag ใส่รหัส G-XXXXXXXXXX แล้วเลือก Trigger เป็น All Pages
สำหรับ Event เพิ่มเติม สร้าง Tag ชนิด Google Analytics: GA4 Event ตั้งชื่อ Event และพารามิเตอร์ แล้วผูกกับ Trigger ที่ต้องการ
ขั้นตอนที่ 5: สร้าง Trigger สำหรับการคลิกปุ่มโทร
เปิด Variable ที่เกี่ยวกับการคลิกก่อน ไปที่ Variables แล้ว Configure แล้วติ๊กทุกตัวในหมวด Clicks
สร้าง Trigger ใหม่ ชนิด Click แล้ว Just Links ตั้งเงื่อนไข
Click URL contains tel:สร้าง Tag ชนิด GA4 Event ตั้งชื่อ Event เป็น contact_call เพิ่มพารามิเตอร์
phone_number = {{Click URL}}
link_text = {{Click Text}}ผูกกับ Trigger ที่เพิ่งสร้าง
ขั้นตอนที่ 6: ส่งข้อมูลจากเว็บเข้า GTM ด้วย dataLayer
สำหรับข้อมูลที่ GTM ดึงเองไม่ได้ เช่น มูลค่าคำสั่งซื้อ ให้เว็บส่งเข้ามา
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: 'purchase_completed',
transaction_id: 'ORDER-2026-0912',
value: 2580,
currency: 'THB',
customer_type: 'returning'
});
</script>ใน GTM สร้าง Variable ชนิด Data Layer Variable ตั้งชื่อตัวแปรให้ตรงกับที่ส่งมา เช่น value แล้วสร้าง Trigger ชนิด Custom Event โดยใส่ชื่อ purchase_completed
จุดสำคัญคือต้อง push ข้อมูลเข้า dataLayer ก่อนที่จะ push ตัว event ไม่เช่นนั้น GTM จะอ่านค่าไม่ได้ วิธีที่ปลอดภัยคือส่งทุกอย่างไปในการ push ครั้งเดียวตามตัวอย่างข้างบน
ขั้นตอนที่ 7: ทดสอบด้วย Preview Mode
กดปุ่ม Preview ที่มุมขวาบน ใส่ URL ของเว็บ จะเปิดหน้าต่างใหม่พร้อมแผงดีบัก
สิ่งที่ต้องตรวจ
- แท็บ Tags แสดงว่า Tag ไหนทำงานและไหนไม่ทำงาน พร้อมเหตุผล
- แท็บ Variables แสดงค่าจริงของตัวแปรในขณะนั้น
- แท็บ Data Layer แสดงข้อมูลทั้งหมดที่ถูกส่งเข้ามา
คลิกที่แต่ละเหตุการณ์ในไทม์ไลน์ทางซ้ายเพื่อดูสถานะ ณ จังหวะนั้น หาก Tag ไม่ทำงาน ให้ดูที่ส่วน Firing Triggers ซึ่งบอกว่าเงื่อนไขข้อไหนไม่ผ่าน
ขั้นตอนที่ 8: เผยแพร่และจัดการเวอร์ชัน
กด Submit ใส่ชื่อเวอร์ชันและคำอธิบายว่าเปลี่ยนอะไร แล้วกด Publish
เขียนคำอธิบายให้ละเอียดทุกครั้ง เพราะเมื่อมีปัญหาในอนาคต คุณจะย้อนดูได้ว่าเวอร์ชันไหนเปลี่ยนอะไร และย้อนกลับได้ทันทีจากหน้า Versions
สำหรับทีมที่มีหลายคน ใช้ Workspace แยกกันเพื่อไม่ให้แก้ทับกัน และตั้งสิทธิ์ให้เหมาะสมที่ Admin แล้ว User Management โดยให้สิทธิ์ Publish เฉพาะผู้ที่รับผิดชอบ
ปัญหาที่พบบ่อย
Tag ไม่ทำงานเลย
ตรวจสามข้อ โค้ด GTM อยู่บนหน้านั้นจริง Tag มี Trigger ผูกอยู่ และเผยแพร่เวอร์ชันแล้วไม่ใช่แค่บันทึก การทดสอบใน Preview ทำงานได้แม้ยังไม่เผยแพร่ ซึ่งทำให้เข้าใจผิดบ่อย
ข้อมูลถูกนับซ้ำ
มีทั้งโค้ดเดิมบนเว็บและ Tag ใน GTM ถอดโค้ดเดิมออกให้หมด ตรวจด้วยคำสั่งค้นหารหัสในหน้าเว็บ
ตัวแปรจาก dataLayer เป็นค่าว่าง
ข้อมูลถูก push หลังจาก event หรือชื่อตัวแปรไม่ตรงกัน ดูในแท็บ Data Layer ของ Preview Mode ว่าข้อมูลมาถึงจริงในจังหวะไหน
GTM ทำให้เว็บช้าลง
ตรวจว่ามี Tag ที่ไม่ได้ใช้แล้วค้างอยู่หรือไม่ ตั้ง Trigger ให้แคบที่สุดเท่าที่จำเป็น และหลีกเลี่ยงการใช้ Custom HTML Tag ที่โหลดสคริปต์หนักในทุกหน้า
ต้องการที่ปรึกษาด้านการวัดผลและโครงสร้างเว็บ ติดต่อ THAI DATA CLOUD ได้ที่ https://thaidata.cloud/contact/
- Categories:
- Cloud
