展示 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 会将“广告选择”叠加层添加为广告视图 返回。如果您的应用使用原生补余广告,请预留出首选 角 自动插入“广告选择”徽标的原生广告视图。此外, “广告选择”叠加层一定要显眼易见,因此请选择背景 颜色和图像。如需详细了解叠加层的外观和功能,请参阅程序化原生广告植入指南。
程序化原生广告的广告标示
在展示程序化原生广告时,您必须展示广告标示 指明该视图是一个通告。请参阅我们的政策指南了解详情。
代码示例
以下是展示原生广告的步骤:
- 创建
NativeAdView
类的实例。 - 对于要展示的每个广告素材资源:
- 使用广告对象中的素材资源填充素材资源视图。
- 向
ViewGroup
类注册该素材资源视图。
- 如果您的原生广告布局包含大型媒体素材资源,请注册
MediaView
。 - 向
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)
}
各项任务如下:
膨胀布局
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 中有它),或者 您甚至可以在不使用布局文件的情况下动态创建实例。填充并注册素材资源视图
以下示例代码可找到用于显示标题的视图,并设置其文本 使用广告对象提供的字符串资源,并将它注册到
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
查找视图、设置视图值并向 应针对 展示原生广告对象
处理点击
在原生广告视图之上或内部的任何视图上,请勿实现任何自定义点击处理程序。如需自行观察点击事件,请使用广告监听器。
只要您正确处理广告视图素材资源获得的点击,SDK 就会处理 填充和注册素材资源视图,如上一部分所述。
以下是一个使用广告 监听器来观察 点击事件:
Java
AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/example/native") ... .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, "/21775744923/example/native") ... .withAdListener(object : AdListener() { override fun onAdFailedToLoad(adError: LoadAdError) { // Handle the failure by logging, altering the UI, and so on. } }) .build()
注册 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
中更改图片的缩放方式,请使用MediaView
的setImageScaleType()
方法设置相应的ImageView.ScaleType
: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)
,mainImage
为null
,且您必须 将mainImage
属性设置为您手动下载的图片。请注意, 图片。注册原生广告对象
这是最后一步,也就是向负责显示原生广告对象的视图注册该对象:
Java
adView.setNativeAd(ad);
Kotlin
adView.setNativeAd(ad)
销毁广告
在您的原生广告展示完毕后,您应该将其销毁, 正确进行垃圾回收
Java
nativeAd.destroy();
Kotlin
nativeAd.destroy()
测试原生广告代码
直销广告
如果您想测试直销原生广告的呈现效果 使用此 Ad Manager 广告单元 ID:
/21775744923/example/native
它已配置为投放示例应用安装广告和内容广告,以及 包含以下素材资源的自定义原生广告格式:
- 标题(文字)
- 主图(图片)
- 图片说明(文字)
自定义原生广告格式的模板 ID 为 10063170
。
原生补余广告
Ad Exchange 补余广告目前仅面向部分发布商提供。接收者 测试原生补余广告的行为,请使用此 Ad Manager 广告单元:
/21775744923/example/native-backfill
它投放包含广告选择叠加层的示例应用安装广告和内容广告。
在实际投放前,请务必更新代码,使其引用您的实际广告单元 ID 和模板 ID。
GitHub 上的示例
原生广告示例的完整实现:
后续步骤
请浏览以下主题: