2 งานในรอบนี้: (1) ติด "เซ็นเซอร์" GA4 ทุกจุดสำคัญ เพื่อรู้ว่าลูกค้าเดินทางจาก ค้นหา → จอง → จ่ายเงิน อย่างไร · (2) ทำ SEO ให้ Google เก็บหน้าเว็บได้ถูกต้องและแสดงผลค้นหาได้ดีขึ้น
Measurement ID G-HMSKD5QQ38แต่ละขั้นที่ลูกค้าเดินผ่าน เรายิง event ไปบอก GA ว่า "เกิดอะไรขึ้น" — นี่คือภาพรวมทั้งหมดในที่เดียว
← เลื่อนแนวนอนเพื่อดูทุกขั้น
ลูกค้าจะค่อย ๆ ลดลงทุกขั้นเป็นเรื่องปกติ (ไม่ใช่ทุกคนที่ค้นหาแล้วจะจอง) — สิ่งที่เราดูคือ ขั้นไหนลดมากผิดปกติ นั่นคือจุดที่มีปัญหาและควรปรับปรุงก่อน
* ตัวเลขเป็นตัวอย่างเพื่อให้เห็นภาพ — ของจริงจะดึงจาก GA4 หลังเก็บข้อมูล
คนที่ถึงหน้าจ่ายแล้วไม่จบการจอง มี 2 สาเหตุที่ต้องแก้คนละทาง — แท็ก payment_failed แยกให้เราเห็น
1 แท็ก = 1 พฤติกรรม เช่น ค้นหา, เลือกรถ, กดจ่ายเงิน
แนบข้อมูล เช่น ราคา, ประเภทรถ, สาขา เพื่อแยกวิเคราะห์
ร้อย event เป็นเส้นทาง เพื่อดูว่าคนหลุดตรงไหน
กำหนด event สำคัญ (purchase) เป็นเป้าวัดผล
Consent-gated — โหลด GA เฉพาะเมื่อผู้ใช้ยอมรับ cookie (เคารพ PDPA) ไม่ยอมรับ = ไม่มี request เลย
ไม่ hardcode — ID อ่านจาก env สลับ dev/prod ได้โดยไม่แก้โค้ด
ยิง page_view เอง — เพราะเว็บเป็น SPA (Next.js) auto-pageview จะนับแค่ครั้งแรก
helper กลางตัวเดียว — ทุก event ยิงผ่าน trackAnalyticsEvent() มี guard กันยิงตอน gtag ยังไม่พร้อม + กันยิงซ้ำ
| Stage | Event | เก็บอะไร / ที่ไหน |
|---|---|---|
| View | page_view | ทุกการเปลี่ยนหน้า (รองรับ UTM) |
| Search | search · search_submit | คำค้น, วันรับ-คืน, สาขา |
| Search | view_item_list | รายการรถที่แสดง |
| Checkout | view_item | ดูรถคันเดียว (step-1) · items[] ครบ |
| Checkout | select_item · begin_checkout | รถที่เลือก, เริ่ม checkout |
| Checkout | checkout_progress | สเต็ป 1-5 · แยก new / edit |
| Checkout | add_payment_info | ยอดเงิน, วิธีจ่าย, member/guest |
| Convert | payment_failed | จ่ายไม่ผ่าน + reason (callback / redirect) |
| Convert | purchase | มูลค่า, รถ, สาขา, จำนวนวัน (เป้าหลัก) |
| Convert | booking_edit_completed | แก้ไขสำเร็จ + flag คืนเงิน |
| Convert | booking_cancelled · generate_lead | ยกเลิกการจอง, ติดต่อ/ขอรถ |
| View | select_content | กดเมนู, ดูการจอง, Fleet Guide, แผนที่สาขา (แยกด้วย content_type) |
| Account | login · manage_booking_start · booking_manage_search | เข้าสู่ระบบ, ค้นหา/จัดการการจอง |
| Account | profile_updated · add/remove_payment_method · account_linked · terms_accepted | โปรไฟล์: แก้ข้อมูล, จัดการบัตร, ผูกบัญชี, ยอมรับเงื่อนไข |
| View | view_promotion · select_promotion | หน้าโปรโมชัน |
รายการเต็มพร้อม วิธีทดสอบทีละแท็ก สำหรับ BA / QA อยู่ที่ ข้อ 11 ด้านล่าง
รู้ว่าคนหายไปตรงไหนของ funnel → โฟกัสแก้ถูกจุด
ส่ง purchase กลับ Google Ads / Meta รู้ว่าแคมเปญไหนสร้างยอดจองจริง
วิเคราะห์ดีมานด์จาก car_group + สาขา เพื่อจัดสต็อก/ตั้งราคา
เก็บเฉพาะคนยินยอม + ปกปิด IP สอดคล้อง PDPA
ตั้ง purchase / generate_lead เป็น Key Event ให้รายงานและ Ads ใช้เป็นเป้าวัดผล
เชื่อม Google Ads + Meta Pixel remarketing คนที่ถึง begin_checkout แต่ยังไม่จ่าย
Funnel Exploration ดู drop-off แต่ละขั้นเป็น % (เหมือนกราฟด้านบนแต่เป็นข้อมูลจริง)
Dashboard บน Looker Studio ยอดจอง/วัน, รถยอดนิยม, อัตราแปลงตามสาขา
รัน dev จริง + เปิดเบราว์เซอร์ ยอมรับ consent แล้วจับ request ที่ส่งเข้า GA — ทุก event ตอบ 204 (สำเร็จ)
| Event | พารามิเตอร์ที่ส่งเข้า GA จริง | ผล |
|---|---|---|
| page_view | dp, ep.anonymize_ip=true | 204 ✓ |
| view_item | pr1=idECONOMY~nmToyota Yaris~pr2400~qt1, epn.value=2400 | 204 ✓ |
| payment_failed | ep.reason=payment_callback, ep.flow=new | 204 ✓ |
items เป็น pr1=... ตาม GA4 ecommerce schema เป๊ะ พร้อมขึ้นรายงาน ecommerce ได้ทันที · ยืนยันด้วย tsc ผ่าน 0 errorเปิด GA4 DebugView แล้วทำตาม 4 ขั้น ก็จะเห็น event วิ่งสด ๆ พร้อมพารามิเตอร์ ตรวจเทียบกับตารางข้อ 11 ได้เลย
ติดตั้ง Chrome extension GA Debugger แล้วเปิด หรือใช้ Tag Assistant — เพื่อให้ event เข้า DebugView
เข้าเว็บแล้วกด ยอมรับ cookie analytics ก่อน — ถ้าไม่ยอมรับ GA จะไม่ทำงาน (ตามดีไซน์)
GA4 → Admin → DebugView จะเห็นอุปกรณ์ที่กำลัง debug อยู่
กดทำ action ตามคอลัมน์ขวาของตาราง → event ต้องโผล่ใน DebugView พร้อม parameter ที่ระบุ
collect — แต่ละครั้งที่ทำ action ต้องเห็น request ใหม่ที่มี en=ชื่อ event และตอบกลับ 204ครบทุกแท็กในเว็บ แยกตามหมวด — Event (ชื่อใน GA4) · จุดที่ติด (ไฟล์) · วิธีทดสอบ (ทำอะไรให้ยิง) · พารามิเตอร์ ที่ต้องเห็น
| Event | จุดที่ติด (ไฟล์) | วิธีทดสอบ — ทำให้ยิงยังไง | พารามิเตอร์ที่ต้องเห็น |
|---|---|---|---|
| 🧭 หน้า & เมนู (Navigation) | |||
| page_view | analytics-page-view.tsx (ทุกหน้า) | เปิด/เปลี่ยนหน้าใด ๆ ในเว็บ | page_path, page_location, page_title |
| select_content | header.tsx · header/mobile-menu.tsx | กดเมนูบนแถบหัว / เมนูมือถือ (เมนูหลัก, โซเชียล, ภาษา, Manage Booking, Login) | content_type=ชนิดเมนู, item_id=ชื่อปุ่ม |
| 🔍 ค้นหา (Search) | |||
| search_submit | hero-search.tsx · sticky-search-bar.tsx | กดปุ่ม "ค้นหา" จากหน้าแรก หรือแถบค้นหาลอยด้านบน | สาขารับ-คืน, วันรับ-คืน, rental_days |
| search | search-result/page.tsx | หน้าผลลัพธ์โหลดเสร็จ (ทั้งกรณีเจอและไม่เจอรถ) | search_term, result_count |
| view_item_list | search-result/page.tsx | หน้าผลลัพธ์มีรายการรถแสดง | item_list_name, result_count |
| 🚗 ดู & เลือกรถ (Browse) | |||
| view_item | booking/step-1-car-info.tsx | เข้า Step 1 หลังเลือกรถจากผลค้นหา (ไม่ยิงตอน resume การจองค้าง) | items[], value, rental_days |
| select_item | search-result/car-card.tsx | กดปุ่ม เลือก/จอง ที่การ์ดรถ | items[], item_list_name |
| begin_checkout | search-result/car-card.tsx | กดปุ่มเลือก/จองที่การ์ดรถ (ยิงคู่กับ select_item) | items[], value, currency |
| select_content | services/fleet-guide/page.tsx | หน้า Fleet Guide กดเลือกกลุ่มรถ | content_type=fleet_guide_group, item_id=กลุ่มรถ |
| select_content | branches/branch-accordion-item.tsx | หน้า Branches กดเปิดแผนที่สาขา | content_type=branch_map, item_id=ชื่อสาขา |
| 💳 Checkout & จ่ายเงิน (Payment) | |||
| checkout_progress | shared/Stepper.tsx (ทั้ง new + edit) | เลื่อนสเต็ป 1→5 ระหว่างจอง (และตอนแก้ไขจอง) | checkout_step, step_name, booking_flow |
| add_payment_info | booking/step-5-payment.tsx | กดปุ่ม จ่ายเงิน ที่ Step 5 (จองใหม่) | value, payment_type, customer_type |
| add_payment_info | edit/edit-step-5-payment.tsx | กดจ่าย ส่วนต่าง ตอนแก้ไขการจอง | value=ส่วนต่าง, flow=edit |
| payment_failed | booking/step-5-payment.tsx | จ่ายไม่ผ่าน — บัตรเด้ง/ยกเลิก หรือกลับจากหน้าธนาคารแบบไม่สำเร็จ | reason, value, payment_type, flow=new |
| payment_failed | edit/edit-step-5-payment.tsx | จ่ายส่วนต่าง (ตอนแก้ไข) ไม่ผ่าน | reason, value=ส่วนต่าง, flow=edit |
| ✅ ผลลัพธ์การจอง (Conversion) | |||
| purchase | payment-success/page.tsx | จองสำเร็จ เข้าหน้า payment-success (ยิงครั้งเดียวต่อ 1 booking) | transaction_id, value, items[], สาขา, rental_days |
| booking_edit_completed | payment-success/page.tsx | แก้ไขการจองสำเร็จ (URL มี edit=true) | value, refund_required |
| booking_cancelled | cancel-booking-modal.tsx · mobile-cancel-booking-modal.tsx | กดยกเลิกการจองสำเร็จ (ทั้งจอ desktop และ mobile) | booking id |
| generate_lead | contact-form.tsx · request-car-modal.tsx | ส่งฟอร์ม "ติดต่อเรา" หรือ "ขอรถที่ไม่มีในระบบ" สำเร็จ | lead_type (contact / car_request) |
| 👤 บัญชี & การจัดการ (Account) | |||
| login | login/verify-otp-modal.tsx | ยืนยัน OTP เข้าสู่ระบบสำเร็จ | method |
| manage_booking_start | booking/manage/page.tsx | หน้า Manage Booking กดส่ง OTP เพื่อค้นหาการจอง | method=email_otp |
| booking_manage_search | login/verify-otp-modal.tsx | ค้นหาการจอง (ผ่าน OTP) แล้วเจอสำเร็จ | booking id |
| select_content | my-bookings/booking-card.tsx | หน้า My Bookings กด "Details" ดูการจองของตัวเอง | content_type=my_booking, item_id, booking_status |
| select_content | booking/[id]/booking-detail-header.tsx | หน้ารายละเอียดการจอง กด "แก้ไขการจอง" | content_type=booking_action, item_id=edit_booking |
| ⚙️ โปรไฟล์ & เงื่อนไข (Profile) | |||
| profile_updated | profile/personal-info-update-modal.tsx · profile-login-update-modal.tsx | บันทึกการแก้ข้อมูลส่วนตัว / อีเมล / เบอร์โทร | field (personal_info / email / phone) |
| add_payment_method | profile/payment-section.tsx | เพิ่มบัตรในโปรไฟล์สำเร็จ | — |
| remove_payment_method | profile/remove-card-dialog.tsx | ลบบัตรในโปรไฟล์ | — |
| account_linked | profile/available-channels-section.tsx | ผูกบัญชีโซเชียลสำเร็จ | method (ช่องที่ผูก) |
| terms_accepted | term-condition/termcondition-acceptterm.tsx | กดยอมรับข้อตกลง / เงื่อนไข | is_new_user (true/false) |
| 🎁 โปรโมชัน (Promotion) | |||
| view_promotion | promotions/promotions-page-client.tsx | หน้าโปรโมชัน กดเปิดดูรายละเอียดโปร | promotion_name, promotion_code |
| select_promotion | promotions/promotion-card.tsx | กดเลือก/ใช้โปรที่การ์ด | promotion_name, promotion_code |
select_content ใช้ชื่อ event เดียวแต่แยกบริบทด้วย content_type (menu / fleet_guide_group / branch_map / my_booking / booking_action) เป็นแนวทางมาตรฐานของ GA4 · พารามิเตอร์ที่ขึ้นต้นว่า "—" คือไม่มี param เพิ่มนอกจาก GA4 รอบนี้ยังทำ SEO ให้ Google เข้าใจเว็บได้ถูกต้อง — เก็บเฉพาะหน้าที่ควรเก็บ และแสดงผลค้นหาสวยขึ้น
title แบบ %s | Chic Car Rent + description ครบ 15 หน้า ทำให้ชื่อ/คำอธิบายใน Google ตรงและน่าคลิก
บอก Google 8 หน้า public ที่ควร index พร้อมความถี่อัปเดต + ลำดับความสำคัญ (หน้าแรกสูงสุด)
เปิดให้เก็บหน้า public, บล็อกหน้าส่วนตัว/ธุรกรรม (booking, login, profile, my-bookings, search-result)
JSON-LD 3 แบบ: Organization (ข้อมูลแบรนด์), Breadcrumb (8 หน้า), AutoRental (ข้อมูลสาขา) → มีโอกาสได้ rich result
เวลาแชร์ลิงก์ใน LINE / Facebook / X จะขึ้น preview รูป + ชื่อ + คำอธิบายอัตโนมัติ
หน้า booking/profile/search ตั้ง robots: index:false ไม่ให้โผล่ในผลค้นหา (กันข้อมูลรั่ว + SEO สะอาด)
สำหรับ BA / QA ตรวจรับ — แต่ละรายการเช็กได้เองตามคอลัมน์ขวา
| รายการ SEO | ติดที่ไฟล์ | ได้อะไร | วิธีทดสอบ |
|---|---|---|---|
| Title + Description | app/layout.tsx + 15 layouts | ชื่อ/คำอธิบายใน Google SERP | View Source ดู <title> และ <meta name="description"> |
| Open Graph | app/layout.tsx | preview ตอนแชร์ลิงก์ | วางลิงก์ใน LINE/Facebook หรือเช็กที่ opengraph.xyz |
| robots.txt | app/robots.ts | คุม bot ว่าเก็บหน้าไหน | เปิด /robots.txt ตรง ๆ — ต้องเห็น allow/disallow + ลิงก์ sitemap |
| sitemap.xml | app/sitemap.ts | รายชื่อหน้าที่ Google ควร index | เปิด /sitemap.xml + submit ใน Search Console |
| Organization schema | lib/structured-data.ts + layout | ข้อมูลแบรนด์/ติดต่อใน Google | Google Rich Results Test วาง URL หน้าแรก |
| Breadcrumb schema | structured-data.ts (8 หน้า) | breadcrumb ใต้ลิงก์ใน SERP | Rich Results Test ดู BreadcrumbList ผ่าน |
| AutoRental schema | branches/page.tsx | ข้อมูลสาขา/ธุรกิจเช่ารถ | Rich Results Test บนหน้า Branches |
| noindex หน้าส่วนตัว | booking/login/profile/... layouts | กันหน้าธุรกรรมโผล่ search | View Source หน้านั้น ต้องเห็น <meta name="robots" content="noindex"> |