TC Toyo ChangMarTech Engineer ← 回作品集

CASE 10 / 13

加入 LINE 參加抽抽樂:好友裂變導客系統

以 LINE 官方帳號好友為門檻的轉盤抽獎,把線上曝光導成現場消費

StatusProductionStackVanilla JS | Firebase | LINE LIFFFocusGrowth & O2O

此專案為園區行銷活動系統,透過 LINE LIFF 整合,將「加入官方帳號好友」設為抽獎門檻,讓每一次抽獎同時完成好友數成長與現場櫃位導客。

點此造訪正式上線網站 (LINE 抽抽樂)

行銷痛點:活動熱鬧,卻留不下數據與名單

傳統現場抽獎(紙本刮刮卡、兌換券)在行銷上有幾個難以突破的瓶頸:

  • 留不住名單:客人抽完就走,活動結束後無法再行銷觸及。
  • 難統計、難對帳:各獎項發出多少、實際核銷多少全靠人工記帳。
  • 無法防重複:同一人重複抽獎難以控管,行銷預算容易失血。
  • 看不到轉換:無從得知線上曝光到底帶了多少人進到現場消費。

產品策略:把抽獎變成「加好友 + 導客」的雙效入口

本系統以 LINE LIFF 為核心,將抽獎流程設計成一條可追蹤的行銷漏斗:

  • 好友門檻:使用者需先加入園區 LINE 官方帳號好友才能參加,讓每次抽獎直接轉化為可再行銷的名單。
  • 一人一抽:以 LINE User ID 綁定 players/{lineUserId},天然防止重複參加。
  • 獎項即導客:15 項獎品分屬園區餐飲、泡泡劇場、恐龍火車、碰碰車與服務台,中獎即引導客人前往對應櫃位兌換。
  • 後台核銷:工作人員透過核銷介面標記兌換,狀態與時間戳記寫入 Firestore 留痕。

商業價值與影響力

  • 官方帳號好友成長:把一次性活動流量沉澱為可長期經營的私域名單。
  • 精準導客:中獎獎項對應到指定餐飲與設施櫃位,把行銷活動導成實際到店消費。
  • 可統計的行銷成效:各獎項的抽中數與核銷率一目了然,供活動成效檢討。
  • 零紙本、可稽核:抽獎與核銷全數位化,杜絕重複與人工記帳誤差。

核心功能

客人前台

  • LINE LIFF 一鍵登入:免額外註冊,直接以 LINE 身分參加。
  • 加好友驗證:未加好友者引導加入官方帳號,達成活動門檻。
  • 轉盤抽獎動畫:以機率表驅動的轉盤,中獎結果即時顯示兌換地點。
  • 一人一次控管:以 LINE User ID 綁定,防止重複抽獎。

工作人員後台

  • 核銷入口:現場人員在核銷介面標記中獎兌換,並記錄核銷時間。
  • 獎項機率設定:以設定表統一管理各獎項機率與兌換位置。
  • 發放與核銷統計:彙整各獎項的抽中數與實際兌換數(原以整表讀取實作,為避免參加者資料外洩已收回該權限,待改以聚合計數文件重做)。

技術亮點

  • LINE LIFF 整合:於 LINE 生態內完成登入、好友驗證與抽獎,降低參加門檻。
  • Firestore 防重複機制:以 players/{lineUserId} 為主鍵,天然實現一人一抽。
  • 機率表驅動:獎項名稱、前台顯示、兌換地點與機率集中於設定檔,非工程人員也能調整。
  • Firestore 安全規則把關寫入players 僅允許以 LINE User ID 單筆讀取、禁止列出整個 collection;建立時檢查欄位白名單、獎品名稱與初始狀態,更新時僅開放核銷欄位由 falsetrue,並禁止刪除。
  • 前後台分離:客人抽獎與工作人員核銷分流;核銷介面的 PIN 屬前端防誤觸,實際的資料寫入限制由上述安全規則負責。

系統架構

LINE 官方帳號 / 客人手機
  │
  ├── LINE LIFF(登入 + 好友驗證)
  │
  └── Firebase Hosting(前台轉盤 / 後台核銷)
        │
        └── Cloud Firestore
            ├── players/{lineUserId}(抽獎紀錄,一人一抽)
            └── 核銷與統計資料

技術棧

  • 前端:HTML, CSS, Vanilla JavaScript (ES Modules)
  • 登入整合:LINE LIFF
  • 資料庫:Cloud Firestore(含 Security Rules)
  • 部署:Firebase Hosting

成果證明

「本專案示範了如何把一場現場抽獎活動,設計成同時達成『官方帳號好友成長』與『現場櫃位導客』的行銷漏斗,讓活動流量不再一次性消耗,而是沉澱為可持續經營的私域名單與可統計的營運數據。」


💡 AI 協作筆記:本專案之 [活動流程設計 / LIFF 整合 / 機率與獎項設定 / 核銷後台 / Firestore 規則] 係透過與 AI 深度對話共同完成,展現了高效能的 AI 輔助開發模式。

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

← 回作品集總覽