原生高级广告

显示 NativeAd

加载原生广告时,Google 移动广告 SDK 会为相应的广告格式调用监听器。然后,就由您的应用负责展示广告,尽管不一定要立即展示。为了更轻松地展示系统定义的广告格式,SDK 提供了一些实用资源,如下所述。

NativeAdView

对于 NativeAd 格式,有对应的 NativeAdView 类。该类是一个 ViewGroup,发布商应将其用作 NativeAd 的根。一个 NativeAdView 对应于单个原生广告。用于展示该广告素材资源的每个视图(例如,展示屏幕截图素材资源的 ImageView)应该是 NativeAdView 对象的子项。

对于使用 LinearLayout 来展示素材资源视图的原生广告,其视图层次结构可能如下所示:

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

以下示例演示了如何创建 NativeAdView 并使用 NativeAd 填充该视图:

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "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, "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)
    }

请注意,指定原生广告的所有素材资源都应在 NativeAdView 布局中呈现。当原生广告素材资源在原生广告视图布局外呈现时,Google 移动广告 SDK 会尝试记录警告。

广告视图类还提供了用于注册各个素材资源所用视图的方法,以及一个用于注册 NativeAd 对象本身的方法。以这种方式注册视图可让 SDK 自动处理如下任务:

  • 记录点击次数
  • 录制第一个像素在屏幕上可见时的展示次数

“广告选择”叠加层

SDK 会为每个广告视图添加“广告选择”叠加层。在原生广告视图的首选角上留出空间,以便自动插入广告选择徽标。此外,广告选择叠加层一定要显眼易见,因此请选择适当的背景颜色和图片。如需详细了解叠加层的外观和功能,请参阅原生广告字段说明

广告标示

您必须展示广告标示,以表明该视图是广告。如需了解详情,请参阅我们的政策指南

代码示例

展示原生广告的步骤如下:

  1. 创建 NativeAdView 类的实例。
  2. 对于要展示的每项广告素材资源:
    1. 使用广告对象中的素材资源填充素材资源视图。
    2. ViewGroup 类注册素材资源视图。
  3. 如果您的原生广告布局包含大型媒体素材资源,请注册 MediaView
  4. ViewGroup 类注册该广告对象。

以下是一个展示 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 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.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 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)
}

以下是各个任务:

  1. 膨胀布局

    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
    

    此代码会膨胀一个 XML 布局,该布局中包含用于显示原生广告的视图,然后找到对 NativeAdView 的引用。请注意,如果您的 fragment 或 activity 中有一个现有的 NativeAdView,您也可以重复使用它,您甚至可以在不使用布局文件的情况下动态创建一个实例。

  2. 填充和注册素材资源视图

    此示例代码可找到用于显示标题的视图,使用广告对象提供的字符串素材资源设置文本,并使用 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
    

    对于应用要展示的原生广告对象所提供的每种素材资源,都应为其重复上述操作,即定位视图、设置值并向广告视图类注册视图。

  3. 处理点击

    请勿在原生广告视图之上或之内的任何视图上实现任何自定义点击处理程序。如需自行观察点击事件,请使用广告监听器

    如上一部分所述,只要您正确填充和注册素材资源视图,SDK 就会处理广告视图素材资源获得的点击。

    以下是一个使用广告监听器观察点击事件的示例:

    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()
    
  4. 注册 MediaView

    如果要在原生广告的布局中包含主要图片素材资源,则必须使用 MediaView 素材资源(而不是 ImageView 素材资源)。

    MediaView 是一个特殊的 View,旨在显示主媒体素材资源,即视频或图片。

    MediaView 可以在 XML 布局中定义,也可以动态构建。就像所有其他素材资源视图一样,应该将其放置在 NativeAdView 的视图层次结构中。使用 MediaView 的应用必须在 NativeAdView 中注册该应用:

    Java

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

    Kotlin

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

    与所有素材资源视图一样,媒体视图也需要填充其内容。为此,请使用 getMediaContent() 方法检索可传递到 MediaView媒体内容。以下代码段可设置媒体视图的媒体内容:

    Java

    mediaView.setMediaContent(nativeAd.getMediaContent());
    

    Kotlin

    mediaView.mediaContent = nativeAd.mediaContent
    

    图片缩放类型

    MediaView 类在显示图片时具有 ImageScaleType 属性。如果您想在 MediaView 中更改图片的缩放方式,请使用 MediaViewsetImageScaleType() 方法设置相应的 ImageView.ScaleType

    Java

    mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
    

    Kotlin

    mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
    

    媒体内容

    MediaContent 类包含与原生广告的媒体内容相关的数据,媒体内容则通过 MediaView 类来展示。使用 MediaContent 实例设置 MediaView mediaContent 属性时:

    • 如果有视频素材资源可用,系统会对其进行缓冲,并开始在 MediaView 中播放。您可以通过检查 hasVideoContent() 判断视频素材资源是否可用。

    • 如果广告不包含视频素材资源,则系统会改为下载 mainImage 素材资源,并将其放置在 MediaView 中。

    默认情况下,mainImage 是下载的第一个图片素材资源。如果使用了 setReturnUrlsForImageAssets(true),则 mainImagenull,并且您必须将 mainImage 属性设置为手动下载的图片。请注意,只有在没有视频素材资源可用时,系统才会使用此图片。

  5. 注册原生广告对象

    最后一步是为负责显示原生广告的视图注册相应的原生广告对象:

    Java

    adView.setNativeAd(ad);
    

    Kotlin

    adView.setNativeAd(ad)
    

销毁广告

当完成展示原生广告后,您应将其销毁,以便系统能对此广告进行适当的垃圾回收。

Java

nativeAd.destroy();
        .inflate(R.layout.ad_layout_file, parent);

Kotlin

nativeAd.destroy()

GitHub 上的示例

原生广告的完整植入示例:

Java Kotlin

后续步骤

请浏览以下主题: