Trang này được dịch bởi Cloud Translation API.

Quảng cáo gốc nâng cao

Hiển thị NativeAd

Khi một quảng cáo gốc tải, SDK quảng cáo trên thiết bị di động của Google sẽ gọi trình xử lý để định dạng quảng cáo tương ứng. Sau đó, ứng dụng sẽ chịu trách nhiệm hiển thị quảng cáo, nhưng không nhất thiết phải làm việc đó ngay lập tức. Để giúp hiển thị các định dạng quảng cáo do hệ thống xác định dễ dàng hơn, SDK sẽ cung cấp một số tài nguyên hữu ích như mô tả bên dưới.

Lớp `NativeAdView`

Đối với định dạng NativeAd, sẽ có lớp NativeAdView tương ứng. Lớp này là một ViewGroup mà nhà xuất bản nên sử dụng làm lớp gốc cho NativeAd. Một NativeAdView sẽ tương ứng với một quảng cáo gốc. Mỗi chế độ xem dùng để hiển thị tài sản của quảng cáo đó (ví dụ: ImageView hiển thị tài sản ảnh chụp màn hình) sẽ là đối tượng con của đối tượng NativeAdView.

Thứ bậc chế độ xem cho một quảng cáo gốc sử dụng LinearLayout để hiển thị các chế độ xem tài sản của quảng cáo có thể có dạng như sau:

<com.google.android.gms.ads.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
    android:orientation="vertical"
    ... >
        <LinearLayout
        android:orientation="horizontal"
        ... >
          <ImageView
           android:id="@+id/ad_app_icon"
           ... />
          <TextView
            android:id="@+id/ad_headline"
            ... />
         </LinearLayout>


         // Other assets such as image or media view, call to action, etc follow.
         ...
    </LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>

Dưới đây là ví dụ sẽ tạo NativeAdView và điền chế độ xem đó bằng NativeAd:

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "<your ad unit ID>")
    .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
        @Override
        public void onNativeAdLoaded(NativeAd nativeAd) {
            // Assumes you have a placeholder FrameLayout in your View layout
            // (with id fl_adplaceholder) where the ad is to be placed.
            FrameLayout frameLayout =
                findViewById(R.id.fl_adplaceholder);
            // Assumes that your ad layout is in a file call native_ad_layout.xml
            // in the res/layout folder
            NativeAdView adView = (NativeAdView) getLayoutInflater()
                .inflate(R.layout.native_ad_layout, null);
            // This method sets the text, images and the native ad, etc into the ad
            // view.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Kotlin

val builder = AdLoader.Builder(this, "<your ad unit ID>")
    .forNativeAd { nativeAd ->
        // Assumes that your ad layout is in a file call native_ad_layout.xml
        // in the res/layout folder
        val adView = layoutInflater
                .inflate(R.layout.native_ad_layout, null) as NativeAdView
        // This method sets the text, images and the native ad, etc into the ad
        // view.
        populateNativeAdView(nativeAd, adView)
        // Assumes you have a placeholder FrameLayout in your View layout
        // (with id ad_frame) where the ad is to be placed.
        ad_frame.removeAllViews()
        ad_frame.addView(adView)
    }

Các lớp chế độ xem quảng cáo cũng cung cấp phương thức dùng để đăng ký chế độ xem được sử dụng cho từng tài sản riêng lẻ và một phương thức để đăng ký chính đối tượng NativeAd. Việc đăng ký các chế độ xem theo cách này cho phép SDK tự động xử lý các công việc như:

Ghi lại các lượt nhấp
Ghi lại các lần hiển thị (khi pixel đầu tiên hiển thị trên màn hình)
Hiển thị lớp phủ Lựa chọn quảng cáo

Lớp phủ Lựa chọn quảng cáo

SDK sẽ thêm lớp phủ Lựa chọn quảng cáo vào từng chế độ xem quảng cáo. Hãy để trống một khoảng ở góc ưa thích của chế độ xem quảng cáo gốc để hệ thống tự động chèn biểu trưng Lựa chọn quảng cáo. Ngoài ra, lớp phủ Lựa chọn quảng cáo phải trông thật dễ nhìn, vì vậy, bạn hãy chọn màu nền và hình ảnh phù hợp. Để biết thêm thông tin về giao diện và chức năng của lớp phủ, hãy xem Nội dung mô tả trường quảng cáo gốc nâng cao.

Thuộc tính quảng cáo

Bạn phải hiển thị một thuộc tính quảng cáo để cho biết rằng chế độ xem đó là quảng cáo. Hãy tìm hiểu thêm trong phần nguyên tắc chính sách của chúng tôi.

Ví dụ về mã

Dưới đây là các bước cần thực hiện để hiển thị quảng cáo gốc:

Tạo một thực thể của lớp NativeAdView.
Đối với mỗi tài sản quảng cáo sẽ hiển thị:
1. Điền vào chế độ xem nội dung bằng nội dung trong đối tượng quảng cáo.
2. Đăng ký chế độ xem tài sản bằng lớp ViewGroup.
Đăng ký MediaView nếu bố cục quảng cáo gốc bao gồm tài sản nghe nhìn có dung lượng lớn.
Đăng ký đối tượng quảng cáo bằng lớp ViewGroup.

Dưới đây là một hàm mẫu sẽ hiển thị NativeAd:

Java

private void displayNativeAd(ViewGroup parent, NativeAd ad) {

    // Inflate a layout and add it to the parent ViewGroup.
    LayoutInflater inflater = (LayoutInflater) parent.getContext()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    NativeAdView adView = (NativeAdView) inflater
            .inflate(R.layout.my_ad_layout, parent);

    // Locate the view that will hold the headline, set its text, and call the
    // NativeAdView's setHeadlineView method to register it.
    TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
    headlineView.setText(ad.getHeadline());
    adView.setHeadlineView(headlineView);

    ...
    // Repeat the above process for the other assets in the NativeAd
    // using additional view objects (Buttons, ImageViews, etc).
    ...

    // If the app is using a MediaView, it should be
    // instantiated and passed to setMediaView. This view is a little different
    // in that the asset is populated automatically, so there's one less step.
    MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
    adView.setMediaView(mediaView);

    // Call the NativeAdView's setNativeAd method to register the
    // NativeAdObject.
    adView.setNativeAd(ad);

    // Ensure that the parent view doesn't already contain an ad view.
    parent.removeAllViews();

    // Place the AdView into the parent.
    parent.addView(adView);
}

Kotlin

fun displayNativeAd(parent: ViewGroup, ad: NativeAd) {

    // Inflate a layout and add it to the parent ViewGroup.
    val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
            as LayoutInflater
    val adView = inflater.inflate(R.layout.my_ad_layout, parent) as NativeAdView

    // Locate the view that will hold the headline, set its text, and use the
    // NativeAdView's headlineView property to register it.
    val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
    headlineView.text = ad.headline
    adView.headlineView = headlineView

    ...
    // Repeat the above process for the other assets in the NativeAd using
    // additional view objects (Buttons, ImageViews, etc).
    ...

    val mediaView = adView.findViewById<MediaView>(R.id.ad_media)
    adView.mediaView = mediaView

    // Call the NativeAdView's setNativeAd method to register the
    // NativeAdObject.
    adView.setNativeAd(ad)

    // Ensure that the parent view doesn't already contain an ad view.
    parent.removeAllViews()

    // Place the AdView into the parent.
    parent.addView(adView)
}

Hãy cùng tìm hiểu từng công việc:

Tăng cường bố cục

Java

LayoutInflater inflater = (LayoutInflater) parent.getContext()
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
NativeAdView adView = (NativeAdView) inflater
        .inflate(R.layout.my_ad_layout, parent);

Kotlin

val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
        as LayoutInflater
val adView = inflater.inflate(R.layout.my_ad_layout, parent) as NativeAdView

Trong ví dụ này, chúng tôi sẽ tăng cường sử dụng bố cục XML có chứa các chế độ xem để hiển thị quảng cáo gốc và sau đó định vị một mục tham chiếu đến NativeAdView. Xin lưu ý rằng bạn cũng có thể sử dụng lại NativeAdView hiện có nếu chế độ xem đó có trong phân đoạn hoặc hoạt động của bạn, hay thậm chí tạo một bản sao động mà không cần sử dụng tệp bố cục.

Điền và đăng ký chế độ xem nội dung

Mã mẫu này sẽ định vị chế độ xem được dùng để hiển thị dòng tiêu đề, đặt văn bản của dòng tiêu đề đó bằng cách sử dụng tài sản chuỗi do đối tượng quảng cáo cung cấp và đăng ký tài sản đó với đối tượng NativeAdView:

Java

TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
headlineView.setText(ad.getHeadline());
adView.setHeadlineView(headlineView);

Kotlin

val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
headlineView.text = ad.headline
adView.headlineView = headlineView

Bạn cần lặp lại quy trình này để xác định vị trí, thiết lập giá trị và đăng ký chế độ xem với lớp chế độ xem quảng cáo cho từng nội dung do đối tượng quảng cáo gốc mà ứng dụng hiển thị cung cấp.

Xử lý lần nhấp

SDK sẽ xử lý số lần nhấp vào nội dung chế độ xem quảng cáo, chỉ cần bạn điền và đăng ký chính xác chế độ xem nội dung như đã thảo luận trong phần trước.

Dưới đây là ví dụ về cách sử dụng trình xử lý quảng cáo để quan sát các sự kiện lần nhấp:

Java

AdLoader adLoader = new AdLoader.Builder(context, "ca-app-pub-3940256099942544/2247696110")
    ...
    .withAdListener(new AdListener() {
        @Override
        public void onAdFailedToLoad(LoadAdError adError) {
            // Handle the failure by logging, altering the UI, and so on.
        }
        @Override
        public void onAdClicked() {
            // Log the click event or other custom behavior.
        }
    })
    .build();

Kotlin

val adLoader = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    ...
    .withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(adError: LoadAdError) {
            // Handle the failure by logging, altering the UI, and so on.
        }
    })
    .build()

Đăng ký MediaView

MediaView là một View đặc biệt được thiết kế để hiển thị tài sản nghe nhìn chính, dù là video hay hình ảnh.

MediaView có thể được xác định trong bố cục XML hoặc được tạo động. Bạn phải đặt chế độ xem này bên trong thứ bậc chế độ xem của NativeAdView, giống như mọi chế độ xem tài sản khác. Các ứng dụng sử dụng MediaView phải đăng ký tài sản này với NativeAdView như sau:

Java

MediaView mediaView = adView.findViewById(R.id.ad_media);
adView.setMediaView(mediaView);

Kotlin

adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)

Tương tự như với tất cả các chế độ xem tài sản khác, bạn phải điền nội dung vào chế độ xem nghe nhìn. Bạn có thể thực hiện việc này bằng cách sử dụng phương thức getMediaContent() để truy xuất nội dung nghe nhìn có thể truyền đến MediaView. Dưới đây là đoạn mã giúp bạn đặt nội dung nghe nhìn cho chế độ xem nội dung nghe nhìn:

Java

mediaView.setMediaContent(nativeAd.getMediaContent());

Kotlin

mediaView.mediaContent = nativeAd.mediaContent

Đặt ImageScaleType

Lớp MediaView có thuộc tính ImageScaleType khi hiển thị hình ảnh. Nếu bạn muốn thay đổi cách chuyển tỉ lệ hình ảnh trong MediaView, hãy đặt ImageView.ScaleType tương ứng bằng cách sử dụng phương thức setImageScaleType() của MediaView.

Ví dụ: để điền vào MediaView khi hiển thị hình ảnh (quảng cáo không có video):

Java

mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);

Kotlin

mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

Mẫu GitHub

Kho lưu trữ GitHub của chúng tôi cung cấp đầy đủ thông tin về cách triển khai Quảng cáo gốc nâng cao được viết bằng cả Java và Kotlin.

Tải ví dụ về quảng cáo gốc nâng cao xuống

Nội dung nghe nhìn

Lớp MediaContent chứa dữ liệu liên quan đến nội dung nghe nhìn của quảng cáo gốc hiển thị bằng cách sử dụng lớp MediaView. Khi bạn đặt thuộc tính MediaView mediaContent bằng một bản sao MediaContent:

Nếu có thành phần video, thì video đó sẽ được lưu vào vùng đệm và bắt đầu phát bên trong MediaView. Bạn có thể biết liệu tài sản video có thể sử dụng hay không bằng cách chọn hasVideoContent().
Nếu quảng cáo không chứa tài sản video, thì tài sản mainImage sẽ được tải xuống và đặt bên trong MediaView.

Đăng ký đối tượng quảng cáo gốc

Bước cuối cùng này sẽ đăng ký đối tượng quảng cáo gốc với chế độ xem chịu trách nhiệm hiển thị đối tượng đó:

Java

adView.setNativeAd(ad);

Kotlin

adView.setNativeAd(ad)

Hủy quảng cáo

Khi hiển thị quảng cáo gốc, bạn nên hủy quảng cáo đó để quảng cáo được thu gom rác đúng cách.

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

Các bước tiếp theo

Tìm hiểu thêm về quyền riêng tư của người dùng.

Quảng cáo gốc nâng cao

Hiển thị NativeAd

Lớp NativeAdView

Java

Kotlin

Lớp phủ Lựa chọn quảng cáo

Thuộc tính quảng cáo

Ví dụ về mã

Java

Kotlin

Tăng cường bố cục

Java

Kotlin

Điền và đăng ký chế độ xem nội dung

Java

Kotlin

Xử lý lần nhấp

Java

Kotlin

Đăng ký MediaView

Java

Kotlin

Java

Kotlin

Đặt ImageScaleType

Java

Kotlin

Mẫu GitHub

Nội dung nghe nhìn

Đăng ký đối tượng quảng cáo gốc

Java

Kotlin

Hủy quảng cáo

Java

Kotlin

Các bước tiếp theo

Lớp `NativeAdView`