สวัสดีครับ ต่อเนื่องจากกระทู้ก่อนหน้านี้ที่ผมแชร์ Stack การทำ Portfolio ด้วย Next.js + AI (Antigravity IDE) ไปนะครับ
ลิ้งบทความแรกนะครับ
https://medium.com/@panja.sasithonwan/คู่มือฉบับสมบูรณ์-สร้าง-portfolio-ทันสมัยด้วย-ai-git-และ-vercel-จาก-prompt-สู่-production-de9b5c7a8f5b


วันนี้มาแชร์ EP.2 เรื่อง Analytics Stack ครับ หลังจากเว็บขึ้น Production แล้ว ผมต้องการดู Heatmap และ Session Recording เพื่อเช็ค UX ตอนแรกจะไปใช้ Hotjar แต่ติดเรื่อง Limit ของ Free Tier เลยย้ายมาใช้ Microsoft Clarity แทน ซึ่งตอบโจทย์ Personal Project มากครับเพราะ Free & Unlimited Traffic

สิ่งที่สรุปไว้ในบทความ:

- Architecture Diagram: การส่ง Data จาก Next.js ➡️ GTM ➡️ GA4 & Clarity (Flow เดียวจบ ไม่ต้องแก้โค้ดหน้าบ้าน)

- Analysis: การอ่านค่า Click Map, Scroll Map และ Attention Map (อันนี้ดีมาก ดูว่าคนโฟกัสตรงไหนนานสุด)

- Case Study: การเจอ Dead Clicks 50% และแนวทางการปรับปรุง UX

เพื่อนๆ dev คนไหนทำเว็บส่วนตัวแล้วอยากได้ Insight เชิงลึกแบบไม่ต้องเสียเงินรายเดือน ลองดูเป็นแนวทางได้ครับ

อ่านฉบับเต็ม: https://medium.com/@panja.sasithonwan/เบื้องหลัง-panja-portfolio-ep-2-เมื่อ-ga4-ยังไม่พอ-และ-hotjar-แพงไป-microsoft-clarity-คือคำตอบ-32f675d9303b
ดูเว็บตัวอย่าง: https://golf-portfolio.vercel.app/[/url]

เขียนมาเยอะๆนะครับ ชอบ

ขอบคุณครับ

ขอบคุณครับ

ผมกำลังเรียนอยู่พอดี

ดูดีครับ

เก็บ data บนเว็บไซต์
ทำ Accept consent กันด้วยน้า


tool สมัยนี้น่ากลัวจัง