顯示原生廣告
原生廣告載入時,Google Mobile Ads SDK 會為對應的廣告格式叫用事件監聽器。這樣一來,您的應用程式就會負責顯示廣告。 但不一定要立刻進行顯示 系統定義的廣告格式更加容易,SDK 提供一些實用資源, 。
NativeAdView
類別
如果是 NativeAd
格式,每個標記都會對應到
NativeAdView
類別本課程是
ViewGroup
發布商應將其做為 NativeAd
的根層級。A 罩杯
單一 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>
<!--Add remaining assets such as the image and media view.-->
</LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>
以下範例說明如何建立 NativeAdView
會填入 NativeAd
:
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)
}
請注意,特定原生廣告的所有素材資源都應在 NativeAdView
版面配置中顯示。當原生素材資源在原生廣告視圖版面配置外顯示時,Google Mobile Ads SDK 會嘗試記錄警告。
廣告檢視類別也提供方法來註冊
每個資產,另一個則用來註冊 NativeAd
物件。
以這種方式註冊檢視畫面,可讓 SDK 自動處理工作
例如:
- 正在記錄點擊
- 在第一個像素顯示在畫面上時記錄曝光
- 顯示 AdChoices 重疊廣告
AdChoices 重疊廣告
SDK 會在每個廣告檢視畫面中加入 AdChoices 重疊廣告。在原生廣告檢視畫面的偏好角落保留空間,以便自動插入 AdChoices 標誌。此外, AdChoices 重疊廣告必須清楚顯眼,所以請選擇背景顏色 和圖片。如要進一步瞭解疊加層的外觀和 函式,請參閱原生廣告欄位 說明。
廣告標示
您必須顯示廣告標示,指出觀看次數是廣告。如要進一步瞭解相關政策,請參閱政策指南。
程式碼範例
顯示原生廣告的步驟如下:
- 建立
NativeAdView
類別的例項。 針對每項要顯示的廣告素材資源:
- 在素材資源檢視畫面中填入廣告物件中的素材資源。
- 使用
NativeAdView
類別註冊素材資源檢視畫面。
如果原生廣告版面配置包含大型媒體素材資源,請註冊
MediaView
。使用
NativeAdView
類別註冊廣告物件。
以下是顯示 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)
}
以下是個別工作:
加載版面配置
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
,您也可以重複使用該NativeAdView
,甚至不使用版面配置檔案,也可以動態建立例項。填入並註冊資產檢視畫面
此程式碼範例會找出用於顯示標題的檢視區塊,並設定文字 使用廣告物件提供的字串素材資源,並向
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 就會處理對廣告檢視畫面素材資源的點擊。
如要接收點擊事件,請實作 Google Mobile Ads 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. } @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()
註冊 MediaView
您必須使用
MediaView
而非ImageView
如要在原生廣告版面配置中加入主要圖片素材資源,則會傳回素材資源 廣告。MediaView
是專門用於顯示主要媒體素材資源 (影片或圖片) 的特殊View
。MediaView
可在 XML 版面配置中定義,也可以動態建構。這項服務 應置於NativeAdView
的檢視區塊階層中,就像任何 其他資產檢視畫面使用「MediaView
」的應用程式必須向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
MediaView
類別在顯示圖片時具有ImageScaleType
屬性。如要變更MediaView
中的圖片縮放方式,請設定 使用setImageScaleType()
對應的ImageView.ScaleType
MediaView
方法:Java
mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
Kotlin
mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
MediaContent
MediaContent
類別會保留與原生廣告媒體內容相關的資料,並使用MediaView
類別顯示。當MediaView
mediaContent
屬性設為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()
GitHub 上的範例
完整的原生廣告實作範例:
後續步驟
請參閱下列主題: