本機高級

透過集合功能整理內容 你可以依據偏好儲存及分類內容。

展示原生廣告

加載原生廣告時,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填充它的示例:

爪哇

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

科特林

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

廣告視圖類還提供用於註冊用於每個單獨資產的視圖的方法,以及用於註冊NativeAd對象本身的方法。以這種方式註冊視圖允許 SDK 自動處理以下任務:

  • 記錄點擊
  • 記錄印象(當第一個像素在屏幕上可見時)
  • 顯示原生補餘廣告素材的 AdChoices 疊加層

AdChoices 疊加層

SDK 會在每個廣告視圖中添加一個 AdChoices 疊加層。在您的原生廣告視圖的首選角落為自動插入的 AdChoices 徽標留出空間。此外,讓 AdChoices 疊加層易於查看也很重要,因此請適當選擇背景顏色和圖像。有關疊加層外觀和功能的更多信息,請參閱原​​生廣告高級字段說明

廣告歸因

您必須顯示廣告屬性以表明該視圖是廣告。在我們的政策指南中了解更多信息。

代碼示例

以下是展示原生廣告的步驟:

  1. 創建NativeAdView類的實例。
  2. 對於要顯示的每個廣告資源:
    1. 使用廣告對像中的資產填充資產視圖。
    2. 使用ViewGroup類註冊資產視圖。
  3. 如果您的原生廣告佈局包含大型媒體資源,請註冊MediaView
  4. 使用ViewGroup類註冊廣告對象。

這是一個顯示NativeAd的示例函數:

爪哇

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.my_ad_layout, 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);
}

科特林

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.my_ad_layout, 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)
}

讓我們看一下各個任務:

膨脹佈局

爪哇

LayoutInflater inflater = (LayoutInflater) parent.getContext()
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
NativeAdView adView = (NativeAdView) inflater
        .inflate(R.layout.my_ad_layout, parent);

科特林

val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
        as LayoutInflater
val adView = inflater.inflate(R.layout.my_ad_layout, parent) as NativeAdView

在此示例中,我們正在擴展一個 XML 佈局,其中包含用於顯示原生廣告的視圖,然後定位對NativeAdView的引用。請注意,如果您的片段或活動中有一個現有的NativeAdView ,您也可以重用,甚至可以在不使用佈局文件的情況下動態創建實例。

填充和註冊資產視圖

此示例代碼定位用於顯示標題的視圖,使用廣告對象提供的字符串資源設置其文本,並將其註冊到NativeAdView對象:

爪哇

TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
headlineView.setText(ad.getHeadline());
adView.setHeadlineView(headlineView);

科特林

val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
headlineView.text = ad.headline
adView.headlineView = headlineView

對於應用程序將顯示的原生廣告對象提供的每個資產,應重複此定位視圖、設置其值並將其註冊到廣告視圖類的過程。

點擊處理

只要您正確填充和註冊資產視圖,SDK 就會處理廣告視圖資產的點擊,如上一節所述。

下面是一個使用廣告偵聽器來觀察點擊事件的示例:

爪哇

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

科特林

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

註冊 MediaView

MediaView是一種特殊的View ,旨在顯示主要媒體資產,視頻或圖像。

MediaView可以在 XML 佈局中定義或動態構建。它應該放置在NativeAdView的視圖層次結構中,就像任何其他資產視圖一樣。使用MediaView的應用程序必須將其註冊到NativeAdView ,如下所示:

爪哇

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

科特林

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

與所有資產視圖一樣,媒體視圖需要填充其內容。這是使用getMediaContent()方法來檢索可以傳遞給MediaView媒體內容來完成的。這是為媒體視圖設置媒體內容的代碼片段:

爪哇

mediaView.setMediaContent(nativeAd.getMediaContent());

科特林

mediaView.mediaContent = nativeAd.mediaContent

設置 ImageScaleType

MediaView類在顯示圖像時具有ImageScaleType屬性。如果要更改圖像在MediaView中的縮放方式,請使用MediaViewsetImageScaleType()方法設置相應的ImageView.ScaleType

例如,要在顯示圖像時填充MediaView (廣告沒有視頻):

爪哇

mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);

科特林

mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

GitHub 示例

我們的 GitHub 存儲庫包含用 Java 和 Kotlin 編寫的原生高級廣告 的完整實現。

下載原生高級示例

媒體內容

MediaContent類保存與原生廣告的媒體內容相關的數據,使用MediaView類顯示。當使用MediaContent實例設置MediaView mediaContent屬性時:

  • 如果視頻資產可用,它會被緩衝並開始在MediaView內播放。您可以通過檢查hasVideoContent()來判斷視頻資產是否可用。
  • 如果廣告不包含視頻資產,則會下載mainImage資產並將其放置在MediaView中。

註冊原生廣告對象

最後一步將原生廣告對象註冊到負責顯示它的視圖中:

爪哇

adView.setNativeAd(ad);

科特林

adView.setNativeAd(ad)

銷毀廣告

當您展示完您的原生廣告後,您應該將其銷毀,以便正確收集廣告。

爪哇

nativeAd.destroy();

科特林

nativeAd.destroy()