Thêm quảng cáo biểu ngữ tự nhiên vào ứng dụng Android

Với API quảng cáo biểu ngữ tự nhiên, bạn có thể tạo trải nghiệm tùy chỉnh để hiển thị quảng cáo tự nhiên mà không cần tài sản nội dung của nhà quảng cáo, chẳng hạn như hình ảnh, video hoặc nội dung quay vòng. Tương tự như quảng cáo tự nhiên, bạn sẽ nhận được một nhóm Thuộc tính quảng cáo, chẳng hạn như tiêu đề, biểu tượng và lời kêu gọi hành động. Bạn sẽ dùng nhóm thuộc tính này để xây dựng chế độ xem tùy chỉnh giúp hiển thị quảng cáo. Tuy nhiên, khác với quảng cáo biểu ngữ, API quảng cáo biểu ngữ tự nhiên cung cấp trải nghiệm bố cục tự nhiên để bạn có toàn quyền kiểm soát cách tùy chỉnh bố cục cho các thành phần bên trong quảng cáo.

Trong hướng dẫn này, chúng tôi sẽ triển khai vị trí quảng cáo biểu ngữ tự nhiên sau đây. Bạn sẽ tạo quảng cáo biểu ngữ tự nhiên với các thành phần sau đây:

Các bước tạo quảng cáo biểu ngữ tự nhiên

Bước 1: Yêu cầu quảng cáo biểu ngữ tự nhiên

Bước 2: Tạo bố cục quảng cáo biểu ngữ tự nhiên

Bước 3: Điền vào bố cục của bạn bằng siêu dữ liệu của quảng cáo

Bước 1: Yêu cầu quảng cáo biểu ngữ tự nhiên

Thêm mã sau vào đầu phần Hoạt động của bạn để nhập Facebook Ads SDK:

import com.facebook.ads.*;

Sau đó, thực thể hóa đối tượng NativeBannerAd, tạo AdListener và gọi loadAd(...) trong Hoạt động của bạn:

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

Chúng ta sẽ quay lại sau để thêm mã vào phương thức onAdLoaded().

Bước 2: Tạo bố cục quảng cáo biểu ngữ tự nhiên

Bước tiếp theo là trích xuất siêu dữ liệu quảng cáo và sử dụng thuộc tính của quảng cáo để tạo giao diện người dùng tự nhiên tùy chỉnh. Bạn cũng có thể tạo chế độ xem tùy chỉnh trong file .xml bố cục hoặc thêm các thành phần trong mã.

Trong file activity_main.xml bố cục của Hoạt động, hãy thêm một vùng chứa cho quảng cáo biểu ngữ tự nhiên. Vùng chứa này phải là com.facebook.ads.NativeAdLayout. Đây là trình bao bọc ở đầu FrameLayout với một số chức năng bổ sung cho phép chúng tôi hiển thị Quy trình báo cáo quảng cáo tự nhiên ở đầu quảng cáo. Sau đó, trong phương thức onAdLoaded(), bạn cần điền chế độ xem quảng cáo tự nhiên vào vùng chứa này.

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

Tạo file native_banner_ad_unit.xml bố cục tùy chỉnh cho Quảng cáo biểu ngữ tự nhiên:

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

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

Bước 3: Điền vào bố cục của bạn bằng siêu dữ liệu của quảng cáo

Tình huống 1: Hiển thị ngay quảng cáo sau khi tải thành công. Sửa đổi phương thức onAdLoaded() ở trên để truy xuất thuộc tính Native Banner Ad's và hiển thị như sau:

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 sẽ tự động ghi lại lượt hiển thị và xử lý lượt click. Lưu ý rằng bạn phải đăng ký chế độ xem quảng cáo có phiên bản NativeBannerAd để bật chế độ xem đó. Để các thành phần của quảng cáo có thể nhấp được, hãy đăng ký bằng:

registerViewForInteraction(View view, MediaView adIconView)

Tình huống 2: Hiển thị quảng cáo trong vài giây hoặc vài phút sau khi tải thành công. Bạn nên kiểm tra xem quảng cáo có bị vô hiệu hóa hay không trước khi hiển thị quảng cáo đó.

Bạn nên làm theo ý tưởng bên dưới, tuy nhiên, vui lòng không sao chép mã vào dự án của bạn vì đây chỉ là mã ví dụ:

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

Kiểm soát khu vực có thể nhấp

Để kiểm soát khu vực có thể nhấp hiệu quả hơn, bạn có thể sử dụng registerViewForInteraction(View view, MediaView adIconView, List<View> clickableViews) để đăng ký danh sách chế độ xem có thể nhấp. Chẳng hạn như ở ví dụ trước, nếu chỉ muốn cho phép nhấp vào tiêu đề quảng cáo và nút kêu gọi hành động, bạn có thể viết như sau:

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

Trong trường hợp bạn sử dụng lại chế độ xem để hiển thị các quảng cáo khác nhau theo thời gian, hãy nhớ gọi unregisterView() trước khi đăng ký cùng một chế độ xem nhưng khác phiên bản NativeBannerAd.

Chạy mã này và bạn sẽ nhìn thấy Quảng cáo biểu ngữ tự nhiên:

• Hãy xem hướng dẫn về Mẫu quảng cáo tự nhiên để thêm quảng cáo tự nhiên vào ứng dụng của bạn.

• Khám phá các mã mẫu mà chúng tôi dùng để minh họa cách sử dụng quảng cáo tự nhiên. NativeBannerAdSample được cung cấp trong SDK và có thể tìm thấy trong thư mục AudienceNetwork/samples. Nhập dự án vào IDE và chạy dự án trên thiết bị hoặc trình mô phỏng.