วิธีติดตั้ง Heatmap ด้วย Google Tag Manager (ไม่ต้องแก้โค้ด ใช้เวลาแค่ 5 นาที)

สรุปสั้น ๆ

ใช้ GTM ติดตั้ง Heatmap ได้โดยไม่ต้องแตะโค้ดของเว็บไซต์เลย

ห้าขั้นตอน: สร้างแท็ก Custom HTML → ผูกทริกเกอร์ All Pages → เผยแพร่

ความสำเร็จวัดจากตัวเลขที่ขยับบนแดชบอร์ด HeatMapX ของคุณ ไม่ใช่แค่ "ไม่มี Error"

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

ก่อนเริ่ม: รับคีย์เว็บไซต์ของคุณก่อน

สมัครใช้งาน HeatMapX (มีแผนฟรี ไม่ต้องใช้บัตรเครดิต) ลงทะเบียนเว็บไซต์ของคุณ แล้วคุณจะได้รับ คีย์เว็บไซต์ (site key)

เมื่อได้คีย์แล้ว คุณจะใช้แท็กในรูปแบบนี้ — แทนที่ YOUR-SITE-KEY ด้วยคีย์จริงของคุณ:

<script src="https://heatmapx.com/tracker.js?key=YOUR-SITE-KEY" data-site-key="YOUR-SITE-KEY"></script>

สำคัญ: วางแท็ก ทั้งบรรทัด ไม่ใช่แค่ URL ส่วนที่เป็น data-site-key="..." คือสิ่งที่บอก HeatMapX ว่าข้อมูลนี้เป็นของเว็บไซต์ไหน — ถ้าคุณตัดส่วนนี้ออก หรือวางแค่ URL ของ src ระบบจะไม่เก็บข้อมูลใด ๆ เลย

การตั้งค่าใน GTM (5 ขั้นตอน)

เปิด หน้าจอควบคุม GTM (tagmanager.google.com) แล้วเลือกคอนเทนเนอร์ (workspace) ของเว็บไซต์คุณ
ไปที่เมนูด้านซ้าย "Tags" → "New" แล้วเลือกประเภทแท็กเป็น "Custom HTML"
วางแท็ก ทั้งบรรทัด ด้านบนลงในช่อง HTML
ในส่วนการทริกเกอร์ เลือก "All Pages (Page View)" ตั้งชื่อแท็กให้จำง่าย (เช่น HeatMapX) แล้วบันทึก
กด "Submit / Publish" ที่มุมขวาบนเพื่อเผยแพร่การเปลี่ยนแปลงให้ใช้งานจริง

เท่านี้ก็เสร็จ — ระบบติดตามจะทำงานบนทุกหน้าของเว็บไซต์คุณทันที

อยากตรวจสอบก่อนเผยแพร่? (โหมด Preview)

คลิก "Preview" ใน GTM เพื่อทดสอบแท็กในเบราว์เซอร์ของคุณเองก่อนเผยแพร่จริง เปิดเว็บไซต์ของคุณผ่านหน้าจอพรีวิว (Tag Assistant) — หากแท็ก HeatMapX ของคุณปรากฏอยู่ในหมวด "Fired" แสดงว่าใช้งานได้แล้ว

ถ้าแท็กไม่ทำงาน — เช็กลิสต์ตรวจสอบ

กด Publish แล้วหรือยัง? การกดบันทึกอย่างเดียวไม่ได้เผยแพร่การเปลี่ยนแปลงให้ใช้งานจริง นี่คือสาเหตุที่พบบ่อยที่สุด
ทริกเกอร์เป็น All Pages หรือไม่? ถ้าทริกเกอร์ถูกจำกัดไว้เฉพาะบางหน้า หน้าอื่น ๆ จะไม่ถูกติดตาม
แบนเนอร์ขอความยินยอมคุกกี้ (consent mode) กำลังบล็อกอยู่หรือไม่? เครื่องมือจัดการความยินยอมบางตัวจะระงับแท็ก Custom HTML ไว้จนกว่าผู้เยี่ยมชมจะให้ความยินยอม ลองตรวจสอบการตั้งค่าความยินยอมของแท็ก และวิธีที่ CMP ของคุณจัดหมวดหมู่แท็กนี้
data-site-key ถูกต้องหรือไม่? การวางคีย์ของเว็บไซต์อื่นจะทำให้ข้อมูลของคุณถูกส่งไปผิดเว็บไซต์

ให้ Claude Code ช่วยแนะนำทีละขั้นตอน

ถ้าไม่อยากไล่หาเองในหน้าจอ GTM คุณสามารถให้ AI agent อย่าง Claude Code ช่วยแนะนำได้ คัดลอกพรอมต์ด้านล่าง แทนที่ด้วยคีย์เว็บไซต์ของคุณเอง แล้ววางลงไป

I want to deploy the HeatMapX heatmap tracking tag via Google Tag Manager.
Walk me through the GTM interface one step at a time, waiting for my reply at each step.

The tag to use (Custom HTML, All Pages trigger):
<script src="https://heatmapx.com/tracker.js?key=YOUR-SITE-KEY" data-site-key="YOUR-SITE-KEY"></script>

หากคุณไม่ได้ใช้ GTM และต้องการใส่แท็กลงในโค้ดของเว็บไซต์โดยตรง พรอมต์นี้จะให้ Claude Code แก้ไขไฟล์ให้คุณ

Install the HeatMapX heatmap tracking tag in this project.
Make sure the following tag is included right before </head> on every page, and tell me which files you changed.

<script src="https://heatmapx.com/tracker.js?key=YOUR-SITE-KEY" data-site-key="YOUR-SITE-KEY"></script>

HeatMapX ถูกออกแบบมาให้ดึงและวิเคราะห์ข้อมูลของคุณผ่าน Claude Code ได้เช่นกัน (การเชื่อมต่อ CLI) — ดูรายละเอียดได้ที่หน้า "CLI & Skills" บนแดชบอร์ดของคุณหลังตั้งค่าเสร็จ

ตรวจสอบว่าใช้งานได้: ตัวเลขต้องขยับ

หลังติดตั้งเสร็จ ลองเปิดดูเว็บไซต์ของคุณสักสองสามหน้า แล้วเปิดแดชบอร์ด HeatMapX ของคุณ หาก "Sessions today" ของเว็บไซต์คุณเพิ่มขึ้นเรื่อย ๆ แสดงว่าระบบติดตามทำงานแล้ว

สัญญาณของความสำเร็จไม่ใช่ "ไม่มี Error" แต่คือ ตัวเลขที่ขยับบนแดชบอร์ด หากไม่มีอะไรขยับเลย ให้ไล่ตรวจสอบตามเช็กลิสต์ด้านบนทีละข้อ