Родной расширенный

Показать нативную рекламу

Когда нативное объявление загружается, Google Mobile Ads 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, "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, "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

Оверлей AdChoices добавляется к каждому просмотру рекламы с помощью SDK. Оставьте место в предпочитаемом вами углу нативной рекламы для автоматически вставляемого логотипа 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.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);
}

Котлин

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. Раздуть макет

    Джава

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

    Котлин

    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 :

    Джава

    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

    Этот процесс поиска представления, установки его значения и регистрации его в классе представления рекламы следует повторять для каждого из активов, предоставляемых собственным рекламным объектом, который будет отображаться в приложении.

  3. Обрабатывать клики

    Не применяйте настраиваемые обработчики кликов для любых представлений поверх или внутри представления нативной рекламы. Чтобы самостоятельно наблюдать за кликами, используйте прослушиватель объявлений .

    Щелчки по активам просмотра рекламы обрабатываются 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()

  4. Зарегистрируйте MediaView

    Вам необходимо использовать ресурс MediaView вместо ресурса ImageView , если вы хотите включить основной ресурс изображения в макет нативной рекламы.

    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 , установите соответствующий ImageView.ScaleType с помощью метода setImageScaleType() MediaView :

    Джава

    mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);

    Котлин

    mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

    МедиаКонтент

    Класс MediaContent содержит данные, относящиеся к мультимедийному содержанию нативной рекламы, которая отображается с помощью класса MediaView . Когда свойство MediaView mediaContent установлено с экземпляром MediaContent :

    • Если видеоресурс доступен, он помещается в буфер и начинает воспроизводиться внутри MediaView . Вы можете узнать, доступен ли видеоресурс, проверив hasVideoContent() .

    • Если объявление не содержит видеоресурс, вместо него загружается ресурс mainImage и помещается в MediaView .

    По умолчанию mainImage является первым загружаемым ресурсом изображения. Если используется setReturnUrlsForImageAssets(true) , mainImage имеет значение null , и вы должны установить для свойства mainImage загруженное вручную изображение. Обратите внимание, что это изображение будет использоваться только при отсутствии доступных видеоматериалов.

  5. Зарегистрируйте нативный рекламный объект

    Этот последний шаг регистрирует собственный рекламный объект в представлении, которое отвечает за его отображение:

    Джава

    adView.setNativeAd(ad);

    Котлин

    adView.setNativeAd(ad)

Уничтожить объявление

Когда вы закончите показывать нативную рекламу, вы должны уничтожить ее, чтобы реклама была должным образом собрана из мусора.

Джава

nativeAd.destroy();
        .inflate(R.layout.ad_layout_file, parent);

Котлин

nativeAd.destroy()

Примеры на GitHub

Пример полной реализации нативной рекламы:

Ява Котлин

Следующие шаги

Изучите следующие темы: