July 1, 2025
สร้าง Dashboard แบบ Custom ด้วย Webflow API เชื่อมข้อมูล
เชื่อมต่อ Webflow API เพื่อสร้างแดชบอร์ดอันเป็นเอกลักษณ์: ดึงข้อมูลจาก Collections/Items อย่างปลอดภัย, ใช้คีย์/แคชเพื่อลด rate limit, รวม GA4/Search Console, กำหนด pipeline รายชั่วโมง, ส่งออก BigQuery/Sheets และวัด KPI หลักทั้งหมดในที่เดียว.
Webflow API → Custom Dashboard สำหรับทีมการตลาด/ผู้บริหาร (อัปเดต 2025)
ภาพรวม เป้าหมายคือรวม “ข้อมูลจาก Webflow CMS + สัญญาณทราฟฟิก/คอนเวอร์ชัน” ไว้ในแดชบอร์ดเดียวที่ผู้บริหารดูรู้เรื่อง ทีมคอนเทนต์ปรับทันที และฝ่ายเทคนิคดูแลได้ง่าย
สถาปัตยกรรมข้อมูล (แนวทาง)
| แหล่งข้อมูล | สิ่งที่ดึง | ตัวอย่างฟิลด์สำคัญ | ความถี่ซิงก์ | หมายเหตุ |
|---|---|---|---|---|
| Webflow API | Collections/Items, Pages, Sites | slug, publishedOn, author, tags, status | 15–60 นาที | ตั้งแคช/Backoff ให้เคารพ rate limit |
| GA4 Data API | Sessions, Users, Conversions | source/medium, pagePath, eventName | รายวัน (หรือ 4–12 ชม.) | ตรวจ sampling/threshold |
| Search Console API | Clicks, Impressions, CTR, Position | query, page, country, device | รายวัน | ดึงเป็นช่วงวันที่ |
| BigQuery / Sheets | Data Warehouse / Staging | ตารางรวม KPI รายวัน | ตาม pipeline | เป็นเลเยอร์เสถียรสำหรับ Looker |
โค้ดตัวอย่าง: ดึงรายการจาก Webflow CMS (Node.js)
// ใช้ Node 18+ (มี fetch ในตัว). ตั้งค่า env: WEBFLOW_TOKEN, COLLECTION_ID
const API = 'https://api.webflow.com/v2';
const headers = {
'Authorization': `Bearer ${process.env.WEBFLOW_TOKEN}`,
'accept': 'application/json'
};
async function listItems(collectionId, limit = 100) {
const res = await fetch(`${API}/collections/${collectionId}/items?limit=${limit}`, { headers });
if (!res.ok) throw new Error(`Webflow API error: ${res.status}`);
const json = await res.json();
return json?.items ?? [];
}
(async () => {
const items = await listItems(process.env.COLLECTION_ID);
// TODO: map fields → KPI และบันทึกลง BigQuery/Sheets
console.log(`Items: ${items.length}`);
})();
หมายเหตุ: ตรวจเอกสาร Authentication/Scopes/Rate Limits จาก Webflow Developers ก่อนขึ้นโปรดักชัน และอย่าลืมจัดการ Error/Retry/Backoff
ตัวชี้วัด (KPI) ที่นิยมใช้บนแดชบอร์ด
| KPI | ที่มา | สูตร/ที่มาค่า | การใช้งาน |
|---|---|---|---|
| บทความใหม่/สัปดาห์ | Webflow CMS | count(items where publishedOn ∈ สัปดาห์ล่าสุด) | วัด cadence ทีมคอนเทนต์ |
| Top pages by CTR | Search Console | CTR = clicks / impressions | หาเพจที่ควรขยาย/เพิ่มลิงก์ภายใน |
| Conversion (Leads) | GA4 | event: generate_lead / form_submit | ผูกกับแคมเปญ/เพจบริการ |
| Core Web Vitals | GA4/CrUX (ถ้ามี) |
