Hướng dẫn về bố cục quảng cáo trên Audience Network dành cho iOS

Khi quảng cáo hiển thị trên màn hình, nếu để thanh điều hướng, thanh tab, thanh công cụ và các chế độ xem cấp trên khác che mất một phần quảng cáo thì trải nghiệm người dùng sẽ không được tối ưu. Ví dụ bên trái dưới đây cho thấy quảng cáo được hiển thị ở đầu màn hình iPhone X và bị cạnh trên cùng che mất một phần. Ví dụ bên phải cho thấy thiết kế tốt hơn với khoảng cách phù hợp giữa cạnh trên cùng của màn hình iPhone X và chế độ xem quảng cáo.

Thiết bị iOS 11 trở lên đã giới thiệu hướng dẫn về bố cục mới có tên là safeAreaLayoutGuide. Hướng dẫn này sẽ được dùng để xác định vùng an toàn khi thiết kế nội dung ứng dụng của bạn, bao gồm cả quảng cáo bạn muốn hiển thị trên màn hình. Vùng an toàn được xác định bằng hộp ranh giới màu xanh lá cây trong ví dụ ở trên. Với hướng dẫn về bố cục mới này, hãy cùng xem quá trình triển khai kỹ thuật cho việc hiển thị quảng cáo tự nhiên trong ứng dụng của bạn. Bạn có thể áp dụng phương pháp tương tự để hiển thị quảng cáo biểu ngữ.

Vui lòng tham khảo hướng dẫn về quảng cáo tự nhiên của chúng tôi khi thiết kế quảng cáo tự nhiên trong ứng dụng.

Điều kiện tiên quyết

Đảm bảo bạn đã xem ví dụ về Quảng cáo tự nhiên, Quảng cáo biểu ngữ tự nhiên hoặc Quảng cáo biểu ngữ.


iOS 11 trở lên: Hướng dẫn về bố cục vùng an toàn

Các phiên bản iOS trước: Hướng dẫn về bố cục trên cùng và dưới cùng


iOS 11 trở lên: Hướng dẫn về bố cục vùng an toàn

  1. Nếu ứng dụng của bạn dùng Công cụ tạo giao diện với Xcode 9 trở lên và nhắm đến iOS 11 trở lên, bạn nên bật hướng dẫn về bố cục Vùng an toàn. Mở Công cụ tạo giao diện và nhấp vào màn hình trình kiểm soát chế độ xem. Bạn sẽ nhìn thấy các tùy chọn Tài liệu công cụ tạo giao diện ở bên phải. Chọn Sử dụng hướng dẫn về bố cục vùng an toàn.

  2. Chọn chế độ xem Giao diện người dùng quảng cáo từ Màn hình trình kiểm soát chế độ xem và duyệt đến Công cụ tùy chỉnh kích thước. Thêm khoảng cách bên trái, bên phải, trên cùng, dưới cùng vào giữa bố cục an toàn và cung cấp giá trị khoảng cách tối ưu như hiển thị dưới đây:

  3. Xây dựng và chạy ứng dụng của bạn. Bạn sẽ nhìn thấy quảng cáo hiển thị trên màn hình có không gian tối ưu giữa góc tròn, cảm biến và thanh trạng thái trên màn hình.

Các phiên bản iOS trước: Hướng dẫn về bố cục trên cùng và dưới cùng

  1. Để hỗ trợ các phiên bản iOS cũ hơn iOS 11, hãy sử dụng hướng dẫn về bố cục trên cùng và dưới cùng để giải quyết vấn đề về vùng an toàn. Đảm bảo các hướng dẫn về bố cục trên cùng và dưới cùng được đưa vào màn hình Trình kiểm soát chế độ xem như hiển thị dưới đây:

  2. Chọn chế độ xem Giao diện người dùng quảng cáo từ Màn hình trình kiểm soát chế độ xem và duyệt đến Công cụ tùy chỉnh kích thước. Thêm khoảng cách trên cùng và dưới cùng vào giữa bố cục trên cùng và dưới cùng, rồi cung cấp giá trị khoảng cách tối ưu như hiển thị dưới đây:

Tuân thủ chính sách quảng cáo tự nhiên

Để xây dựng một sản phẩm có chất lượng, nhà phát triển phải tuân thủ Chính sách của Meta Audience Network bất cứ khi nào bạn triển khai Bố cục quảng cáo tự nhiên hoặc quảng cáo biểu ngữ tự nhiên. Bạn nên luôn cấp cho người dùng toàn quyền kiểm soát khi nhấp. Đặc biệt đối với các thành phần có thể nhấp trên quảng cáo, bạn nên đảm bảo chỉ các tiêu đề, URL, nút Kêu gọi hành động và tài sản hình ảnh của quảng cáo là có thể nhấp. Hơn nữa, khoảng trống trong chế độ xem hình ảnh hoặc văn bản tiêu đề không được ở trạng thái có thể nhấp.

Ví dụ về các thành phần có thể nhấp không phù hợp

Mỗi khi xây dựng bố cục cho quảng cáo tự nhiên hoặc quảng cáo biểu ngữ tự nhiên, bạn không được sử dụng chiều rộng và chiều cao cố định cho UILabel để tránh white space trong tiêu đề, nội dung, ngữ cảnh xã hội và nhãn được tài trợ của quảng cáo. Dưới đây là ví dụ không phù hợp mà bạn nên tránh:

Ví dụ về các thành phần có thể nhấp phù hợp

Để xây dựng một quảng cáo tự nhiên có chất lượng, vui lòng xây dựng bố cục ràng buộc động cho quảng cáo tự nhiên hoặc quảng cáo biểu ngữ tự nhiên. Ví dụ: nếu đang sử dụng bố cục tự động phân cảnh, bạn có thể dùng Trailing Space >= x thay cho Trailing Space = x hoặc Width <= y thay cho Width = y. Dưới đây là cách bố cục hiển thị khi bạn tuân thủ Chính sách của Meta Audience Network:

Các bước tiếp theo

Thông tin và nguồn lực khác

Hướng dẫn bắt đầu

Hướng dẫn kỹ thuật để bắt đầu sử dụng Audience Network

Tài liệu tham khảo về API

Tài liệu tham khảo về Facebook SDK dành cho iOS