Case Studies6 min read15 tháng 7, 2026

Decathlon « Deal Frenzy / Cơn Lốc Deal »: Game WebAR filter khuôn mặt dễ chia sẻ

Decathlon Việt Nam muốn một game filter AR lan truyền cho TikTok/Instagram. Nhưng Meta đã khai tử filter AR bên thứ ba năm 2025. Đây là cách Code Crush giao đúng game hứng với face-tracking và bonus nhóm dưới dạng WebAR dễ chia sẻ — bằng MediaPipe, không cần app và không bị nền tảng gác cổng.

Code Crush Team

Gamification Agency

Decathlon Deal Frenzy Cơn Lốc Deal — game hứng WebAR filter khuôn mặt dễ chia sẻ

Về dự án

Deal Frenzy — Cơn Lốc Deal là concept gamification thứ hai trong hai concept Code Crush dựng thử cho Decathlon Việt Nam. Nếu Deal-cathlon AR Hunt kéo người ta vào cửa hàng, thì cái này được dựng để lan trên mạng: một game hứng nhanh, vui, điều khiển bằng khuôn mặt, chơi bằng camera và chia sẻ với bạn bè.

Tháp Decathlon bung ra, đồ thể thao rơi như mưa, và bạn cử động đầu để lia cái giỏ qua trái qua phải hứng lấy — trong 50 giây — đồng thời né những đám mây bão. Ai chơi cũng có quà.

Màn intro của Deal Frenzy. Giỏ đi theo khuôn mặt, bonus nhóm ×2, voucher đảm bảo, và bảng xếp hạng tuần lên tới 5.000.000₫.
Màn intro của Deal Frenzy. Giỏ đi theo khuôn mặt, bonus nhóm ×2, voucher đảm bảo, và bảng xếp hạng tuần lên tới 5.000.000₫.

Brief từ khách hàng

Deck pitch nói rõ mục tiêu — và cả kênh:

Một game filter AR vui, dễ chia sẻ trên TikTok và Instagram. Dùng face/hand tracking để hứng đồ Decathlon rơi xuống. Thiết kế sao cho chơi cùng bạn bè hoặc gia đình sẽ kích hoạt bonus nhóm, và trao cho mọi người một phần thưởng đảm bảo cùng bảng xếp hạng phía trên.

Vậy các cơ chế được yêu cầu đã rõ: face/hand tracking, vòng hứng 50 giây, bonus nhóm ×2 khi có từ hai người trở lên trong khung hình, e-voucher 50K đảm bảo, và bảng xếp hạng tuần/mùa.

Nút thắt: brief đòi một nền tảng không còn tồn tại

Đây là vấn đề thật chúng tôi gặp, và cách giải.

Bạn không còn publish được filter AR tùy biến lên Instagram hay Facebook nữa. Meta đã đóng Spark AR — nền tảng filter AR bên thứ ba của họ — vào 14/01/2025. Thương hiệu và agency không còn ship được filter Meta tùy biến. Effect House của TikTok vẫn còn, nhưng là trình chỉnh đóng, độc quyền: bạn dựng trong công cụ của họ, theo luật của họ, và không nhúng được logic, phần thưởng, CRM hay kiểm tra chống gian lận của riêng mình.

Làm đúng y brief nghĩa là hoặc ship lên một nền tảng đã chết, hoặc trói toàn bộ lớp phần-thưởng-và-data vào sandbox của người khác.

Code Crush trả lời thế nào

Chúng tôi giao đúng trải nghiệm đó bằng WebAR — một game AR face-tracking chạy trong trình duyệt di động và chia sẻ bằng link hoặc QR.

Quyết định này biến giới hạn nền tảng thành lợi thế:

Chạy khắp nơi — một link hoạt động trong trình duyệt in-app của TikTok, trên Instagram, Zalo, Messenger, hay một mã QR trên poster. Không còn "chỉ có trên iOS".
Chúng tôi sở hữu cả vòng lặp — chấm điểm, voucher đảm bảo, bảng xếp hạng, chia sẻ và thu data first-party đều nằm trong code của chúng tôi, không phải sandbox hiệu ứng của nền tảng.
Không app, không gác cổng, không hàng chờ duyệt — publish và cải tiến bất cứ lúc nào muốn.
Cả hai concept nằm sau một link duy nhất — người chơi chọn "The Deal-cathlon AR Hunt" hoặc "Deal Frenzy / Cơn Lốc Deal" từ hub.
Cả hai concept nằm sau một link duy nhất — người chơi chọn "The Deal-cathlon AR Hunt" hoặc "Deal Frenzy / Cơn Lốc Deal" từ hub.

Chúng tôi code thế nào

Face tracking: FaceLandmarker của MediaPipe (Tasks Vision) của Google. Chúng tôi tự host runtime WASM và file model, rồi lazy-load chỉ khi game bắt đầu, để chúng nằm ngoài bundle tải lần đầu và màn hình mở đầu vẫn tức thì.
Giỏ ghim theo đầu: cái giỏ đi theo vị trí khuôn mặt được nhận diện — nghiêng đầu là giỏ lia tới chỗ đồ rơi. Đây là cùng primitive với try-on ảo, nên người chơi hiểu ngay "khuôn mặt là tay cầm".
Bonus nhóm ×2: tracker đếm số khuôn mặt trong khung. Khi thấy hai người trở lên liên tục, điểm của vòng tự động nhân đôi — cơ chế thưởng đúng nghĩa cho việc kéo một người bạn vào khung hình.
Có rủi ro, không chỉ có thưởng: khoảng một trong sáu drop là mây bão trị giá −3 điểm, nên vòng chơi đòi hỏi tập trung chứ không lia bừa. Các mốc điểm bật lên dọc đường để tạo cảm giác.
Phần thưởng: e-voucher 50.000₫ đảm bảo khi hoàn thành, cộng một lượt quay bonus có trọng số, và bảng xếp hạng tuần + mùa nơi người chơi được xếp theo điểm.
Chia sẻ thật: một tấm score card được tạo ra cộng Web Share API, để "chia sẻ lượt chơi" mở khay chia sẻ gốc của máy, không phải một nút chết.
Dự phòng mượt mà: không có camera, hoặc máy không chạy nổi model? Giỏ chuyển sang kéo bằng ngón tay với nút gạt bonus nhóm thủ công, để không ai bị chặn ngoài.

Những giới hạn (và đánh đổi thành thật)

Không có filter nền tảng gốc — vì bắt buộc. Như trên, filter Meta tùy biến đã biến mất và Effect House thì đóng. WebAR là con đường duy nhất giữ được phần thưởng và data first-party. Đánh đổi là nó sống trong trình duyệt thay vì trong camera hiệu ứng của TikTok/IG.
Face tracking phụ thuộc thiết bị. ML on-device cần điện thoại tương đối mới và quyền camera; hiệu năng thay đổi, đó đúng là lý do có bản dự phòng kéo bằng ngón tay.
Bảng xếp hạng cần backend mới thật. Trong prototype nó được mô phỏng phía client. Chiến dịch thật cần một server, cộng các kiểm tra danh tính và chống gian lận mà brief yêu cầu (giới hạn số lượt tính hạng, khử trùng lặp) trước khi đưa tiền-quà thật vào cuộc.
Quyền camera là một bước phễu. Một số người chơi sẽ không cấp — voucher đảm bảo và chế độ dự phòng ở đó để giữ họ lại trong game.

Vì sao nó hiệu quả cho Decathlon

Bonus nhóm là động cơ tăng trưởng: cách rẻ nhất để nhân đôi điểm là kéo một người vào khung hình, nên game tự lan. Ai cũng thắng một voucher, nên mỗi lượt chơi là một lý do đổi được để ghé Decathlon — và vì là code của chúng tôi, mỗi lượt chơi cũng là data first-party cho remarketing.

Đây là một trong hai concept của pitch. Người anh em của nó — cuộc săn kho báu bằng camera tại cửa hàng — được viết trong Decathlon « Deal-cathlon AR Hunt »: Cuộc săn kho báu WebAR tại cửa hàng.

Prototype do Code Crush thiết kế và phát triển như một concept cho Decathlon Việt Nam. Phần thưởng, bảng xếp hạng và thời gian chỉ mang tính minh họa. Ngày đóng Spark AR theo thông báo công khai của Meta.

Thẻ

case studyDecathlonWebARAR face trackingMediaPipesocial gameSpark ARviral marketingVietnam
Bản tin miễn phí

Nhận thông tin chuyên sâu về gamification gửi hằng tuần

Tham gia cùng các quản lý thương hiệu và marketer để nhận những nội dung hay nhất của chúng tôi về game thương hiệu, chiến lược tương tác và tiếp thị tương tác — không spam, hủy đăng ký bất cứ lúc nào.

Không spam. Hủy đăng ký bất cứ lúc nào. Chúng tôi tôn trọng hộp thư của bạn.

Hãy cùng tạo ra điều mà khán giả của bạn sẽ yêu thích

Từ game thương hiệu đến trải nghiệm 3D nhập vai — chúng tôi thổi hồn vào sự tương tác.