Hệ Thống Xem Trước

Tổng Quan

Hệ Thống Xem Trước cho phép bạn thấy quảng cáo playable chính xác như cách nó sẽ hiển thị trên thiết bị mục tiêu. Các thay đổi trong Trình Chỉnh Sửa Tham Số được phản ánh ngay lập tức trong panel xem trước thông qua SDK bridge để đồng bộ thời gian thực.

Bố Cục Chia Đôi

Trang tùy chỉnh sử dụng bố cục chia đôi:

• Panel trái -- Trình Chỉnh Sửa Tham Số với thanh danh mục
• Panel phải -- Bản xem trước trực tiếp của quảng cáo playable

Bố cục có tính responsive -- các panel xếp chồng theo chiều dọc trên màn hình nhỏ và chia đôi theo chiều ngang trên desktop.

Cập Nhật Thời Gian Thực

PlayableLabs sử dụng SDK bridge với window.postMessage để đẩy các thay đổi tham số đến bản xem trước theo thời gian thực:

1. Bạn chỉnh sửa một tham số trong trình chỉnh sửa
2. Thay đổi được serialize thành thông điệp có cấu trúc
3. Thông điệp được gửi đến iframe xem trước qua SDK bridge
4. Chuyển đổi kiểu (màu sắc, số, tọa độ) được xử lý tự động
5. Bản xem trước cập nhật ngay lập tức -- không cần làm mới thủ công

Mô Phỏng Thiết Bị

Bản xem trước có thể mô phỏng cách quảng cáo playable hiển thị trên các thiết bị khác nhau.

Chọn Thiết Bị

1. Nhấn dropdown chọn thiết bị phía trên bản xem trước
2. Chọn từ 24 preset thiết bị có sẵn
3. Bản xem trước thay đổi kích thước phù hợp với màn hình thiết bị đã chọn

Các danh mục thiết bị có sẵn bao gồm:

• Điện thoại — iPhone Air, iPhone 17 Pro Max, iPhone 16 Pro và nhiều hơn
• Máy tính bảng — iPad, tablet Android
• Máy tính — Các kích thước viewport desktop tiêu chuẩn

Công cụ chọn thiết bị chỉ hiển thị các thiết bị có hình ảnh khung để xem trước chân thực. Thiết bị được sắp xếp theo thứ tự mới nhất (iOS 17 → 16 → 15) với các biến thể Pro Max và Pro được ưu tiên.

Hướng Màn Hình

Thiết bị điện thoại và máy tính bảng hỗ trợ cả hướng dọc và ngang. Nhấn nút xoay (biểu tượng điện thoại) để chuyển đổi giữa chúng. Thiết bị máy tính không hỗ trợ xoay.

Khi bạn xoay thiết bị, bản xem trước tự động điều chỉnh kích thước và khung thiết bị cập nhật phù hợp với hướng mới.

Điều Khiển Zoom và Âm Thanh

Điều Khiển Zoom

Để kiểm tra chi tiết hoặc vừa khung thiết bị lớn trên màn hình:

• Thanh trượt zoom — Kéo để điều chỉnh mức zoom từ 100% đến 200%
• Nhập số — Nhập phần trăm zoom cụ thể (100-200)
• Chế độ di chuyển — Khi đã phóng to (>100%), giữ Space và kéo để di chuyển xung quanh bản xem trước

Các điều khiển zoom nằm trong thanh công cụ xem trước và bị ẩn trên thiết bị di động để tiết kiệm không gian.

Điều Khiển Âm Thanh

Kiểm soát phát âm thanh trong bản xem trước:

• Tắt/Bật tiếng — Nhấn biểu tượng âm lượng để chuyển đổi âm thanh
• Thanh trượt âm lượng — Điều chỉnh mức âm lượng từ 0% đến 100%

Thay đổi âm thanh áp dụng ngay lập tức vào iframe xem trước mà không cần làm mới.

Các Chế Độ Xem Trước

Chế Độ Chỉnh Sửa Trực Tiếp

Chế độ mặc định. Tất cả thay đổi tham số xuất hiện theo thời gian thực. Bản xem trước có thể tương tác -- bạn có thể nhấn và tương tác với quảng cáo playable như người dùng cuối.

Xem Trước Xuất

Trước khi xuất, bạn có thể xem trước kết quả cuối cho mạng quảng cáo cụ thể:

1. Nhấn Xem Trước Xuất trong hộp thoại xuất
2. Chọn mạng mục tiêu (ví dụ: Meta, Google Ads)
3. Bản xem trước render quảng cáo playable với các ràng buộc của mạng (kích thước file, định dạng)

Điều này giúp phát hiện vấn đề trước khi tạo bản xuất cuối cùng.

Xử Lý Sự Cố

Bản Xem Trước Không Cập Nhật

1. Làm mới bản xem trước bằng nút refresh trong header xem trước
2. Xác minh rằng thay đổi của bạn đã được lưu (thay đổi chưa lưu có thể không được truyền)
3. Xóa cache trình duyệt nếu vấn đề vẫn tiếp diễn

Hiệu Suất Xem Trước Chậm

• Đóng các tab trình duyệt không sử dụng để giải phóng bộ nhớ
• Chọn preset thiết bị nhỏ hơn để giảm tải render
• Tắt các extension trình duyệt khác có thể cản trở

Tiếp Theo

• Trình Chỉnh Sửa Tham Số -- Chỉnh sửa tham số và hiểu về override
• Bản Địa Hóa -- Xem trước nội dung theo ngôn ngữ cụ thể