คำตอบสั้น ๆ: ใช้ Tag Manager จัดการสคริปต์ติดตามทั้งหมดจากที่เดียว โดยไม่ต้องแก้โค้ดเว็บทุกครั้งที่เพิ่มหรือถอนเครื่องมือ
คู่มือนี้อธิบาย Google Tag Manager ทีละขั้นตอน พร้อมคำสั่งที่ใช้ได้จริงและปัญหาที่พบบ่อย
เว็บที่ใช้งานมานานมักมีสคริปต์ติดตามสะสมอยู่ในโค้ดหลายตัว ทั้ง Google Analytics, Facebook Pixel, สคริปต์แชท และสคริปต์โฆษณาที่เคยใช้แล้วเลิกแต่ลืมถอดออก การแก้ไขแต่ละครั้งต้องผ่านนักพัฒนาและรอรอบปรับใช้
Google Tag Manager แก้ปัญหานี้ด้วยการวางโค้ดกลางไว้ครั้งเดียว แล้วจัดการสคริปต์ทั้งหมดผ่านหน้าเว็บ ทีมการตลาดเพิ่มหรือถอนเครื่องมือได้เองโดยไม่ต้องแตะโค้ด
สิ่งที่ต้องเตรียม (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 ที่เพิ่งสร้าง