Heineken AR Hunt
Săn vật phẩm 3D trên trình duyệt — không cần cài app.
- Client
- Heineken Vietnam
- Year
- 2025
- Role
- Interactive Developer
- Industry
- FMCG · Bia
Mỗi dịp Tết, Heineken cần một touch-point digital mới — không lặp lại format game flash quen thuộc. Năm 2025, brand muốn thử AR ngay trên trình duyệt mobile: mở link là chơi, không tải app, không loading bar dài.
Bối cảnh
Campaign Tết của Heineken năm 2025 xoay quanh hành động cụng bia — biểu tượng của lời chúc và sự gắn kết. Brand team muốn user thực sự tham gia chứ không chỉ xem TVC. Mục tiêu rất rõ: ai cũng có thể chơi từ chính chiếc điện thoại của mình, ngay khi quét QR ở booth hay nhận link qua Zalo OA — không có rào cản download.
WebAR là lựa chọn tự nhiên. Chạy thẳng trong Safari hoặc Chrome mobile, dùng gyro để khách nhìn xung quanh không gian 3D ảo. Vấn đề là phần lớn case WebAR trước đây nặng, lag, hoặc đẹp nhưng load 30 giây — và chúng tôi không muốn đi theo cách đó.
Thử thách
Ba bài toán cần giải cùng lúc.
Performance — toàn bộ scene 3D với animation phải mượt trên iPhone 11 hay Galaxy A series. Không có chuyện 'load xong rồi giật'.
Engagement — 30 giây là deadline khắc nghiệt. Vật phẩm phải dễ thấy, dễ chạm, và đếm điểm phải có cảm giác thoả mãn.
Integrity — mỗi khách một lượt mỗi ngày, kết quả về thẳng CRM brand. Không cho khách spam điểm bằng cách refresh tab.
Cách tiếp cận
Build trên Three.js + WebGL native, không dùng framework AR nặng. Asset gồm bốn mẫu lon, logo, và scene Tết được export GLB và optimize Draco compression — tổng size tài nguyên dưới 2MB cho cả app.
Camera tracking dùng deviceorientation API — gyro pure, không cần permission camera, không cần marker. User chỉ xoay điện thoại quanh mình, vật phẩm xuất hiện đúng vị trí 3D đã pre-bake quanh không gian ảo.
Logic lượt chơi và scoring chạy phía server. Client chỉ phát event item-collected kèm timestamp và nonce; server validate sequence và time-window rồi mới cộng điểm. Client làm đúng việc render — phần đáng tin cậy thuộc về backend.
Quá trình
Sprint bốn tuần từ moodboard tới deploy. Tuần 1–2 build scene 3D và tinh chỉnh camera. Tuần 3 ráp asset chính thức từ brand và làm UI flow. Tuần 4 stress test trên 12 thiết bị thực và xử lý corner case — Safari iOS handle gyro permission khác hẳn Chrome Android.
Đoạn behind-the-scenes phía dưới là editor tự build cho brand team: preview scene trực tiếp trên browser, swap asset, tinh chỉnh vị trí vật phẩm mà không cần re-deploy mỗi lần đổi visual.
Kết quả
Triển khai tại 8 thành phố qua 200+ booth Tết và touchpoint Zalo OA. User trung bình hoàn thành lượt chơi trong 18 giây — dưới giới hạn 30 giây. Tỉ lệ hoàn thành đầy đủ 10 vật phẩm đạt 64%, cao hơn 2.3× benchmark mini-game thông thường của brand. Suốt thời gian campaign chạy, không ghi nhận ticket lỗi production nào.