TC Toyo ChangMarTech Engineer ← 回作品集

CASE 11 / 13

母親節抽抽樂:檔期行銷導客系統

節慶檔期限定的轉盤抽獎,以加權機率把客人導向指定特約櫃位

StatusCampaign EndedStackVanilla JS | FirebaseFocusCampaign & O2O

此專案為園區節慶檔期行銷活動系統,以轉盤抽獎搭配加權機率設計,將稀有大獎(入園券)與高頻小獎(餐飲兌換)分層配置,達成引流、促購與導客的檔期目標。

示範影片(無聲)· 活動檔期已結束,此為活動頁面的保留畫面。

點此造訪正式上線網站 (母親節抽抽樂)

檔期已結束:活動頁保留供展示,抽獎與後台功能已停用,資料庫存取一併關閉。

行銷痛點:檔期活動要熱鬧,也要控成本

節慶檔期的現場抽獎,行銷上要同時兼顧「吸引力」與「成本控制」,傳統做法容易顧此失彼:

  • 獎項成本失控:紙本抽獎難以精準控制大獎發放比例,成本容易爆量。
  • 導客不精準:獎品與櫃位缺乏連結,抽完獎的人不一定被導到消費點。
  • 核銷混亂:檔期人潮集中,人工核對兌換券容易出錯、難稽核。
  • 成效說不清:活動結束難以量化各獎項發放與實際兌換的落差。

產品策略:用加權機率設計「引流—促購—導客」層次

本系統以一組可調的加權機率表,將獎項依行銷目的分層:

  • 高頻小獎引流:雞肉飯、紅玉紅茶、美式咖啡等餐飲兌換券佔較高機率,讓多數人有感、願意參加。
  • 稀有大獎製造話題:成人入園券、兒童入園券以低機率投放,維持活動吸引力同時控制成本。
  • 獎項綁定櫃位:每項獎品對應明確兌換地點(2F 排骨酥麵、1F 有鹿咖啡廳、恐龍之丘等),把中獎轉成到店消費。
  • 後台核銷:現場人員透過核銷介面標記兌換,狀態與時間戳記寫入 Firestore 留痕。

商業價值與影響力

  • 可控的獎項成本:以機率表精準配置大獎與小獎比例,讓行銷預算可預期。
  • 精準導客:獎項與特約櫃位一對一綁定,把抽獎人潮導向指定消費點。
  • 可稽核的核銷流程:每筆兌換數位化,杜絕重複核銷與人工誤差。
  • 量化檔期成效:各獎項抽中與核銷數據可回收,作為下次檔期活動的調整依據。

核心功能

客人前台

  • 轉盤抽獎動畫:以加權機率驅動的轉盤,中獎即顯示兌換券與地點。
  • 獎項分層設計:高頻餐飲小獎與稀有入園大獎並存,兼顧參與感與成本。
  • 手機優先體驗:針對現場掃碼參加情境設計,操作門檻低。

工作人員後台

  • 核銷入口:現場人員在核銷介面標記中獎兌換券,並記錄核銷時間。
  • 獎項機率設定:以設定表統一管理各獎項機率與兌換位置。
  • 發放與核銷統計:追蹤各獎項抽中與實際兌換情形。

技術亮點

  • 加權機率引擎:獎項機率可精細到個位數百分比,行銷可依成本目標調整分佈。
  • 設定表驅動:獎項名稱、前台顯示、兌換地點與機率集中於設定檔,非工程人員也能維護。
  • 前後台分離:客人抽獎與工作人員核銷分流;核銷介面的 PIN 屬前端防誤觸,不具資料層授權效力。
  • 輕量部署:純靜態前端 + Firestore,低維護成本即可支撐檔期人流。

檔期結束後回顧,本專案的資料層存取控制過於寬鬆,已於活動結束後關閉資料庫存取。後續同型活動改以欄位白名單與狀態轉換驗證的安全規則實作(見 10-line-lucky-draw)。

系統架構

客人手機(掃碼參加)
  │
  └── Firebase Hosting(前台轉盤 / 後台核銷)
        │
        └── Cloud Firestore
            ├── 抽獎與中獎紀錄
            └── 核銷與統計資料

技術棧

  • 前端:HTML, CSS, Vanilla JavaScript (ES Modules)
  • 資料庫:Cloud Firestore
  • 部署:Firebase Hosting

成果證明

「本專案展現了如何以一組可調的加權機率表,將節慶檔期抽獎設計成兼顧吸引力與成本控制的行銷工具,並透過獎項與櫃位的一對一綁定,把活動人潮精準導向指定消費點。」


💡 AI 協作筆記:本專案之 [檔期策略設計 / 加權機率配置 / 獎項與櫃位綁定 / 核銷後台] 係透過與 AI 深度對話共同完成,展現了高效能的 AI 輔助開發模式。

在 GitHub 上看這個案例的原始文件 ↗

← 回作品集總覽