61 lines
4.0 KiB
Markdown
61 lines
4.0 KiB
Markdown
# Umami Event Tracking Convention — dealplustech
|
|
|
|
ทุก CTA / element ที่คลิกได้ (นำไปสู่ action) ต้องมี `data-umami-event="<event-name>"` เพื่อให้ Umami ติดตามได้
|
|
Umami เชื่อมโยงแล้วใน `src/layouts/Layout.astro` — แค่เพิ่ม attribute ก็ติดตามได้เลย
|
|
|
|
## กฎสำคัญ
|
|
1. **ใช้ `patch` tool เสมอ อย่าใช้ terminal/script regex** กับไฟล์ `.astro` (เส้นทางภาษาไทย + เสี่ยง attribute แตก)
|
|
2. ใส่ `data-umami-event` **หลัง `href="..."`** ใน tag เปิด `<a>` เสมอ — ตรวจให้ `href` ยัง intact (ไม่มี `hrdata`/`ef`)
|
|
3. **เช็คท้ายสุด:** ทุก `<a>` ที่เป็น CTA ต้องมี `data-umami-event` และไม่มี `hrdata` หลงเหลือ (search `hrdata` ต้องได้ 0)
|
|
4. อย่าแตะ `target`/`rel`/`class` ที่มีอยู่ — แค่เพิ่ม attribute ใหม่
|
|
5. หลังแก้เสร็จ รัน `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)
|
|
```astro
|
|
<!-- ก่อน -->
|
|
<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>
|
|
```
|