Nguyên tắc về bố cục quảng cáo Audience Network dành cho Android

Thiết bị Android có nhiều hình dạng và kích thước khác nhau. Vì vậy, bạn nên thận trọng với cách hiển thị quảng cáo tự nhiên của mình trên các thiết bị khác nhau. Để đảm bảo bố cục quảng cáo tự nhiên của bạn nhất quán trên các thiết bị, bố cục cần phải linh hoạt. Tức là, thay vì xác định bố cục của bạn với kích thước tĩnh, bố cục đó phải đáp ứng với các kích thước và hướng màn hình khác nhau.

Cách tốt nhất để tạo bố cục có khả năng đáp ứng cao là sử dụng ConstraintLayout có sẵn trong thư viện API và tương thích với Android 2.3 (API level 9) trở lên. Ngoài ra, với phiên bản mới nhất của Android Studio, phương pháp này giúp Trình chỉnh sửa bố cục đơn giản hóa quá trình xây dựng ConstraintLayout. Dưới đây là hướng dẫn về cách tạo giao diện người dùng quảng cáo tự nhiên với ConstraintLayout qua Trình chỉnh sửa bố cục.

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

• Đảm bảo bạn đã xem ví dụ về Quảng cáo tự nhiên và Quảng cáo biểu ngữ tự nhiên.
• Đảm bảo bạn đã đọc Chính sách của Facebook để xây dựng một sản phẩm có chất lượng.
• Đảm bảo bạn đã đọc phần Xây dựng giao diện người dùng thích ứng bằng ConstraintLayout.
• Đảm bảo bạn đã đọc phần Xây dựng giao diện người dùng bằng Trình chỉnh sửa bố cục.

Các bước tạo bố cục quảng cáo tự nhiên

Bước 1: Bao gồm thư viện ConstraintLayout

Bước 2: Tạo bố cục phần trên cùng của quảng cáo tự nhiên (bao gồm biểu tượng, tiêu đề và nhãn)

Bước 3: Tạo bố cục MediaView của quảng cáo tự nhiên

Bước 4: Tạo bố cục ngữ cảnh xã hội, nội dung quảng cáo và nút hành động của quảng cáo tự nhiên

Ví dụ: Bố cục ràng buộc XML hoàn chỉnh

Bản demo: Bố cục ràng buộc theo các hướng và kích thước màn hình khác nhau

Mẫu bố cục ràng buộc XML cho quảng cáo biểu ngữ tự nhiên

Ví dụ: Bố cục ràng buộc XML hoàn chỉnh

Bản demo: Bố cục ràng buộc theo các hướng và kích thước màn hình khác nhau

Chính sách quảng cáo tự nhiên

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

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

Các bước tạo bố cục quảng cáo tự nhiên

Bước 1: Bao gồm thư viện ConstraintLayout

Để sử dụng ConstraintLayout trong dự án của bạn, hãy tiến hành như sau:

Thêm câu lệnh sau đây vào build.gradle ở cấp mô-đun (chứ không phải dự án!) để sử dụng thư viện ConstraintLayout mới nhất:

dependencies {
    ...
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
}

Sau khi hoàn thành quá trình đồng bộ file Gradle với thư viện ConstraintLayout, bạn sẽ có thể tạo một file bố cục XML bằng ConstraintLayout:

Bước 2: Tạo bố cục phần trên cùng của quảng cáo tự nhiên (bao gồm biểu tượng, tiêu đề và nhãn)

Đầu tiên, hãy thêm Horizontal Guidelines và đặt layout_constraintGuide_begin ở 55dp, thông số này được dùng để hạn chế các chế độ xem khác. Thêm com.facebook.ads.MediaView, hạn chế các cạnh trên cùng và bên trái ở bố cục gốc và hạn chế cạnh dưới cùng theo đường dẫn hướng.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <com.facebook.ads.MediaView
        android:id="@+id/native_ad_icon"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Guideline
        android:id="@+id/below_ad_icon_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="55dp" />
    ...
</android.support.constraint.ConstraintLayout>

Tiếp theo, thêm một Horizontal Guideline khác, đặt layout_constraintGuide_begin ở 27.5dp, thông số này được dùng để tách văn bản tên nhà quảng cáo và nhãn nhà tài trợ. Thêm native_advertiser_name, native_ad_sponsored_label và ad_choices_container như sau:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
    ...
    <TextView
        android:id="@+id/native_advertiser_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="6dp"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/black"
        android:textSize="15sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
        app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />

    <android.support.constraint.Guideline
        android:id="@+id/separate_advertiser_name_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="27.5dp" />

    <TextView
        android:id="@+id/native_ad_sponsored_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/darker_gray"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
        app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />

    <LinearLayout
        android:id="@+id/ad_choices_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
    ...
</android.support.constraint.ConstraintLayout>

Bước 3: Tạo bố cục MediaView của quảng cáo tự nhiên

Thêm MediaView và hạn chế theo Horizontal Guideline đã tạo ở Bước 2 như sau:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
    ...   
    <com.facebook.ads.MediaView
    android:id="@+id/native_ad_media"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:gravity="center"
    app:layout_constraintEnd_toEndOf="@+id/ad_choices_container"
    app:layout_constraintStart_toStartOf="@+id/native_ad_icon"
    app:layout_constraintTop_toTopOf="@+id/below_ad_icon_guideline" />
    ...
</android.support.constraint.ConstraintLayout>

Bước 4: Tạo bố cục ngữ cảnh xã hội, nội dung quảng cáo và nút hành động của quảng cáo tự nhiên

Thêm native_ad_social_context, native_ad_body và native_ad_call_to_action rồi hạn chế các thông số này như MediaView dưới đây.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout>
    ...      
    <TextView
        android:id="@+id/native_ad_social_context"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginStart="3dp"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/darker_gray"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_ad_media"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />

    <TextView
        android:id="@+id/native_ad_body"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLines="2"
        android:textColor="@android:color/black"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_ad_social_context"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_social_context" />

    <Button
        android:id="@+id/native_ad_call_to_action"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_marginTop="15dp"
        android:background="#4286F4"
        android:textSize="12sp"
        android:textColor="@android:color/white"
        android:text="@string/placeholder"
        android:paddingStart="20dp"
        android:paddingEnd="20dp"
        app:layout_constraintEnd_toEndOf="@id/native_ad_media"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />
    ...
</android.support.constraint.ConstraintLayout>

Ví dụ: Bố cục ràng buộc XML hoàn chỉnh

Dưới đây là mẫu bố cục ràng buộc XML hoàn chỉnh cho quảng cáo tự nhiên:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <com.facebook.ads.MediaView
        android:id="@+id/native_ad_icon"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:layout_marginStart="10dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Guideline
        android:id="@+id/below_ad_icon_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="55dp" />

    <TextView
        android:id="@+id/native_advertiser_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="6dp"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/black"
        android:textSize="15sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
        app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />

    <android.support.constraint.Guideline
        android:id="@+id/separate_advertiser_name_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="27.5dp" />

    <TextView
        android:id="@+id/native_ad_sponsored_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/darker_gray"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
        app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />

    <LinearLayout
        android:id="@+id/ad_choices_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <com.facebook.ads.MediaView
        android:id="@+id/native_ad_media"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        app:layout_constraintEnd_toEndOf="@+id/ad_choices_container"
        app:layout_constraintStart_toStartOf="@+id/native_ad_icon"
        app:layout_constraintTop_toTopOf="@+id/below_ad_icon_guideline" />

    <TextView
        android:id="@+id/native_ad_social_context"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginStart="3dp"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/darker_gray"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_ad_media"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />

    <TextView
        android:id="@+id/native_ad_body"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLines="2"
        android:textColor="@android:color/black"
        android:textSize="12sp"
        android:text="@string/placeholder"
        app:layout_constraintStart_toStartOf="@+id/native_ad_social_context"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_social_context" />

    <Button
        android:id="@+id/native_ad_call_to_action"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_marginTop="15dp"
        android:background="#4286F4"
        android:textSize="12sp"
        android:textColor="@android:color/white"
        android:text="@string/placeholder"
        android:paddingStart="20dp"
        android:paddingEnd="20dp"
        app:layout_constraintEnd_toEndOf="@id/native_ad_media"
        app:layout_constraintTop_toBottomOf="@+id/native_ad_media" />

</android.support.constraint.ConstraintLayout>

Bản demo: Bố cục ràng buộc theo các hướng và kích thước màn hình khác nhau

Bạn đã tạo một ConstraintLayout cho quảng cáo tự nhiên của mình. Quảng cáo này sẽ có trải nghiệm người dùng tốt nhất cho các hướng và kích thước màn hình khác nhau. ConstraintLayout phải hiển thị nhất quán trên cả điện thoại và máy tính bảng Android. Lưu ý: bố cục này nằm trong ScrollView; có thể cuộn bố cục theo hướng Landscape của điện thoại khi quảng cáo tự nhiên không hiển thị đầy đủ.

Mẫu bố cục ràng buộc cho quảng cáo biểu ngữ tự nhiên

Quảng cáo biểu ngữ tự nhiên đã có trên Meta Audience Network SDK mới nhất. Các bước để tạo bố cục ràng buộc biểu ngữ tự nhiên tương tự như Native Ad. Bạn có thể làm theo các bước trên để tạo Bố cục Native Banner Ad hoặc sao chép mã bố cục XML mẫu sau đây vào dự án của mình.

Ví dụ: Bố cục ràng buộc XML hoàn chỉnh

Dưới đây là mẫu bố cục ràng buộc XML hoàn chỉnh cho quảng cáo biểu ngữ tự nhiên:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="3dp">

    <RelativeLayout
        android:id="@+id/ad_choices_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="2dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/native_ad_sponsored_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:lines="1"
        android:textColor="@android:color/darker_gray"
        android:textSize="12sp"
        android:text="Placeholder"
        app:layout_constraintStart_toEndOf="@id/ad_choices_container"
        app:layout_constraintTop_toTopOf="parent" />

    <com.facebook.ads.MediaView
        android:id="@+id/native_ad_icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginTop="3dp"
        android:gravity="center"
        app:layout_constraintStart_toStartOf="@id/ad_choices_container"
        app:layout_constraintTop_toBottomOf="@id/ad_choices_container" />

    <TextView
        android:id="@+id/native_advertiser_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="6dp"
        android:textColor="@android:color/black"
        android:textSize="15sp"
        android:textStyle="bold"
        android:ellipsize="end"
        android:lines="1"
        app:layout_constraintStart_toEndOf="@+id/native_ad_icon"
        app:layout_constraintBottom_toTopOf="@+id/separate_advertiser_name_guideline" />

    <android.support.constraint.Guideline
        android:id="@+id/separate_advertiser_name_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="43dp" />

    <TextView
        android:id="@+id/native_ad_social_context"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:ellipsize="end"
        android:lines="1"
        app:layout_constraintStart_toStartOf="@+id/native_advertiser_name"
        app:layout_constraintTop_toBottomOf="@+id/separate_advertiser_name_guideline" />

    <Button
        android:id="@+id/native_ad_call_to_action"
        android:layout_width="80dp"
        android:layout_height="50dp"
        android:gravity="center"
        android:background="#4286F4"
        android:textSize="12sp"
        android:textColor="@android:color/white"
        android:paddingLeft="3dp"
        android:paddingRight="3dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@id/native_ad_icon" />

</android.support.constraint.ConstraintLayout>

Bản demo: Bố cục ràng buộc theo các hướng và kích thước màn hình khác nhau

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

Bất cứ khi nào xây dựng bố cục cho quảng cáo tự nhiên, bạn không được sử dụng chiều rộng và chiều cao cố định cho TextView, AdIcon và MediaView để tránh white space trong tiêu đề quảng cáo. Dưới đây là ví dụ không phù hợp mà bạn nên tránh:

Ví dụ không phù hợp có dạng như sau:

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 làm theo các bước ở trên để xây dựng bố cục ràng buộc cho quảng cáo tự nhiên hoặc quảng cáo biểu ngữ tự nhiên. Ví dụ: bạn nên luôn áp dụng "wrap_content" cho cả chiều rộng và chiều cao trong TextView; bạn có thể chỉ định chiều rộng cố định hoặc match_parent cho AdIcon hay MediaView, nhưng bạn nên sử dụng wrap_content cho chiều cao. Dưới đây là cách bố cục hiển thị khi bạn tuân theo Chính sách của Meta Audience Network: