แนวทางเลย์เอาท์โฆษณาของ Audience Network สำหรับ Android

อุปกรณ์ Android มีรูปร่างและขนาดที่แตกต่างกันทั้งหมด ดังนั้นคุณควรระมัดระวังกับการแสดงผลโฆษณาแบบเนทีฟของคุณบนอุปกรณ์ที่แตกต่างกัน เลย์เอาท์จำเป็นต้องยืดหยุ่นได้เพื่อรับประกันว่าเลย์เอาท์โฆษณาแบบเนทีฟของคุณจะสอดคล้องกันในทุกอุปกรณ์ หมายความว่าเลย์เอาท์ของคุณควรจะสามารถตอบสนองกับขนาดหน้าจอและการกำหนดทิศทางที่แตกต่างกันได้ แทนที่จะเป็นการกำหนดเลย์เอาท์ด้วยขนาดคงที่

หลักปฏิบัติที่ดีที่สุดในการสร้างเลย์เอาท์ที่เปลี่ยนไปตามอุปกรณ์คือการใช้ ConstraintLayout ซึ่งมีให้ใช้งานได้ในไลบรารี API ที่ใช้งานได้กับ Android 2.3 (API level 9) ขึ้นไป นอกจากนี้ เมื่อใช้ Android Studio เวอร์ชั่นล่าสุดจะมีพร้อมตัวแก้ไขเลย์เอาท์ เพื่อช่วยให้กระบวนการสร้าง ConstraintLayout เรียบง่ายยิ่งขึ้น ต่อไปนี้เป็นบทแนะนำการใช้งานเกี่ยวกับวิธีสร้าง UI โฆษณาแบบเนทีฟด้วย ConstraintLayout โดยใช้ตัวแก้ไขเลย์เอาท์

ข้อกำหนดเบื้องต้น

• ตรวจสอบให้แน่ใจว่าคุณได้ทำตัวอย่างโฆษณาแบบเนทีฟและโฆษณาแบบแบนเนอร์แบบเนทีฟเสร็จสมบูรณ์แล้ว
• ตรวจสอบให้แน่ใจว่าคุณได้อ่านนโยบายของ Facebook แล้วเพื่อสร้างผลิตภัณฑ์ที่มีคุณภาพ
• ตรวจสอบให้แน่ใจว่าคุณได้อ่าน Build a Responsive UI with ConstraintLayout (สร้าง UI ที่เปลี่ยนไปตามอุปกรณ์ด้วย ConstraintLayout) แล้ว
• ตรวจสอบให้แน่ใจว่าคุณได้อ่าน Build a UI with Layout Editor (สร้าง UI ด้วยตัวแก้ไขเลย์เอาท์) แล้ว

ขั้นตอนการสร้างเลย์เอาท์โฆษณาแบบเนทีฟ

ขั้นตอนที่ 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'
}

เมื่อซิงค์ไฟล์ Gradle กับไลบรารี ConstraintLayout เสร็จเรียบร้อยแล้ว คุณควรจะสามารถสร้างไฟล์เลย์เอาท์ XML ด้วย ConstraintLayout ได้

ขั้นตอนที่ 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 และจำกัดโดยใช้ Horizontal Guideline ที่สร้างขึ้นในขั้นตอนที่ 2 ดังต่อไปนี้

<?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 เมื่อโฆษณาแบบเนทีฟไม่ได้ปรากฏขึ้นครบทั้งหมด

ตัวอย่างเลย์เอาท์ที่มีการจำกัดของโฆษณาแบบแบนเนอร์แบบเนทีฟ

โฆษณาแบบแบนเนอร์แบบเนทีฟสามารถใช้งานได้ใน Audience Network SDK ล่าสุดของ Meta ขั้นตอนในการสร้างเลย์เอาท์ที่มีการจำกัดของแบนเนอร์แบบเนทีฟจะคล้ายคลึงกับ 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>

การสาธิต: เลย์เอาท์ที่มีการจำกัดในการวางแนวและขนาดหน้าจอแบบต่างๆ

การปฏิบัติตามนโยบายโฆษณาแบบเนทีฟ

ในการสร้างผลิตภัณฑ์ที่มีคุณภาพ ผู้พัฒนาควรปฏิบัติตามนโยบาย Audience Network ของ Meta เมื่อใดก็ตามที่ใช้เลย์เอาท์ของโฆษณาแบบเนทีฟหรือโฆษณาแบบแบนเนอร์แบบเนทีฟ คุณควรให้ผู้ใช้ควบคุมการคลิกได้อย่างเต็มที่อยู่เสมอ คุณควรตรวจสอบว่ามีเฉพาะชื่อโฆษณา, URL, การกระตุ้นให้ดำเนินการ และองค์ประกอบที่เป็นรูปภาพเท่านั้นที่สามารถคลิกได้ โดยเฉพาะอย่างยิ่งองค์ประกอบที่สามารถคลิกได้ในโฆษณา นอกจากนี้ พื้นที่ว่างสีขาวในข้อความชื่อหรือมุมมองภาพต้องไม่สามารถคลิกได้

ตัวอย่างที่ไม่ดีขององค์ประกอบที่สามารถคลิกได้

เมื่อใดก็ตามที่สร้างเลย์เอาท์สำหรับโฆษณาแบบเนทีฟ คุณจะต้องไม่ใช้ความกว้างและความสูงแบบคงที่กับ TextView, AdIcon และ MediaView ทั้งนี้เพื่อหลีกเลี่ยง white space ในชื่อโฆษณา ด้านล่างนี้เป็นตัวอย่างที่ไม่ดีที่คุณไม่ควรทำ:

ตัวอย่างที่ผิดจะมีลักษณะดังนี้:

ตัวอย่างที่ดีขององค์ประกอบที่สามารถคลิกได้

หากต้องการสร้างโฆษณาแบบเนทีฟที่มีคุณภาพ โปรดทำตามขั้นตอนข้างต้นเพื่อสร้างเลย์เอาท์ที่มีการจำกัดสำหรับโฆษณาแบบเนทีฟหรือโฆษณาแบบแบนเนอร์แบบเนทีฟ ตัวอย่างเช่น คุณควรใช้ 'wrap_content' กับทั้งความกว้างและความสูงใน TextView อยู่เสมอ ทั้งนี้ คุณอาจกำหนดความกว้างแบบคงที่หรือ match_parent ให้กับ AdIcon หรือ MediaView ได้ แต่คุณควรใช้ wrap_content กับความสูง ด้านล่างนี้คือลักษณะของเลย์เอาท์ หากคุณทำตามนโยบาย Audience Network ของ Meta