Case Study

Control Room: Dashboard Vận Hành Marketing 2 Miền

Vai trò: Tự lên ý tưởng, thiết kế hệ thống & code toàn bộ (solo) Thời gian: 07/2026 Khách hàng: Công cụ nội bộ, dùng chung cho đội vận hành Marketing Miền Nam & Miền Bắc Trạng thái: Đang sử dụng
Chrome ExtensionReactesbuildExcelJSManifest V3

Quy mô

3

Loại dữ liệu tự nhận diện cột: đơn hàng, khách hàng, quảng cáo — dù file xuất ra đặt tên cột khác nhau

4

Khu vực quảng cáo theo dõi song song: Miền Nam, Miền Bắc và 2 khu vực tự đặt tên thêm

3

Cấp báo cáo độc lập: theo tháng, theo tuần, theo ngày — mỗi cấp giữ trạng thái riêng

36

Ô lưu báo cáo dạng ảnh chụp nhanh (31 ngày + 5 tuần), mở lại đúng như lúc lưu

3

Định dạng xuất báo cáo: Excel có biểu đồ, PDF, HTML tĩnh gửi được cho người khác

0

Máy chủ backend cần thiết — mọi phép tính và phân tích chạy ngay trong trình duyệt

Bài toán

Vận hành Marketing trên cả Miền Nam và Miền Bắc nghĩa là mỗi tháng phải gộp dữ liệu từ nhiều nguồn khác nhau — file xuất đơn hàng từ hệ thống bán hàng, file xuất chiến dịch từ Meta Ads Manager, file khách hàng từ CRM — mỗi file một kiểu tên cột, rồi đối chiếu với KPI ngân sách/doanh thu/lead đã đặt ra cho từng chi nhánh, từng dự án. Excel thủ công phải dựng lại công thức mỗi tháng, dễ sai khi tên cột đổi khác một chút, và không có công cụ nào tự viết ra nhận định quảng cáo nào nên giữ, nên tắt, nên test thêm nội dung gì — tất cả vẫn phải ngồi đọc số và tự suy luận.

Giải pháp

1. Tự nhận diện cột dữ liệu, không cần định dạng file cố định

  • ·Mỗi loại dữ liệu (đơn hàng, khách hàng, quảng cáo) có một danh sách từ khoá ứng viên cho từng cột (ví dụ "đơn vị", "chi nhánh", "team" đều được hiểu là cột chi nhánh) — hàm findKey so khớp không phân biệt dấu tiếng Việt để tự tìm đúng cột trong file, dù người xuất file đặt tên khác đi.
  • ·Đọc được cả CSV lẫn Excel (.xlsx) ngay trên trình duyệt bằng thư viện xlsx, không upload file lên server nào — kéo-thả hoặc chọn file là xong.

2. Tự phân vùng Miền Nam / Miền Bắc, không cần gắn nhãn tay

  • ·Đơn hàng & khách hàng: đối chiếu tên chi nhánh/đơn vị với danh sách chi nhánh đã biết của từng miền (VD "Chi nhánh Sense City" → Miền Nam, "Chi nhánh 80 NLB" → Miền Bắc).
  • ·Quảng cáo: đọc thẳng trong tên chiến dịch Meta Ads — các tag như SG/HCM/MN/NAM được hiểu là Miền Nam, HN/MB/BAC/NA được hiểu là Miền Bắc — nên chiến dịch vào đúng khu vực ngay khi upload.

3. Bảng KPI tháng tính toán trực tiếp như bảng tính sống

  • ·Chỉ cần nhập Ngân sách, Doanh thu, Chi phí/Mess, Tỷ lệ Lead/Mess và Tỷ lệ Spam cho từng dự án — hệ thống tự suy ra số Mess, số Lead, Mess chất lượng (đã trừ spam) và Giá Lead, cộng dồn theo chi nhánh và tổng 2 miền, cập nhật ngay khi gõ.
  • ·Dữ liệu KPI được lưu vào chrome.storage.local và dùng chung cho bất kỳ ai mở tiện ích trên máy đó — không phải công cụ chỉ một người dùng.

4. Biểu đồ tự vẽ bằng SVG thuần, không dùng thư viện chart

  • ·Biểu đồ doanh thu theo ngày tự tính toạ độ cột, lưới và 2 trục (doanh thu + số đơn) từ dữ liệu thô — không gọi thư viện biểu đồ nào, toàn bộ là SVG dựng tay.
  • ·Thanh tiến độ "Thực tế so với KPI" tự đổi màu xanh/vàng/đỏ theo ngưỡng đạt được, giúp nhìn là biết ngay chi nhánh nào đang lệch mục tiêu.

5. Bộ máy đánh giá quảng cáo tự động viết nhận định

  • ·Với mỗi khu vực, hệ thống tự chấm 6 nhóm tiêu chí trên dữ liệu quảng cáo thật: tỷ lệ chuyển đổi Lead → Đơn hàng, chi phí/đơn so với giá trị đơn trung bình, tần suất hiển thị (có "mỏi" creative hay không), tỷ lệ xem hết video, và độ chênh lệch hiệu quả giữa các chiến dịch — mỗi tiêu chí viết ra một nhận định bằng tiếng Việt kèm màu cảnh báo xanh/vàng/đỏ.
  • ·Tự xếp hạng chiến dịch theo chi phí/lead để đưa ra danh sách cụ thể "nên giữ/tăng ngân sách" và "nên tắt/điều chỉnh", kèm lý do (CTR thấp, tần suất cao, chi phí/lead vượt 150% mức trung bình...) và gợi ý nội dung/video mới nên test — toàn bộ suy luận theo ngưỡng định sẵn, không gọi API AI nào.

6. Xuất 3 định dạng báo cáo, lưu ảnh chụp nhanh theo ngày/tuần

  • ·Xuất Excel bằng ExcelJS: dựng cả workbook có màu, viền, gộp ô theo phong cách báo cáo điều hành (navy/gold), tự vẽ biểu đồ cột bằng Canvas rồi nhúng thẳng ảnh PNG vào file Excel.
  • ·Xuất HTML tĩnh: nhân bản đúng DOM đang hiển thị, gỡ bỏ các phần chỉ tương tác được, có thể giới hạn theo khu vực hoặc từng dự án riêng lẻ — gửi file cho người không có tiện ích vẫn xem được nguyên vẹn.
  • ·Lưu báo cáo theo 31 ô ngày và 5 ô tuần: bấm "Lưu báo cáo" là chụp lại nguyên trạng dashboard tại thời điểm đó, bấm lại vào ô đã lưu là mở đúng báo cáo của đúng ngày/tuần đó — không bị đè bởi dữ liệu tháng hiện tại.

Minh hoạ tính toán KPI

Bảng dưới đây dùng đúng các cột thật của Bảng KPI Tháng, với số liệu đã trực tiếp nhập thử vào dashboard đang chạy để xác nhận công thức tính đúng: Ngân sách, Doanh thu và Chi phí/Mess được nhập tay (in đậm), các cột còn lại do hệ thống tự suy ra ngay lập tức.

Dự án Ngân sách Doanh thu Chi phí/Mess Tỷ lệ Lead/Mess Mess Lead Giá Lead
Dự án 1 — Chi nhánh Miền Bắc 150.000.000 480.000.000 45.000 35,00% 3.333 1.167 128.571

Các cột in đậm màu xanh (Mess, Lead, Giá Lead) là số hệ thống tự tính từ 3 số nhập tay bên trái — đã kiểm chứng trực tiếp bằng cách gõ thử vào dashboard: 150.000.000 ÷ 45.000 = 3.333 Mess, 3.333 × 35% = 1.167 Lead, 150.000.000 ÷ 1.167 = 128.571₫/Lead.

Cách triển khai

Nền tảng
Chrome Extension, Manifest V3 — mở dashboard trong tab riêng (chrome.tabs.create), chỉ cần 2 quyền: storage, unlimitedStorage
Giao diện
React 18 (class components), tự build bằng esbuild qua một script build.js riêng — không dùng Create React App, Vite hay webpack
Đọc file
xlsx (SheetJS) đọc CSV/Excel client-side qua FileReader — không có file nào rời khỏi trình duyệt
Xuất Excel
ExcelJS dựng workbook có định dạng thủ công (màu, viền, gộp ô) và nhúng biểu đồ vẽ bằng Canvas
Lưu trữ
chrome.storage.local — KPI và các báo cáo đã lưu dùng chung cho mọi người mở tiện ích trên máy đó
Thiết kế
Hệ màu OKLCH riêng, font Sora + Public Sans, biểu đồ SVG/Canvas tự dựng không qua thư viện chart

Kết quả

  • →Thay thế hoàn toàn việc dựng lại công thức Excel mỗi tháng: kéo-thả file xuất ra từ hệ thống bán hàng, Meta Ads hay CRM là có ngay báo cáo phân vùng đúng Nam/Bắc, không cần map cột thủ công.
  • →Biến dữ liệu quảng cáo thô thành khuyến nghị hành động cụ thể — chiến dịch nào giữ/tăng ngân sách, chiến dịch nào tắt/điều chỉnh, kèm lý do — mà không cần ngồi phân tích tay từng chiến dịch.
  • →Một công cụ nội bộ dùng chung cho cả đội vận hành 2 miền, không phải tiện ích cá nhân — chứng minh khả năng xây dựng phần mềm quy mô production ngoài chuyên môn Marketing.
  • →Toàn bộ xử lý, lưu trữ và xuất báo cáo nằm gọn trong trình duyệt — không tốn chi phí server, hosting hay dịch vụ AI trả phí nào.