เพิ่มโฆษณาแบนเนอร์แบบเนทีฟในแอพ Android

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

ในคู่มือนี้ เราจะนำตำแหน่งการจัดวางโฆษณาแบนเนอร์แบบเนทีฟต่อไปนี้ไปใช้ คุณจะต้องสร้างโฆษณาแบนเนอร์แบบเนทีฟด้วยองค์ประกอบต่อไปนี้

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

ขั้นตอนที่ 1: การส่งคำขอโฆษณาแบนเนอร์แบบเนทีฟ

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

ขั้นตอนที่ 3: การป้อนข้อมูลในเลย์เอาท์โดยใช้เมตาดาต้าของโฆษณา

ขั้นตอนที่ 1: การส่งคำขอโฆษณาแบนเนอร์แบบเนทีฟ

เพิ่มโค้ดต่อไปนี้ไว้ที่ด้านบนสุดของกิจกรรมเพื่อนำเข้า SDK โฆษณาบน Facebook:

import com.facebook.ads.*;

จากนั้น สร้างอินสแตนซ์ของอ็อบเจ็กต์ NativeBannerAd, สร้าง AdListener และเรียก loadAd(...) ในกิจกรรมของคุณ:

public class NativeBannerAdActivity extends Activity {

    private final String TAG = NativeBannerAdActivity.class.getSimpleName();
    private NativeBannerAd nativeBannerAd;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Instantiate a NativeBannerAd object. 
        // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
        // now, while you are testing and replace it later when you have signed up.
        // While you are using this temporary code you will only get test ads and if you release
        // your code like this to the Google Play your users will not receive ads (you will get a no fill error).
        nativeBannerAd = new NativeBannerAd(this, "YOUR_PLACEMENT_ID");
        NativeAdListener nativeAdListener = new NativeAdListener() {

            @Override
            public void onMediaDownloaded(Ad ad) {
                // Native ad finished downloading all assets
                Log.e(TAG, "Native ad finished downloading all assets.");
            }

            @Override
            public void onError(Ad ad, AdError adError) {
                // Native ad failed to load
                Log.e(TAG, "Native ad failed to load: " + adError.getErrorMessage());
            }

            @Override
            public void onAdLoaded(Ad ad) {
                // Native ad is loaded and ready to be displayed
                Log.d(TAG, "Native ad is loaded and ready to be displayed!");
            }

            @Override
            public void onAdClicked(Ad ad) {
                // Native ad clicked
                Log.d(TAG, "Native ad clicked!");
            }

            @Override
            public void onLoggingImpression(Ad ad) {
                // Native ad impression
                Log.d(TAG, "Native ad impression logged!");
            }
        });
        // load the ad
        nativeBannerAd.loadAd(
                nativeBannerAd.buildLoadAdConfig()
                        .withAdListener(nativeAdListener)
                        .build());
    }
}

เราจะกลับมาเพิ่มโค้ดในเมธอด onAdLoaded() ในภายหลัง

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

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

ในเลย์เอาท์กิจกรรม activity_main.xml ให้เพิ่มคอนเทนเนอร์สำหรับโฆษณาแบนเนอร์แบบเนทีฟของคุณ คอนเทนเนอร์ควรเป็น com.facebook.ads.NativeAdLayout ซึ่งเป็น Wrapper ที่ด้านบนสุดของ FrameLayout โดยมีฟังก์ชั่นการทำงานเพิ่มเติมที่ช่วยให้เราแสดงขั้นตอนการรายงานโฆษณาแบบเนทีฟที่ด้านบนสุดของโฆษณาได้ คุณจะต้องป้อนมุมมองโฆษณาแบบเนทีฟของคุณลงในคอนเทนเนอร์นี้ในเมธอด onAdLoaded() ในภายหลัง

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    ...
    <com.facebook.ads.NativeAdLayout
        android:id="@+id/native_banner_ad_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" />
    ...
</RelativeLayout>

สร้างเลย์เอาท์แบบกำหนดเอง native_banner_ad_unit.xml สำหรับโฆษณาแบนเนอร์แบบเนทีฟของคุณ

ด้านล่างนี้คือตัวอย่างเลย์เอาท์แบบกำหนดเองสำหรับโฆษณาแบนเนอร์แบบเนทีฟของคุณ:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RelativeLayout
            android:id="@+id/ad_choices_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="2dp" />

        <TextView
            android:id="@+id/native_ad_sponsored_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:ellipsize="end"
            android:lines="1"
            android:padding="2dp"
            android:textColor="@android:color/darker_gray"
            android:textSize="12sp" />
    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white">

        <com.facebook.ads.MediaView
            android:id="@+id/native_icon_view"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:gravity="center" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:orientation="vertical"
            android:paddingLeft="53dp"
            android:paddingRight="83dp">

            <TextView
                android:id="@+id/native_ad_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:textColor="@android:color/black"
                android:textSize="15sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/native_ad_social_context"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:textSize="12sp" />
        </LinearLayout>

        <Button
            android:id="@+id/native_ad_call_to_action"
            android:layout_width="80dp"
            android:layout_height="50dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:background="#4286F4"
            android:gravity="center"
            android:paddingLeft="3dp"
            android:paddingRight="3dp"
            android:textColor="@android:color/white"
            android:textSize="12sp"
            android:visibility="gone" />

    </RelativeLayout>
</LinearLayout>

ขั้นตอนที่ 3: การป้อนข้อมูลในเลย์เอาท์โดยใช้เมตาดาต้าของโฆษณา

สถานการณ์ที่ 1: แสดงโฆษณาโดยทันทีที่โหลดโฆษณาสำเร็จ แก้ไขเมธอด onAdLoaded() ข้างต้นเพื่อเรียกใช้คุณสมบัติ Native Banner Ad's และแสดงดังต่อไปนี้

public class NativeBannerAdActivity extends Activity {

    private NativeAdLayout nativeAdLayout;
    private LinearLayout adView;
    private NativeBannerAd nativeBannerAd;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Instantiate a NativeBannerAd object. 
        // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
        // now, while you are testing and replace it later when you have signed up.
        // While you are using this temporary code you will only get test ads and if you release
        // your code like this to the Google Play your users will not receive ads (you will get a no fill error).
        nativeBannerAd = new NativeBannerAd(this, "YOUR_PLACEMENT_ID");
        NativeAdListener nativeAdListener = new NativeAdListener() {
            ...
            @Override
            public void onAdLoaded(Ad ad) {
                // Race condition, load() called again before last ad was displayed
                if (nativeBannerAd == null || nativeBannerAd != ad) {
                    return;
                 }
                // Inflate Native Banner Ad into Container
                inflateAd(nativeBannerAd);
            }
            ...
        });
        // load the ad
        nativeBannerAd.loadAd(
                nativeBannerAd.buildLoadAdConfig()
                        .withAdListener(nativeAdListener)
                        .build());
    }

    private void inflateAd(NativeBannerAd nativeBannerAd) {
        // Unregister last ad
        nativeBannerAd.unregisterView();

        // Add the Ad view into the ad container.
        nativeAdLayout = findViewById(R.id.native_banner_ad_container);
        LayoutInflater inflater = LayoutInflater.from(NativeBannerAdActivity.this);
        // Inflate the Ad view.  The layout referenced is the one you created in the last step.
        adView = (LinearLayout) inflater.inflate(R.layout.native_banner_ad_layout, nativeAdLayout, false);
        nativeAdLayout.addView(adView);

        // Add the AdChoices icon
        RelativeLayout adChoicesContainer = adView.findViewById(R.id.ad_choices_container);
        AdOptionsView adOptionsView = new AdOptionsView(NativeBannerAdActivity.this, nativeBannerAd, nativeAdLayout);
        adChoicesContainer.removeAllViews();
        adChoicesContainer.addView(adOptionsView, 0);

        // Create native UI using the ad metadata.
        TextView nativeAdTitle = adView.findViewById(R.id.native_ad_title);
        TextView nativeAdSocialContext = adView.findViewById(R.id.native_ad_social_context);
        TextView sponsoredLabel = adView.findViewById(R.id.native_ad_sponsored_label);
        MediaView nativeAdIconView = adView.findViewById(R.id.native_icon_view);
        Button nativeAdCallToAction = adView.findViewById(R.id.native_ad_call_to_action);

        // Set the Text.
        nativeAdCallToAction.setText(nativeBannerAd.getAdCallToAction());
        nativeAdCallToAction.setVisibility(
                nativeBannerAd.hasCallToAction() ? View.VISIBLE : View.INVISIBLE);
        nativeAdTitle.setText(nativeBannerAd.getAdvertiserName());
        nativeAdSocialContext.setText(nativeBannerAd.getAdSocialContext());
        sponsoredLabel.setText(nativeBannerAd.getSponsoredTranslation());

        // Register the Title and CTA button to listen for clicks.
        List<View> clickableViews = new ArrayList<>();
        clickableViews.add(nativeAdTitle);
        clickableViews.add(nativeAdCallToAction);
        nativeBannerAd.registerViewForInteraction(adView, nativeAdIconView, clickableViews);
    }
}

SDK จะบันทึกอิมเพรสชั่นและจัดการการคลิกโดยอัตโนมัติ โปรดทราบว่า คุณต้องลงทะเบียนมุมมองของโฆษณาด้วยอินสแตนซ์ NativeBannerAd เพื่อเปิดใช้งาน เพื่อให้องค์ประกอบโฆษณาของคุณสามารถคลิกได้ ให้ลงทะเบียนโดยใช้:

registerViewForInteraction(View view, MediaView adIconView)

สถานการณ์ที่ 2: แสดงโฆษณาภายในไม่กี่วินาทีหรือไม่กี่นาทีหลังจากที่โหลดสำเร็จ คุณควรตรวจสอบว่าโฆษณาเป็นโมฆะหรือไม่ก่อนที่จะแสดง

คุณควรปฏิบัติตามแนวคิดด้านล่าง แต่โปรดอย่าคัดลอกโค้ดใส่ลงในโปรเจ็กต์เนื่องจากเป็นเพียงตัวอย่าง:

public class NativeBannerAdActivity extends Activity {

    private NativeBannerAd nativeBannerAd;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Instantiate a NativeBannerAd object. 
        // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
        // now, while you are testing and replace it later when you have signed up.
        // While you are using this temporary code you will only get test ads and if you release
        // your code like this to the Google Play your users will not receive ads (you will get a no fill error).
        nativeBannerAd = new NativeBannerAd(this, "YOUR_PLACEMENT_ID");
         NativeAdListener nativeAdListener = new NativeAdListener() {
            ...
        });
        // load the ad
        nativeBannerAd.loadAd(
                nativeBannerAd.buildLoadAdConfig()
                        .withAdListener(nativeAdListener)
                        .build());
    }

    private void showAdWithDelay() {
       /**
        * Here is an example for displaying the ad with delay;
        * Please do not copy the Handler into your project
       */
       // Handler handler = new Handler();
       handler.postDelayed(new Runnable() {
           public void run() {
             // Check if nativeBannerAd has been loaded successfully
               if(nativeBannerAd == null || !nativeBannerAd.isAdLoaded()) {
                   return;
               }
             // Check if ad is already expired or invalidated, and do not show ad if that is the case. You will not get paid to show an invalidated ad.
               if(nativeBannerAd.isAdInvalidated()) {
                   return;
               }
               inflateAd(nativeBannerAd); // Inflate Native Banner Ad into Container same as in previous code example
           }
       }, 1000 * 60 * 15); // Show the ad after 15 minutes
    }
}

การควบคุมพื้นที่ที่สามารถคลิกได้

เพื่อให้สามารถควบคุมรายการที่สามารถคลิกได้ดียิ่งขึ้น คุณสามารถใช้ registerViewForInteraction(View view, MediaView adIconView, List<View> clickableViews) เพื่อลงทะเบียนรายการมุมมองที่สามารถคลิกได้ ตัวอย่างเช่น หากคุณต้องการทำให้ชื่อโฆษณาและปุ่มกระตุ้นให้ดำเนินการเท่านั้นที่สามารถคลิกได้ในตัวอย่างก่อนหน้านี้ คุณสามารถเขียนในลักษณะนี้ได้:

@Override
public void onAdLoaded(Ad ad) {
  ...
  List<View> clickableViews = new ArrayList<>();
  clickableViews.add(nativeAdTitle);
  clickableViews.add(nativeAdCallToAction);
  nativeBannerAd.registerViewForInteraction(mAdView, nativeAdIconView, clickableViews);
  ...
}

ในกรณีที่คุณนำมุมมองมาใช้ซ้ำเพื่อแสดงโฆษณาอื่นๆ เมื่อเวลาผ่านไป โปรดตรวจสอบให้แน่ใจว่ามีการเรียก unregisterView() ก่อนการลงทะเบียนมุมมองเดียวกันที่มีอินสแตนซ์ NativeBannerAd ที่แตกต่างกัน

เรียกใช้โค้ดแล้วคุณควรจะเห็นโฆษณาแบนเนอร์แบบเนทีฟ:

• โปรดดูคู่มือเทมเพลตโฆษณาแบบเนทีฟเพื่อเพิ่มโฆษณาแบบเนทีฟในแอพของคุณ

• ลองดูตัวอย่างโค้ดของเราซึ่งสาธิตวิธีการใช้โฆษณาแบบเนทีฟ NativeBannerAdSample พร้อมใช้งานโดยเป็นส่วนหนึ่งของ SDK และสามารถหาได้ในโฟลเดอร์ AudienceNetwork/samples นำเข้าโปรเจ็กต์ไปยัง IDE ของคุณ และเรียกใช้บนอุปกรณ์หรือบนตัวจำลองแบบ