原生高级广告

展示 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 的引用。请注意,您也可以 重复使用现有的 NativeAdView(如果 fragment 或 activity 中有它),或者 您甚至可以在不使用布局文件的情况下动态创建实例。

  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
    

    ImageScaleType

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

    Java

    mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
    

    Kotlin

    mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
    

    MediaContent

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

Kotlin

nativeAd.destroy()

GitHub 上的示例

原生广告完整植入示例:

Java Kotlin

后续步骤

请浏览以下主题: