Menambahkan Iklan Banner Native ke Aplikasi Android

Dengan API iklan spanduk native, Anda bisa membuat pengalaman yang disesuaikan untuk menampilkan iklan native tanpa aset materi iklan yang dimiliki oleh pengiklan tersebut, seperti konten gambar, video, atau carousel. Mirip dengan iklan native, Anda akan menerima grup Properti Iklan seperti judul, ikon, dan ajakan bertindak, dan Anda akan menggunakannya untuk membangun tampilan khusus untuk menyajikan iklan. Namun, tidak seperti iklan banner, API iklan banner native menghadirkan pengalaman tata letak native sehingga Anda memiliki kontrol penuh atas penyesuaian tata letak untuk komponen-komponen di dalam iklan.

Dalam panduan ini, kami akan menerapkan penempatan iklan spanduk native berikut. Anda akan membuat iklan spanduk native dengan komponen berikut ini:

Langkah-Langkah Iklan Spanduk Native

Langkah 1: Meminta Iklan Spanduk Native

Langkah 2: Membuat Tata Letak Iklan Spanduk Native Anda

Langkah 3: Mengisi Tata Letak Anda Menggunakan Metadata Iklan

Langkah 1: Meminta Iklan Spanduk Native

Tambahkan kode berikut di bagian atas Aktivitas Anda untuk mengimpor SDK Iklan Facebook:

import com.facebook.ads.*;

Lalu, instansiasikan objek NativeBannerAd, buat AdListener, dan panggil loadAd(...) dalam Aktivitas Anda:

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());
    }
}

Kami akan kembali nanti untuk menambahkan kode ke metode onAdLoaded().

Langkah 2: Membuat Tata Letak Iklan Spanduk Native Anda

Langkah selanjutnya adalah mengekstrak metadata iklan dan menggunakan propertinya untuk membuat UI native Anda yang disesuaikan. Anda dapat membuat tampilan khusus dalam tata letak .xml, atau dapat menambahkan elemen di kode.

Dalam tata letak Aktivitas Anda activity_main.xml, tambahkan kontainer untuk iklan spanduk native Anda. Kontainer itu harus com.facebook.ads.NativeAdLayout yang merupakan wrapper di atas FrameLayout dengan beberapa fungsi ekstra yang memungkinkan kami me-render Alur Pelaporan Iklan native di atas iklan tersebut. Kemudian, dalam metode onAdLoaded(), Anda akan perlu mengisikan tampilan iklan native Anda ke dalam kontainer ini.

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

Buat tata letak khusus native_banner_ad_unit.xml untuk Iklan Spanduk Native Anda:

Di bawah ini adalah contoh tata letak khusus untuk iklan spanduk native Anda:

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

Langkah 3: Mengisi Tata Letak Anda menggunakan Metadata Iklan

Skenario 1: Segera tampilkan iklan setelah berhasil dimuat. Modifikasi metode onAdLoaded() di atas untuk mengambil data properti Native Banner Ad's dan menampilkannya sebagai berikut:

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 akan mencatat tayangan dan menangani klik secara otomatis. Harap diperhatikan bahwa Anda harus mendaftarkan tayangan iklan dengan instance NativeBannerAd untuk mengaktifkan hal tersebut. Untuk membuat elemen iklan Anda dapat diklik, daftarkan menggunakan:

registerViewForInteraction(View view, MediaView adIconView)

Skenario 2: Tampilkan iklan dalam beberapa detik atau menit setelah berhasil dimuat. Anda harus memastikan apakah iklan tersebut masih valid atau tidak sebelum menampilkannya.

Anda sebaiknya mengikuti gagasan di bawah, tetapi jangan menyalin kodenya ke dalam proyek Anda karena ini hanya contoh:

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

Mengontrol Area yang Dapat Diklik

Untuk mengontrol apa yang dapat diklik dengan lebih baik, Anda dapat menggunakan registerViewForInteraction(View view, AdIconView adIconView, List<View> clickableViews) untuk membuat daftar tayangan yang dapat diklik. Contoh: jika Anda hanya ingin membuat judul iklan dan tombol ajakan bertindak yang dapat diklik pada contoh sebelumnya, Anda dapat menulisnya seperti ini:

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

Pada saat Anda menggunakan ulang tayangan untuk menampilkan iklan yang berbeda sepanjang waktu, pastikan untuk memanggil unregisterView() sebelum mendaftarkan tayangan yang sama dengan instance NativeBannerAd yang berbeda.

Jalankan kode dan Anda seharusnya melihat Iklan Spanduk Native:

• Lihat panduan Template Iklan Native untuk menambahkan iklan native di aplikasi Anda.

• Jelajahi contoh kode kami yang menunjukkan cara menggunakan iklan native. NativeBannerAdSample tersedia sebagai bagian dari SDK dan dapat ditemukan di bawah folder AudienceNetwork/samples. Impor proyek ke IDE Anda dan jalankan di perangkat atau emulator.