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

API Quảng cáo tự nhiên hỗ trợ bạn tạo trải nghiệm tùy chỉnh cho quảng cáo mà bạn hiển thị trong ứng dụng. Khi sử dụng API Quảng cáo tự nhiên, thay vì nhận được quảng cáo sẵn sàng hiển thị, bạn sẽ nhận được nhóm thuộc tính quảng cáo chẳng hạn như tiêu đề, hình ảnh, nút kêu gọi hành động và bạn sẽ phải dùng các thuộc tính đó để tạo chế độ xem tùy chỉnh giúp hiển thị 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 tự nhiên sau đây. Bạn sẽ tạo quảng cáo tự nhiên với các thành phần sau đây:

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

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

Bước 2: Tạo bố cục quảng cáo 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 4: Sử dụng MediaView

Bước 5: Tải quảng cáo mà không tự động lưu vào bộ nhớ đệm

Bước 1: Yêu cầu quảng cáo 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 NativeAd, tạo NativeAdListener và gọi loadAd() bằng trình nghe quảng cáo:

private final String TAG = "NativeAdActivity".getClass().getSimpleName();
private NativeAd nativeAd;

private void loadNativeAd() {
    // Instantiate a NativeAd 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).
    nativeAd = new NativeAd(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!");
        }
    };

    // Request an ad
    nativeAd.loadAd(
            nativeAd.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 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 Native Ad. 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.

<?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"
    android:gravity="center_horizontal"
    android:paddingTop="50dp">
    ...
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="50dp">

        <com.facebook.ads.NativeAdLayout
             android:id="@+id/native_ad_container"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:orientation="vertical" />
     </ScrollView>
    ...
</RelativeLayout>

Tạo file native_ad_layout.xml bố cục tùy chỉnh cho quảng cáo tự nhiên:

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ad_unit"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical"
    android:paddingLeft="10dp"
    android:paddingRight="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingTop="10dp">

        <com.facebook.ads.MediaView
            android:id="@+id/native_ad_icon"
            android:layout_width="35dp"
            android:layout_height="35dp" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="5dp"
            android:paddingRight="5dp">

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

        <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" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/ad_choices_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:orientation="horizontal" />

    </LinearLayout>

    <com.facebook.ads.MediaView
        android:id="@+id/native_ad_media"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center" />

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

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:orientation="vertical">

            <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:textColor="@android:color/darker_gray"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/native_ad_body"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:gravity="center_vertical"
                android:lines="2"
                android:textColor="@android:color/black"
                android:textSize="12sp" />

        </LinearLayout>

        <Button
            android:id="@+id/native_ad_call_to_action"
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:background="#4286F4"
            android:paddingLeft="3dp"
            android:paddingRight="3dp"
            android:textColor="@android:color/white"
            android:textSize="12sp"
            android:visibility="gone" />

    </LinearLayout>

</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 Ad's và hiển thị như sau:

private NativeAdLayout nativeAdLayout;
private LinearLayout adView;
private NativeAd nativeAd;

private void loadNativeAd() {
    // Instantiate a NativeAd 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).
    nativeAd = new NativeAd(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 (nativeAd == null || nativeAd != ad) {
                return;
            }
            // Inflate Native Ad into Container
            inflateAd(nativeAd);
        }
        ...
    };

    // Request an ad
    nativeAd.loadAd(
            nativeAd.buildLoadAdConfig()
                    .withAdListener(nativeAdListener)
                    .build());
}

private void inflateAd(NativeAd nativeAd) {

    nativeAd.unregisterView();

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

    // Add the AdOptionsView
    LinearLayout adChoicesContainer = findViewById(R.id.ad_choices_container);
    AdOptionsView adOptionsView = new AdOptionsView(NativeAdActivity.this, nativeAd, nativeAdLayout);
    adChoicesContainer.removeAllViews();
    adChoicesContainer.addView(adOptionsView, 0);

    // Create native UI using the ad metadata.
    MediaView nativeAdIcon = adView.findViewById(R.id.native_ad_icon);
    TextView nativeAdTitle = adView.findViewById(R.id.native_ad_title);
    MediaView nativeAdMedia = adView.findViewById(R.id.native_ad_media);
    TextView nativeAdSocialContext = adView.findViewById(R.id.native_ad_social_context);
    TextView nativeAdBody = adView.findViewById(R.id.native_ad_body);
    TextView sponsoredLabel = adView.findViewById(R.id.native_ad_sponsored_label);
    Button nativeAdCallToAction = adView.findViewById(R.id.native_ad_call_to_action);

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

    // Create a list of clickable views
    List<View> clickableViews = new ArrayList<>();
    clickableViews.add(nativeAdTitle);
    clickableViews.add(nativeAdCallToAction);

    // Register the Title and CTA button to listen for clicks.
    nativeAd.registerViewForInteraction(
            adView, nativeAdMedia, nativeAdIcon, 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 NativeAd để bật chế độ xem đó. Để tất cả các thành phần quảng cáo của chế độ xem có thể nhấp được, hãy đăng ký bằng:

registerViewForInteraction(View view, MediaView adMediaView, MediaView adIconView)

Khi bạn sử dụng registerViewForInteraction với NativeAds, SDK sẽ kiểm tra để đảm bảo lệnh gọi đang chạy trên Luồng chính nhằm tránh tình huống tương tranh. Chúng tôi thực hiện kiểm tra bằng Preconditions.checkIsOnMainThread(). Hãy đảm bảo việc triển khai của bạn phù hợp với tiêu chuẩn này vì ứng dụng sẽ xảy ra lỗi nếu bạn cố gọi registerViewForInteraction từ một Luồng trong nền.

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ụ:

private NativeAd nativeAd;

private void loadNativeAd() {
    // Instantiate a NativeAd 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).
    nativeAd = new NativeAd(this, "YOUR_PLACEMENT_ID");

    NativeAdListener nativeAdListener = new NativeAdListener() {
        ...
    };

    // Request an ad
    nativeAd.loadAd(
            nativeAd.buildLoadAdConfig()
                    .withAdListener(nativeAdListener)
                    .build());

    // Here is just an example for displaying the ad with delay
    // Please call this method at appropriate timing in your project
    showNativeAdWithDelay();
}

private void showNativeAdWithDelay() {
    /**
     * 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 nativeAd has been loaded successfully
            if(nativeAd == null || !nativeAd.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(nativeAd.isAdInvalidated()) {
                return;
            }
            inflateAd(nativeAd); // Inflate NativeAd into a container, same as in previous code examples
        }
    }, 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ể dùng registerViewForInteraction(View view, MediaView adMediaView, 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úng tôi 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) {
    ...
    // Create a list of clickable views
    List<View> clickableViews = new ArrayList<>();
    clickableViews.add(nativeAdTitle);
    clickableViews.add(nativeAdCallToAction);

    // Register the Title and CTA button to listen for clicks.
    nativeAd.registerViewForInteraction(
            adView, nativeAdMedia, nativeAdIcon, 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 NativeAd.

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

Bước 4: Sử dụng MediaView

Để hiển thị ảnh bìa của quảng cáo tự nhiên, bạn buộc phải sử dụng MediaView của Meta Audience Network, trong đó hiển thị được cả tài sản hình ảnh và video. Bạn có thể xem lại nguyên tắc thiết kế dành cho đơn vị quảng cáo video tự nhiên tại đây.

Theo mặc định, tài sản hình ảnh và video đều được lưu trước vào bộ nhớ đệm khi tải quảng cáo tự nhiên, giúp MediaView phát video ngay sau khi nativeAd tải xong.

private void loadNativeAd() {
    ...
    nativeAd.loadAd();
}

Ngoài ra, bạn có thể chỉ định rõ NativeAd.MediaCacheFlag.ALL khi tải quảng cáo tự nhiên.

private void loadNativeAd() {
    ...
    nativeAd.loadAd(
            nativeAd.buildLoadAdConfig()
                    .withMediaCacheFlag(NativeAdBase.MediaCacheFlag.ALL)
                    .build());
}

Audience Network hỗ trợ 2 tùy chọn lưu vào bộ nhớ đệm trong quảng cáo tự nhiên như đã xác định trong giá trị liệt kê NativeAd.MediaCacheFlag:

Bước 5: Tải quảng cáo mà không tự động lưu vào bộ nhớ đệm

• Bạn nên bật tính năng lưu file phương tiện vào bộ nhớ đệm theo mặc định trong tất cả các trường hợp. Tuy nhiên, bạn có thể ghi đè giá trị mặc định này bằng cách sử dụng MediaCacheFlag.NONE trong phương thức loadAd. Hãy hết sức thận trọng nếu bạn quyết định ghi đè tùy chọn lưu file phương tiện vào bộ nhớ đệm mặc định của chúng tôi.

private final String TAG = NativeAdActivity.class.getSimpleName();
private NativeAd nativeAd;

private void loadNativeAd() {
    // Instantiate a NativeAd 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).
    nativeAd = new NativeAd(this, "YOUR_PLACEMENT_ID");
    NativeAdListener nativeAdListener = new NativeAdListener() {
        ...
    };

    // Request an ad without auto cache
    nativeAd.loadAd(
            nativeAd.buildLoadAdConfig()
                    .withAdListener(nativeAdListener)
                    .withMediaCacheFlag(NativeAdBase.MediaCacheFlag.NONE)
                    .build());
}

• Sau khi gọi thành công onAdLoaded trên quảng cáo, bạn có thể tự mình gọi phương thức downloadMedia để bắt đầu tải xuống tất cả file phương tiện cho quảng cáo tự nhiên khi thích hợp.

@Override
public void onAdLoaded(Ad ad) {
    if (nativeAd == null || nativeAd != ad) {
        return;
    }

    nativeAd.downloadMedia();
}

• Cuối cùng, bạn có thể gọi phương thức registerViewForInteraction và hiển thị quảng cáo khi tải xong file phương tiện trong lệnh gọi lại onMediaDownloaded.

@Override
public void onMediaDownloaded(Ad ad) {
    if (nativeAd == null || nativeAd != ad) {
        return;
    }

    inflateAd(nativeAd); // Inflate NativeAd into a container, same as in previous code examples
}

Nếu đã tải quảng cáo mà không tự động lưu vào bộ nhớ đệm và không gọi downloadMedia theo cách thủ công để bắt đầu tải xuống, bạn chỉ có thể bắt đầu tải file phương tiện xuống khi gọi registerViewForInteraction. Cần tải và hiển thị tất cả file phương tiện để có lượt hiển thị đủ điều kiệ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. NativeAdSample đượ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.