Meta Audience Network

Android Audience Network 廣告版面配置指南

Android 裝置具有各種不同的形狀和大小，因此對於原生廣告在不同裝置上的顯示外觀應小心謹慎。為了確保原生廣告版面配置在各個裝置上的一致性，版面配置必須具有靈活彈性。也就是說，您應該讓版面配置靈活地回應不同畫面大小和方向，而非使用靜態尺寸來定義版面配置。

建立回應性版面配置的最佳作法是使用 ConstraintLayout，可以在與 Android 2.3 (API level 9) 以上版本相容的 API 程式庫中取得。此外，最新版 Android Studio 提供版面配置編輯器，可簡化建置 ConstraintLayout 的程序。以下是透過版面配置編輯器使用 ConstraintLayout 建置本機廣告用戶介面的教學課程。

繼續操作前，請務必詳閱 Audience Network 新手指南與 Android 新手指南。

必要條件

原生廣告版面配置建立步驟

步驟 1：加入 ConstraintLayout 程式庫

步驟 2：原生廣告的頂部版面配置（包括圖示、標題和標籤）

步驟 3：原生廣告的 MediaView 版面配置

步驟 4：原生廣告的社交元素、廣告內文和動作按鈕版面配置

範例：完整的 XML 限制式版面配置

示範：不同方向和畫面大小的限制式版面配置


原生橫幅廣告限制式 XML 版面配置範例

範例：完整的 XML 限制式版面配置

示範：不同方向和畫面大小的限制式版面配置


原生廣告政策

可點擊元素的錯誤範例

可點擊元素的正確範例

原生廣告版面配置建立步驟

步驟 1：加入 ConstraintLayout 程式庫

若要在專案中使用 ConstraintLayout，請遵照以下步驟操作：



將下列聲明新增到模組層級的 build.gradle（非專案！），以便使用最新的 ConstraintLayout 程式庫：

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

若解析 Constraint Layout Library 時發生問題，請先確保您已同步處理 Gradle 檔案，再嘗試重新開啟 Android Studio。

成功完成 Gradle 檔案與 ConstraintLayout 程式庫的同步處理後，您就能夠使用 ConstraintLayout 建立 XML 版面配置檔案：

步驟 2：原生廣告的頂部版面配置（包括圖示、標題和標籤）

首先，新增 Horizontal Guidelines 並將 layout_constraintGuide_begin 設為 55dp，用於限制其他檢視。新增 com.facebook.ads.MediaView，將其頂部和左側限制為父版面配置，並將其底部限制為指南。

<?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>

接著，新增另一個 Horizontal Guideline 並將 layout_constraintGuide_begin 設為 27.5dp，用於分隔廣告商名稱文字和贊助商標籤。依照以下所示新增 native_advertiser_name、native_ad_sponsored_label 和 ad_choices_container：

<?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>

步驟 3：原生廣告的 MediaView 版面配置

新增 MediaView 並將其限制在步驟 2 建立的 Horizontal Guideline 旁邊，如下所示：

<?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>

步驟 4：原生廣告的社交元素、廣告內文和動作按鈕版面配置

新增 native_ad_social_context、native_ad_body 和 native_ad_call_to_action，並將其限制在 MediaView 下方。

<?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>

範例：完整的 XML 限制式版面配置

以下是完整的原生廣告 XML 限制式版面配置範例：

<?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>

示範：不同方向和畫面大小的限制式版面配置

您已經為原生廣告建立一個 ConstraintLayout，可針對不同的方向畫面大小提供最佳用戶體驗。ConstraintLayout 在 Android 手機和平板電腦上的外觀應該都是一致的。注意：版面配置位於 ScrollView 內，當原生廣告未完整顯示時，它能夠以手機的 Landscape 方向捲動。

原生橫幅廣告限制式版面配置範例

最新版 Meta Audience Network SDK 已支援原生橫幅廣告。建立原生橫幅廣告限制式版面配置的步驟與 Native Ad 類似。您可以遵照上述步驟建立 Native Banner Ad 版面配置，或將以下 XML 版面配置程式碼範例複製到專案中。

範例：完整的 XML 限制式版面配置

以下是完整的原生橫幅廣告 XML 限制式版面配置範例：

<?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>

示範：不同方向和畫面大小的限制式版面配置

原生廣告政策規範

為了建置高品質產品，每次實作原生廣告或原生橫幅廣告版面配置時，開發人員都應遵循 Meta Audience Network 政策。您應一律給予用戶完全的點擊控制權，特別是廣告上的可點擊元素，您應確認只有廣告標題、網址、行動呼籲和圖像廣告素材可供點擊。此外，標題文字或圖像檢視中的空白不可供點擊。

可點擊元素的錯誤範例

當您在建置原生廣告的版面配置時，請勿對 TextView、AdIcon 和 MediaView 使用固定寬度和高度，以避免廣告標題中出現 white space。切記不要採用以下錯誤範例的作法：



以下是錯誤範例的外觀：

可點擊元素的正確範例

若要開發高品質的原生廣告，請遵照上述步驟，為原生廣告或原生橫幅廣告建置限制式版面配置。例如，您應該一律將「wrap_content」同時套用至 TextView 的寬度和高度，您可以將固定寬度或 match_parent 指派給 AdIcon 或 MediaView，但應該對高度使用 wrap_content。以下是您遵循 Meta Audience Network 政策時的版面配置外觀：

後續步驟

其他資源

新手指南

開始使用 Audience Network 的技術指南

API 參考資料

Facebook Android SDK 參考資料