วิธีติดตั้ง Heatmap บนร้าน Shopify ของคุณ (ไม่ต้องใช้แอป เพียงโค้ดบรรทัดเดียว)

สรุปบทความ

การเพิ่ม heatmap ให้ Shopify เพียงแค่วางโค้ดหนึ่งบรรทัดลงใน theme.liquid เท่านั้น ไม่ต้องติดตั้งแอปใดๆ

ควรทำสำเนาธีมไว้เป็นข้อมูลสำรองก่อนแก้ไขทุกครั้ง การเปลี่ยนแปลงจะมีผลทันทีที่บันทึก — ต่างจาก STUDIO ตรงที่ไม่มีขั้นตอนเผยแพร่ซ้ำแยกต่างหาก

หน้าชำระเงินไม่รันโค้ดของธีม จึงไม่ถูกติดตาม ความสำเร็จวัดจากจำนวนที่เพิ่มขึ้นจริงในแดชบอร์ดของ HeatMapX ไม่ใช่แค่ "ไม่มีข้อผิดพลาด"

สงสัยไหมว่าจะเพิ่ม heatmap ให้ร้าน Shopify ได้โดยไม่ต้องติดตั้งแอปหรือเปล่า? ทำได้แน่นอน Shopify อนุญาตให้คุณวาง โค้ดแท็กเพียงบรรทัดเดียว ลงในธีมได้โดยตรง ไม่ต้องใช้แอปใดๆ คู่มือนี้จะพาไปดูขั้นตอนการสำรองข้อมูลที่ควรทำก่อนเสมอ วิธีเพิ่มแท็ก วิธียืนยันว่าใช้งานได้ และข้อควรระวังบางประการ

ขั้นตอนที่ 1: รับ Site Key ของคุณ

ก่อนอื่น สมัครใช้งาน HeatMapX (มีแผนฟรีให้ใช้งาน) ลงทะเบียนร้านของคุณ และรับ site key โดยไม่ต้องใช้บัตรเครดิต

เมื่อได้ site key แล้ว ใช้แท็กด้านล่างนี้ โดยแทนที่ YOUR_SITE_KEY ด้วยคีย์จริงที่คุณได้รับ

<script src="https://heatmapx.com/tracker.js" data-site-key="YOUR_SITE_KEY"></script>

ขั้นตอน: เพิ่มแท็กลงใน theme.liquid

1. (ต้องทำ) สำเนาธีมของคุณไว้เป็นข้อมูลสำรอง

ก่อนแก้ไขโค้ดโดยตรง ให้ ทำสำเนาธีมปัจจุบัน ก่อนเสมอ ในหน้าแอดมินของ Shopify ไปที่ Online Store → Themes หาธีมที่เผยแพร่อยู่ คลิกเมนู "…" (การดำเนินการ) แล้วเลือก Duplicate วิธีนี้จะทำให้คุณมีสำเนาที่ปลอดภัยไว้ย้อนกลับได้หากเกิดข้อผิดพลาด การข้ามขั้นตอนนี้หมายความว่าคุณจะไม่มีทางย้อนกลับการแก้ไขที่ผิดพลาดได้

2. เปิดตัวแก้ไขโค้ด

ในหน้าแอดมินของ Shopify ไปที่ Online Store → Themes
ที่ธีมที่เผยแพร่อยู่ คลิกเมนู "…" (การดำเนินการ) แล้วเลือก Edit code
ตัวเลือกไฟล์ของธีมจะเปิดขึ้นทางด้านซ้าย

3. เพิ่มแท็กในไฟล์ layout/theme.liquid

ในรายการไฟล์ เปิด โฟลเดอร์ "Layout" แล้วคลิก theme.liquid
ค้นหา </head> ในไฟล์ แล้ววางแท็กด้านบน ไว้ก่อนบรรทัดนั้น
บันทึกไฟล์

4. แค่บันทึกก็เพียงพอแล้ว ไม่ต้องเผยแพร่ซ้ำ

ใน Shopify การแก้ไขโค้ดของธีม จะมีผลทันทีที่คุณบันทึก ต่างจาก STUDIO ตรงที่ไม่มีขั้นตอน "publish" หรือ "เผยแพร่ซ้ำ" แยกต่างหาก เมื่อบันทึกแล้ว ร้านค้าที่เปิดใช้งานจริงของคุณก็จะโหลดแท็กนี้เรียบร้อยแล้ว

วิธียืนยันว่าใช้งานได้จริง

หลังจากเพิ่มแท็กแล้ว ลองเข้าดูหน้าต่างๆ ในร้านของคุณเอง แต่นี่คือส่วนสำคัญ

หน้าเว็บที่โหลดโดยไม่มีข้อผิดพลาด ไม่ได้แปลว่าการติดตามใช้งานได้จริง แม้ว่าคอนโซลของเบราว์เซอร์จะไม่แสดงข้อผิดพลาดใดๆ แต่การพิมพ์ site key ผิดหรือการวางแท็กผิดตำแหน่งก็อาจหมายความว่าไม่มีข้อมูลใดๆ ถูกส่งไปยัง HeatMapX เลย

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

ข้อควรระวัง

หน้าชำระเงินไม่ถูกติดตาม

แท็กที่คุณเพิ่มลงใน theme.liquid จะทำงานบน หน้าร้านค้า ของคุณ — หน้าแรก หน้าสินค้า หน้าคอลเลกชัน และตะกร้าสินค้า — แต่ จะไม่ทำงานบนหน้าชำระเงิน (หน้าการชำระเงินภายใต้ /checkouts/) หน้าชำระเงินถูกโฮสต์โดย Shopify โดยตรง แยกออกจากธีมของคุณ และโค้ดของธีมจาก theme.liquid จะไม่ถูกโหลดที่นั่นเลย หากคุณสังเกตว่าไม่มีข้อมูลของหน้าชำระเงินในแดชบอร์ด นั่นคือพฤติกรรมปกติ ไม่ใช่ข้อบกพร่อง

การเปลี่ยนธีมหมายถึงต้องเพิ่มแท็กใหม่

แท็กนี้มีอยู่เฉพาะในไฟล์ theme.liquid ของธีมที่คุณแก้ไขเท่านั้น หากคุณเปลี่ยนไปใช้ธีมอื่นในภายหลัง (เผยแพร่ธีมใหม่) ไฟล์ theme.liquid ของธีมนั้นจะไม่มีแท็กติดไปด้วยโดยอัตโนมัติ ทุกครั้งที่เปลี่ยนธีม ให้ทำตามขั้นตอนเดิมเพื่อเพิ่มแท็กลงในธีมใหม่

คำถามที่พบบ่อย

ถาม: วิธีนี้จะทำให้ร้านของฉันช้าลงหรือไม่? ตอบ: แท็กนี้โหลดแบบ asynchronous และมีขนาดเล็ก จึงส่งผลกระทบต่อความเร็วในการโหลดหน้าเว็บน้อยมาก

ถาม: ฉันเพิ่มแท็กแล้ว แต่จำนวนในแดชบอร์ดไม่เพิ่มขึ้น ตอบ: สาเหตุที่พบบ่อยที่สุดคือ site key ไม่ตรงกัน — วางคีย์จากไซต์อื่น หรือมีตัวอักษรหายไปตอนคัดลอก นอกจากนี้ ให้ตรวจสอบว่าหน้าที่คุณกำลังทดสอบเป็นหน้าร้านค้า (หน้าแรก หน้าสินค้า หน้าคอลเลกชัน) ไม่ใช่หน้าชำระเงิน เนื่องจากหน้าชำระเงินจะไม่ถูกติดตามเลย

สรุป

การเพิ่ม heatmap ให้ Shopify สรุปแล้วก็คือการวางโค้ดหนึ่งบรรทัดลงใน theme.liquid เท่านั้น ไม่ต้องใช้แอปใดๆ HeatMapX เริ่มต้นใช้งานได้ฟรี ลองใช้ดูแล้วดูว่าลูกค้าของคุณสัมผัสประสบการณ์ในร้านของคุณอย่างไรบ้าง