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

Отображение нативной рекламы

Когда загружается нативное объявление, 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>
         <!--Add remaining assets such as the image and media view.-->
    </LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>

Вот пример создания NativeAdView и заполнения его NativeAd :

Ява

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

Котлин

val builder = AdLoader.Builder(this, "/21775744923/example/native")
    .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 было видно, поэтому выбирайте соответствующие цвета фона и изображения. Дополнительную информацию о внешнем виде и функциях наложения см. в рекомендациях по внедрению программных нативных объявлений .

Атрибуция рекламы для программных нативных объявлений

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

Пример кода

Вот шаги для показа нативной рекламы:

  1. Создайте экземпляр класса NativeAdView .
  2. Для каждого рекламного объекта, который будет отображаться:

    1. Заполните представление актива активом в объекте объявления.
    2. Зарегистрируйте представление актива с помощью класса NativeAdView .
  3. Зарегистрируйте MediaView если ваш собственный макет объявления включает в себя большой медиаресурс.

  4. Зарегистрируйте объект объявления в классе NativeAdView .

Вот пример функции, которая отображает 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 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 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, если вы правильно заполняете и регистрируете представления ресурсов, как описано в предыдущем разделе.

    Чтобы отслеживать клики, внедрите обратный вызов кликов Google Mobile Ads SDK:

    Ява

    AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/example/native")
        // ...
        .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();
    

    Котлин

    val adLoader = AdLoader.Builder(this, "/21775744923/example/native")
        // ...
        .withAdListener(object : AdListener() {
            override fun onAdFailedToLoad(adError: LoadAdError) {
                // Handle the failure.
            }
            override fun onAdClicked() {
                // Log the click event or other custom behavior.
            }
        })
        .build()
    
  4. Зарегистрируйте МедиаВью

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

    MediaView — это специальный View предназначенный для отображения основного медиа-ресурса, видео или изображения.

    MediaView можно определить в макете XML или создать динамически. Его следует разместить в иерархии представлений NativeAdView , как и любое другое представление ресурса. Приложения, использующие MediaView должны зарегистрировать его в NativeAdView :

    Ява

     // Populate and register the media asset view.
     nativeAdView.setMediaView(nativeAdBinding.adMedia);
    

    Котлин

     // Populate and register the media asset view.
     nativeAdView.mediaView = nativeAdBinding.adMedia
    

    Тип масштаба изображения

    Класс 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();

Котлин

nativeAd.destroy()

Тестирование нативного рекламного кода

Реклама с прямой продажей

Если вы хотите протестировать, что представляют собой нативные объявления с прямой продажей, вы можете использовать этот идентификатор рекламного блока Менеджера рекламы:

/21775744923/example/native

Он настроен для показа образцов объявлений, ориентированных на установку приложения, и контент-объявлений, а также специального формата нативной рекламы со следующими объектами:

  • Заголовок (текст)
  • Главное изображение (изображение)
  • Подпись (текст)

Идентификатор шаблона для формата пользовательского нативного объявления – 10063170 .

Нативные объявления для заполнения

Заполнение Ad Exchange доступно только избранной группе издателей. Чтобы протестировать поведение нативных объявлений-заполнителей, используйте этот рекламный блок Менеджера рекламы:

/21775744923/example/native-backfill

Он показывает примеры объявлений, устанавливающих приложения, и контентных объявлений, включающих наложение AdChoices.

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

Примеры на GitHub

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

Java Котлин

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

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