diff --git a/CAPI-SETUP.md b/CAPI-SETUP.md new file mode 100644 index 0000000..cfedc53 --- /dev/null +++ b/CAPI-SETUP.md @@ -0,0 +1,153 @@ +# Meta CAPI + Google Enhanced Conversions Setup + +## สรุปการเปลี่ยนแปลง + +### 1. Client-side Changes + +**`src/components/PageShell.astro`** +- ✅ เพิ่ม `allow_enhanced_conversions: true` ใน GA4 config +- ✅ เพิ่ม `event_id` สำหรับ Meta Pixel PageView +- ✅ เพิ่ม utility functions: `generateEventId()`, `getMetaCookies()`, `sendConversion()` + +**`src/scripts/home.js`** +- ✅ เพิ่ม Lead event tracking หลัง form submit สำเร็จ +- ✅ Parse ชื่อเป็น firstName + lastName +- ✅ ส่ง email, phone, และ problems[0] ไปยัง `/api/conversions` + +### 2. Server-side Changes + +**`server.js`** +- ✅ เพิ่ม `import crypto from 'node:crypto'` สำหรับ SHA-256 hashing +- ✅ เพิ่ม `/api/conversions` endpoint: + - Meta CAPI: ส่ง event พร้อม hashed PII → `graph.facebook.com/v22.0/{pixel_id}/events` + - Google Measurement Protocol: ส่ง event พร้อม hashed user_properties → GA4 MP endpoint +- ✅ Logging: console.info/warn สำหรับ debug +- ✅ Graceful degradation: ถ้าไม่มี token/secret ก็ skip แต่ไม่ error + +**`Dockerfile`** +- ✅ เพิ่ม env vars documentation: `META_PIXEL_ID`, `META_ACCESS_TOKEN`, `GA4_MEASUREMENT_ID`, `GA4_API_SECRET` + +**`.env.example`** (ใหม่) +- ✅ Template สำหรับ environment variables + +## Environment Variables ที่ต้องตั้ง + +```bash +# Meta Conversions API +META_PIXEL_ID=418349260078648 +META_ACCESS_TOKEN=EAAOuKluwl6ABRZC5cjHD8e89zcf5xrUbJrfjYxaTYs2afZBSmJ4uQZARhmYNsv3X7pZBh5fZCpqYlJuaZCMtoKrGBDGiAFR0CSTV3MKOgDjFQSJcKcE8VPW5jTEjlLdchrgDh2VEfF7By3jdAEawmAw0J7hTk7iKOeIZB2s9ZCiXVqScL4bXu2Pq9gfXL3UCjcgZA9wZDZD + +# Google Analytics 4 + Enhanced Conversions +GA4_MEASUREMENT_ID=G-74BHREDLC3 +GA4_API_SECRET=v1mm1tE6T2mjv2RbqW2Ejg +``` + +## Event Flow + +``` +User submits form + │ + ├─ Client-side (immediate) + │ ├─ fbq('track', 'Lead', {...}, {eventID: xxx}) + │ └─ gtag('event', 'Lead', {...}) + │ + └─ Server-side (fetch /api/conversions) + ├─ Meta CAPI + │ └─ POST graph.facebook.com/v22.0/418349260078648/events + │ - event_name: Lead + │ - event_id: xxx (dedup with client) + │ - user_data: hashed email, phone, name + │ - fbp, fbc cookies + │ + └─ Google Measurement Protocol + └─ POST www.google-analytics.com/mp/collect + - event: lead + - client_id: fbp or random UUID + - user_properties: hashed email, phone +``` + +## การทดสอบ + +### 1. Local Development + +```bash +# 1. ตั้ง env vars +export META_ACCESS_TOKEN="EAAOuK..." +export GA4_API_SECRET="v1mm1tE6T2mjv2RbqW2Ejg" + +# 2. Build + Start +npm run build +node server.js + +# 3. เปิด http://localhost:4321 +# 4. กด "ส่งโจทย์ให้เราดู" → กรอกฟอร์ม → Submit +# 5. เช็ค console logs: +# [api/conversions] Meta CAPI: {"events_received":1,"..."} +# [api/conversions] Google MP: {"status":204,"ok":true} +``` + +### 2. Verify Meta CAPI + +1. ไปที่ **Meta Events Manager**: https://business.facebook.com/events_manager2/list/pixel/418349260078648 +2. เลือก **Test Events** tab +3. ส่ง form จากเว็บ → ดู event ปรากฏ real-time +4. เช็ค **Event Match Quality (EMQ)** ≥ 6.0 + +### 3. Verify Google Enhanced Conversions + +1. ไปที่ **GA4 → Reports → Realtime** +2. ส่ง form → ดู event `lead` ปรากฏภายใน 30 วินาที +3. ไปที่ **Admin → Data Display → DebugView** (ถ้าต้องการ debug โหมด) + +## Deduplication + +- **event_id** ถูกสร้างที่ client (`generateEventId()`) +- ส่งไปทั้ง: + - Client-side Pixel: `fbq('track', 'Lead', {}, {eventID: xxx})` + - Server-side CAPI: `event_id: xxx` +- Meta จะ dedupe event ที่มี `event_id` เดียวกันภายใน 48 ชั่วโมง +- **Expected dedup rate**: ≥90% + +## Security & Privacy + +- ✅ **PII Hashing**: email, phone, name ถูก SHA-256 hash ก่อนส่ง server-side +- ✅ **No PII in client-side events**: custom_data มีแค่ `content_name`, `content_category` +- ✅ **IP + User-Agent**: server populate จาก request headers +- ✅ **Honeypot**: field `website` ใน form กันบอท + +## Next Steps + +1. ✅ Deploy to EasyPanel พร้อม env vars +2. ⏳ รอ 24-48 ชั่วโมง เพื่อให้ Meta/Google เก็บข้อมูลพอ +3. ⏳ เช็ค **Event Match Quality** ใน Events Manager +4. ⏳ เช็ค **Deduplication rate** ใน Events Manager → Diagnostics +5. ⏳ ตั้ง Conversion Goal ใน Google Ads (ถ้าใช้) + +## Troubleshooting + +**Meta CAPI ไม่เห็น event:** +- เช็ค META_ACCESS_TOKEN ตั้งถูกต้องไหม +- เช็ค server logs: `[api/conversions] Meta CAPI: {...}` +- เช็ค Test Events ใน Events Manager + +**Google MP ไม่เห็น event:** +- เช็ค GA4_API_SECRET ตั้งถูกต้องไหม +- เช็ค server logs: `[api/conversions] Google MP: {"status":204}` +- status 204 = success (no content response) + +**EMQ ต่ำ (<6.0):** +- เพิ่มข้อมูล: city, state, zip, gender, date_of_birth (ถ้ามี) +- เช็ค email/phone format ถูกต้องไหม +- เช็ค fbp/fbc cookies ส่งมาไหม + +--- + +📊 **File Changes:** +- `Dockerfile`: +4 lines (env vars doc) +- `server.js`: +124 lines (CAPI endpoint + hashing) +- `src/components/PageShell.astro`: +60 lines (utilities + event_id) +- `src/scripts/home.js`: +17 lines (Lead tracking) +- `.env.example`: ใหม่ (template) + +✅ **Build:** ผ่าน (1.56s, 30 pages) +✅ **Lint:** ผ่าน (no errors) diff --git a/Dockerfile b/Dockerfile index 55735e8..77ce479 100644 --- a/Dockerfile +++ b/Dockerfile @@ -6,6 +6,10 @@ # SES_SECRET_ACCESS_KEY (optional) # SES_REGION (default: ap-southeast-1) # PORT (default: 4321) +# META_PIXEL_ID (default: 418349260078648) +# META_ACCESS_TOKEN (required for Meta CAPI) +# GA4_MEASUREMENT_ID (default: G-74BHREDLC3) +# GA4_API_SECRET (required for Google Enhanced Conversions) FROM node:22-bookworm-slim diff --git a/server.js b/server.js index d029699..5de45e9 100644 --- a/server.js +++ b/server.js @@ -1,13 +1,18 @@ /** * MoreminiMore production server. * - * Serves Astro static build (dist/) + handles POST /api/contact via Amazon SES. + * Serves Astro static build (dist/) + handles POST /api/contact via Amazon SES + * + POST /api/conversions for Meta CAPI + Google Enhanced Conversions. * * Env vars: - * SES_ACCESS_KEY_ID — AWS IAM key with ses:SendEmail - * SES_SECRET_ACCESS_KEY — AWS IAM secret - * SES_REGION — default: ap-southeast-1 - * PORT — default: 4321 + * SES_ACCESS_KEY_ID — AWS IAM key with ses:SendEmail + * SES_SECRET_ACCESS_KEY — AWS IAM secret + * SES_REGION — default: ap-southeast-1 + * PORT — default: 4321 + * META_PIXEL_ID — default: 418349260078648 + * META_ACCESS_TOKEN — required for Meta CAPI + * GA4_MEASUREMENT_ID — default: G-74BHREDLC3 + * GA4_API_SECRET — required for Google Enhanced Conversions */ import express from 'express'; @@ -17,6 +22,7 @@ import { SESv2Client, SendEmailCommand } from '@aws-sdk/client-sesv2'; import { fileURLToPath } from 'node:url'; import { dirname, join } from 'node:path'; import { readFileSync, existsSync } from 'node:fs'; +import crypto from 'node:crypto'; const __dirname = dirname(fileURLToPath(import.meta.url)); const PORT = parseInt(process.env.PORT || '4321', 10); @@ -146,6 +152,110 @@ app.post('/api/contact', async (req, res) => { } }); +// ── Meta CAPI + Google Enhanced Conversions ──────────────────────── +const META_PIXEL_ID = process.env.META_PIXEL_ID || '418349260078648'; +const META_ACCESS_TOKEN = process.env.META_ACCESS_TOKEN || ''; +const GA4_MEASUREMENT_ID = process.env.GA4_MEASUREMENT_ID || 'G-74BHREDLC3'; +const GA4_API_SECRET = process.env.GA4_API_SECRET || ''; + +function sha256(str) { + if (!str) return null; + return crypto.createHash('sha256') + .update(String(str).trim().toLowerCase()) + .digest('hex'); +} + +app.post('/api/conversions', async (req, res) => { + const { event_name, event_id, event_time, event_source_url, + user_data = {}, custom_data = {} } = req.body; + + const results = { meta: null, google: null }; + + // ── Meta CAPI ── + if (META_ACCESS_TOKEN) { + try { + const metaBody = { + data: [{ + event_name, + event_time, + event_source_url, + action_source: 'website', + event_id, + user_data: { + em: sha256(user_data.em), + ph: user_data.ph ? sha256(String(user_data.ph).replace(/[^0-9+]/g, '')) : null, + fn: sha256(user_data.fn), + ln: sha256(user_data.ln), + fbp: user_data.fbp, + fbc: user_data.fbc, + client_ip_address: req.ip || req.headers['x-forwarded-for'] || req.socket.remoteAddress, + client_user_agent: req.headers['user-agent'], + }, + custom_data, + }], + }; + + const metaRes = await fetch( + `https://graph.facebook.com/v22.0/${META_PIXEL_ID}/events?access_token=${META_ACCESS_TOKEN}`, + { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(metaBody), + } + ); + results.meta = await metaRes.json(); + console.info('[api/conversions] Meta CAPI:', JSON.stringify(results.meta)); + } catch (e) { + console.error('[api/conversions] Meta CAPI error:', e); + results.meta = { error: e.message }; + } + } else { + console.warn('[api/conversions] META_ACCESS_TOKEN not configured — skipping Meta CAPI'); + } + + // ── Google Enhanced Conversions (Measurement Protocol) ── + if (GA4_API_SECRET) { + try { + const gaBody = { + client_id: user_data.fbp || crypto.randomUUID(), + events: [{ + name: event_name.toLowerCase(), + params: { + engagement_time_msec: '100', + session_id: event_id, + ...(custom_data || {}), + }, + }], + }; + + // Add user properties if available + if (user_data.em || user_data.ph) { + gaBody.user_properties = {}; + if (user_data.em) gaBody.user_properties.user_email = { value: sha256(user_data.em) }; + if (user_data.ph) gaBody.user_properties.user_phone = { value: sha256(String(user_data.ph).replace(/[^0-9+]/g, '')) }; + } + + const gaRes = await fetch( + `https://www.google-analytics.com/mp/collect?measurement_id=${GA4_MEASUREMENT_ID}&api_secret=${GA4_API_SECRET}`, + { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(gaBody), + } + ); + results.google = { status: gaRes.status, ok: gaRes.ok }; + console.info('[api/conversions] Google MP:', JSON.stringify(results.google)); + } catch (e) { + console.error('[api/conversions] Google MP error:', e); + results.google = { error: e.message }; + } + } else { + console.warn('[api/conversions] GA4_API_SECRET not configured — skipping Google Enhanced Conversions'); + } + + res.json({ ok: true, results }); +}); + // Static files if (existsSync(DIST)) { app.use(express.static(DIST, { maxAge: '1y', etag: true })); @@ -167,5 +277,7 @@ if (existsSync(DIST)) { app.listen(PORT, '0.0.0.0', () => { console.log(`[server] Listening on http://0.0.0.0:${PORT}`); console.log(`[server] SES: ${sesConfigured ? 'configured ✓' : 'NOT configured (dev mode)'}`); - console.log(`[server] Static: ${existsSync(DIST) ? `dist/ ✓` : 'dist/ NOT found'}`); + console.log(`[server] Meta CAPI: ${META_ACCESS_TOKEN ? 'configured ✓' : 'NOT configured'}`); + console.log(`[server] Google EC: ${GA4_API_SECRET ? 'configured ✓' : 'NOT configured'}`); + console.log(`[server] Static: ${existsSync(DIST) ? 'dist/ ✓' : 'dist/ NOT found'}`); }); diff --git a/src/components/PageShell.astro b/src/components/PageShell.astro index 9346bb1..263e207 100644 --- a/src/components/PageShell.astro +++ b/src/components/PageShell.astro @@ -78,16 +78,18 @@ const organizationJsonLd = JSON.stringify({ - + - + + + + diff --git a/src/scripts/home.js b/src/scripts/home.js index 106a479..6038cb9 100644 --- a/src/scripts/home.js +++ b/src/scripts/home.js @@ -191,6 +191,23 @@ form?.addEventListener('submit', async (event) => { form.reset(); setStatus(`ได้รับโจทย์แล้ว ${diagnosis} เราจะติดต่อกลับทางเบอร์หรืออีเมลที่ให้ไว้`, 'success'); + + // Fire Lead conversion event + if (window.sendConversion) { + const nameParts = name.split(/\s+/); + const firstName = nameParts[0] || null; + const lastName = nameParts.length > 1 ? nameParts.slice(1).join(' ') : null; + + window.sendConversion('Lead', { + content_name: 'Contact Form', + content_category: problems[0] || 'general' + }, { + email: email || null, + phone: phone || null, + firstName: firstName, + lastName: lastName + }); + } } catch (error) { setStatus(error instanceof Error ? error.message : 'ส่งไม่สำเร็จ กรุณาลองใหม่อีกครั้ง', 'error'); }