原生進階

顯示 NativeAd

原生廣告載入時,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>


         // 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 Mobile Ads SDK 會嘗試記錄警告。

廣告檢視類別也提供方法來註冊 每個資產,另一個則用來註冊 NativeAd 物件。 以這種方式註冊檢視畫面,SDK 可自動處理工作 例如:

  • 正在記錄點擊
  • 在畫面上顯示第一個像素時,記錄曝光
  • 顯示 AdChoices 重疊廣告 原生候補廣告 廣告素材—目前僅適用於部分發布商

AdChoices 重疊元素

SDK 會在系統放送候補廣告時,將 AdChoices 重疊廣告新增為廣告檢視畫面 。如果您的應用程式使用原生廣告候補廣告,請保留偏好的空間 角落 自動插入的 AdChoices 標誌。此外, AdChoices 重疊廣告必須清楚顯示,因此請選擇「背景」 色彩和圖片。如要進一步瞭解疊加層的 請參閱程式輔助原生廣告導入做法 指南

程式輔助原生廣告的廣告歸因

顯示程式輔助原生廣告時,您必須顯示廣告標示,以表示該視圖是廣告。進一步瞭解我們的政策 指南

程式碼範例

顯示原生廣告的步驟如下:

  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 (如果片段或活動中有現有的片段) 甚至可在不使用版面配置檔案的情況下動態建立執行個體

  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, "/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()
    
  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 中的圖片縮放方式,請設定 使用 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)mainImagenull,您必須 將 mainImage 屬性設為手動下載的圖片。請注意,此 只有在沒有可用的影片素材資源時,系統才會使用圖片。

  5. 註冊原生廣告物件

    在最後一個步驟中,系統會以 負責展示:

    Java

    adView.setNativeAd(ad);
    

    Kotlin

    adView.setNativeAd(ad)
    

刪除廣告

停止顯示原生廣告後,請務必將其銷毀,以便系統正確進行垃圾收集。

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

測試原生廣告程式碼

直接銷售廣告

如果您想測試直接銷售的原生廣告效果 使用這個 Ad Manager 廣告單元 ID:

/21775744923/example/native

設定為放送範例應用程式安裝、內容廣告,以及 自訂原生廣告格式,並加入下列素材資源:

  • 標題 (文字)
  • Main 圖片 (圖片)
  • 說明文字 (文字)

自訂原生廣告格式的範本 ID 為 10063170

原生候補廣告

Ad Exchange 候補廣告目前僅開放給部分發布商使用。如要測試原生候補廣告的行為,請使用這個 Ad Manager 廣告單元:

/21775744923/example/native-backfill

該發布商放送了範例應用程式安裝廣告,以及包含 AdChoices 的內容廣告 重疊。

請記得更新程式碼,以參照實際的廣告單元和範本 ID 再發布廣告素材

GitHub 上的範例

原生廣告導入完成範例:

Java Kotlin

後續步驟

請參閱下列主題: