Umami Event Tracking Convention — dealplustech

ทุก CTA / element ที่คลิกได้ (นำไปสู่ action) ต้องมี data-umami-event="<event-name>" เพื่อให้ Umami ติดตามได้ Umami เชื่อมโยงแล้วใน src/layouts/Layout.astro — แค่เพิ่ม attribute ก็ติดตามได้เลย

กฎสำคัญ

ใช้ patch tool เสมอ อย่าใช้ terminal/script regex กับไฟล์ .astro (เส้นทางภาษาไทย + เสี่ยง attribute แตก)
ใส่ data-umami-event หลัง href="..." ใน tag เปิด <a> เสมอ — ตรวจให้ href ยัง intact (ไม่มี hrdata/ef)
เช็คท้ายสุด: ทุก <a> ที่เป็น CTA ต้องมี data-umami-event และไม่มี hrdata หลงเหลือ (search hrdata ต้องได้ 0)
อย่าแตะ target/rel/class ที่มีอยู่ — แค่เพิ่ม attribute ใหม่
หลังแก้เสร็จ รัน npm run build ตรวจว่าไม่มี error

ชื่อ event ต่อจุด (แก้ตามบริบทของแต่ละหน้า)

หน้า Product ทุกหน้า (ฉนวนหุ้มท่อ-ccool, aeroflex, maxflex, ท่อ-, เครื่องเชื่อม-, water-*, valve, grilles, etc.)

จุด	event-name
Hero — ปุ่มแชท Line (สีส้ม)	`product-hero-line`
Hero — ปุ่มโทร (สีขาว)	`product-hero-call`
Hero — ปุ่มราคาสินค้า (`data-price-button`/`#pricelist`)	`product-hero-price`
In-content — ลิงก์ Line (ในย่อความ)	`product-inline-line`
In-content — ลิงก์โทร (ในย่อความ)	`product-inline-call`
ดาวน์โหลดราคา PDF	`product-pdf-download`
CTA ล่าง — ปุ่มติดต่อเรา	`product-cta-contact`
CTA ล่าง — ปุ่มแอดไลน์	`product-cta-line`
การ์ดกลุ่มผลิตภัณฑ์ (ถ้ามี `#sheet` `#tube` `#roof` `#adhesives`)	`product-lineup-<slug>`
แกลอรี่ภาพ	`product-gallery-<name>`

หน้า contact-us

contact-tel, contact-line, contact-email

หน้า all-products

allproducts-cta-contact, allproducts-cta-line, allproducts-card (product card dynamic)

หน้า index (home)

จุด	event-name
Hero — ดูสินค้าทั้งหมด	`home-hero-view-all`
Hero — ติดต่อเรา	`home-hero-contact`
Product card (ไป product page)	`home-product-card`
Category tile (ไป all-products?filter=X)	`home-category-<id>` (ppr, welding, water, ac, fire, insulation, fence)
View-all tile (แถวสุดท้าย)	`home-category-all`
Blog link	`home-blog`
Blog card	`home-blog-card`
CTA — โทร	`home-cta-call`
CTA — Line	`home-cta-line`
CTA — ติดต่อเรา	`home-cta-contact`

หน้า about-us / portfolio / 404

about-us: about-cta-contact, about-cta-line, about-cta-call (ตามที่มี)
portfolio: portfolio-cta-contact, portfolio-cta-line (ตามที่มี)
404: 404-home, 404-contact (ตามที่มี)

ตัวอย่างการแก้ (patch)

<!-- ก่อน -->
<a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" rel="noopener" class="bg-accent-500 ...">แชท Line</a>
<!-- หลัง -->
<a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" rel="noopener" data-umami-event="product-hero-line" class="bg-accent-500 ...">แชท Line</a>

4.0 KiB Raw Blame History