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 nghe để có định dạng quảng cáo tương ứng. Sau đó, ứng dụng của bạn sẽ chịu trách nhiệm hiển thị quảng cáo, mặc dù không nhất thiết phải thực hiện 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 một cách 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ó giá trị tương ứng NativeAdView . Lớp này là một ViewGroup mà nhà xuất bản phải sử dụng làm lớp gốc cho NativeAd. Đáp NativeAdView đơn lẻ 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) phải là đối tượng con của đối tượng NativeAdView.

Hệ phân cấp khung hiển thị cho một quảng cáo gốc sử dụng LinearLayout để hiển thị lượt xem nội dung 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>
         <!--Add remaining assets such as the image and media view.-->
    </LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>

Dưới đây là ví dụ sẽ tạo NativeAdView và sẽ điền NativeAd vào đó:

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .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 assets into the ad view.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Kotlin

val builder = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .forNativeAd { nativeAd ->
        // Assumes you have a placeholder FrameLayout in your View layout
        // (with ID fl_adplaceholder) where the ad is to be placed.
        val 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
        val adView = layoutInflater
                .inflate(R.layout.native_ad_layout, null) as NativeAdView
        // This method sets the assets into the ad view.
        populateNativeAdView(nativeAd, adView)
        frameLayout.removeAllViews()
        frameLayout.addView(adView)
    }

Lưu ý rằng tất cả nội dung của một quảng cáo gốc nhất định phải hiển thị bên trong Bố cục NativeAdView. SDK Quảng cáo của Google trên thiết bị di động cố gắng ghi lại một cảnh báo khi thành phần quảng cáo gốc hiển thị bên ngoài bố cục chế độ xem quảng cáo gốc.

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 thành phầ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 chẳng hạn như:

  • Ghi lại lượt nhấp
  • Ghi lại lượt 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 mỗi chế độ xem quảng cáo. Để khoảng trống trong góc ưa thích trong chế độ xem quảng cáo gốc cho biểu trưng Lựa chọn quảng cáo được chèn tự động. 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, 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 Mô tả trường quảng cáo gốc.

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 để biểu thị rằng lượt xem đó là một quảng cáo. Tìm hiểu thêm trong chính sách của chúng tôi nguyên tắc.

Ví dụ về mã

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

  1. Tạo một thực thể của lớp NativeAdView.

  2. Đối với mỗi thành phần quảng cáo sẽ hiển thị:

    1. Điền vào thành phần hiển thị thành phần bằng thành phần trong đối tượng quảng cáo.
    2. Đăng ký chế độ xem tài sản bằng lớp NativeAdView.

  3. Đăng ký MediaView nếu bố cục quảng cáo gốc bao gồm thành phần nội dung nghe nhìn có dung lượng lớn.

  4. Đăng ký đối tượng quảng cáo bằng lớp NativeAdView.

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.ad_layout_file, 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 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.ad_layout_file, 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 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)
}

Sau đây là từng nhiệm vụ:

  1. 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.ad_layout_file, parent);

    Kotlin

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

    Mã này đang tăng cường một bố cục XML có chứa các khung hiển thị để hiển thị một quảng cáo gốc quảng cáo rồi định vị một tham chiếu đến NativeAdView. Xin lưu ý rằng bạn cũng có thể sử dụng lại một NativeAdView hiện có nếu có một thẻ trong mảnh hoặc hoạt động của bạn, hoặc thậm chí có thể tự động tạo một thực thể mà không cần dùng tệp bố cục.

  2. Điền và đăng ký chế độ xem tài sản

    Mã mẫu này sẽ định vị chế độ xem 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 thành phần chuỗi do đối tượng quảng cáo cung cấp và đăng ký thành phầ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

    Quá trình này xác định vị trí, đặt giá trị và đăng ký khung hiển thị bằng bạn nên lặp lại lớp chế độ xem quảng cáo cho từng nội dung do mà ứng dụng sẽ hiển thị.

  3. Xử lý lượt nhấp

    Không triển khai bất kỳ trình xử lý lượt nhấp tuỳ chỉnh nào trên mọi chế độ xem ở trên hoặc trong chế độ xem quảng cáo gốc. SDK sẽ xử lý số lượt nhấp vào tài sản chế độ xem quảng cáo, miễn là bạn điền và đăng ký chính xác chế độ xem tài sản như đã nêu ở mục trước đó.

    Để nghe các lượt nhấp, hãy triển khai lệnh gọi lại lượt nhấp trong SDK quảng cáo của Google trên thiết bị di động:

    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.
        }
        @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.
        }
        override fun onAdClicked() {
            // Log the click event or other custom behavior.
        }
    })
    .build()

  4. Đăng ký MediaView

    Bạn phải sử dụng MediaView thay vì ImageView nếu bạn muốn đưa thành phần hình ảnh chính vào bố cục cho quảng cáo gốc quảng cáo.

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

    MediaView có thể được xác định trong bố cục XML hoặc được tạo động. Nó phải được đặt bên trong hệ phân cấp khung hiển thị của NativeAdView, giống như bất kỳ chế độ xem nội dung khác. Các ứng dụng sử dụng MediaView phải đăng ký tài sản này với NativeAdView:

    Java

     // Populate and register the media asset view.
 nativeAdView.setMediaView(nativeAdBinding.adMedia);

    Kotlin

     // Populate and register the media asset view.
 nativeAdView.mediaView = nativeAdBinding.adMedia

    ImageScaleType

    Lớp MediaView có một 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 setImageScaleType() của MediaView:

    Java

    mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);

    Kotlin

    mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

    MediaContent

    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. Nội dung này được hiển thị bằng cách sử dụng lớp MediaView. Khi Thuộc tính MediaView mediaContent được đặt bằng một thực thể MediaContent:

    • Nếu có nội dung video, 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 quảng cáo có chứa thành phần video hay không bằng cách chọn hasVideoContent().

    • Nếu quảng cáo không chứa thành phần video, thì thành phần mainImage sẽ được tải xuống và đặt bên trong MediaView.

    Theo mặc định, mainImage là thành phần hình ảnh được tải xuống đầu tiên. Nếu sử dụng setReturnUrlsForImageAssets(true), thì mainImage sẽ là null và bạn phải đặt thuộc tính mainImage này cho hình ảnh tải xuống theo cách thủ công. Lưu ý rằng hình ảnh sẽ chỉ được sử dụng khi không có sẵn thành phần video.

  5. Đă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 đang hiển thị quảng cáo.

    Java

    adView.setNativeAd(ad);

    Kotlin

    adView.setNativeAd(ad)

Huỷ quảng cáo

Khi hiển thị xong quảng cáo gốc, bạn nên huỷ bỏ quảng cáo đó để quảng cáo là nơi thu gom rác đúng cách.

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

Ví dụ trên GitHub

Ví dụ về cách triển khai đầy đủ quảng cáo gốc:

Java Kotlin

Các bước tiếp theo

Khám phá các chủ đề sau: