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

Отображение NativeAd

Когда загружается нативная реклама, Google Mobile Ads SDK вызывает слушателя для соответствующего формата рекламы. Затем ваше приложение отвечает за отображение рекламы, хотя оно не обязательно должно делать это немедленно. Чтобы упростить отображение системных форматов рекламы, SDK предлагает несколько полезных ресурсов, как описано ниже.

Определите класс NativeAdView

Определите класс NativeAdView . Этот класс является классом ViewGroup и контейнером верхнего уровня для класса NativeAdView . Каждое представление нативной рекламы содержит активы нативной рекламы, такие как элемент представления MediaView или элемент представления Title , который должен быть дочерним объектом объекта NativeAdView .

XML-макет

Добавьте XML NativeAdView в свой проект:

<com.google.android.libraries.ads.mobile.sdk.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.libraries.ads.mobile.sdk.nativead.NativeAdView>

Составить реактивный ранец

Включите модуль JetpackComposeDemo/compose-util , который включает помощников для создания NativeAdView и его ресурсов.

Используя модуль compose-util , создайте NativeAdView :

  import com.google.android.gms.compose_util.NativeAdAttribution
  import com.google.android.gms.compose_util.NativeAdView

  @Composable
  /** Display a native ad with a user defined template. */
  fun DisplayNativeAdView(nativeAd: NativeAd) {
      NativeAdView {
          // Display the ad attribution.
          NativeAdAttribution(text = context.getString("Ad"))
          // Add remaining assets such as the image and media view.
        }
    }

Обрабатывать загруженный нативный aad

При загрузке нативной рекламы обработайте событие обратного вызова, разверните представление нативной рекламы и добавьте его в иерархию представлений:

Котлин

// Build an ad request with native ad options to customize the ad.
val adTypes = listOf(NativeAd.NativeAdType.NATIVE)
val adRequest = NativeAdRequest
  .Builder("/21775744923/example/native", adTypes)
  .build()

val adCallback =
  object : NativeAdLoaderCallback {
    override fun onNativeAdLoaded(nativeAd: NativeAd) {
      activity?.runOnUiThread {

        val nativeAdBinding = NativeAdBinding.inflate(layoutInflater)
        val adView = nativeAdBinding.root
        val frameLayout = myActivityLayout.nativeAdPlaceholder

        // Populate and register the native ad asset views.
        displayNativeAd(nativeAd, nativeAdBinding)

        // Remove all old ad views and add the new native ad
        // view to the view hierarchy.
        frameLayout.removeAllViews()
        frameLayout.addView(adView)
      }
    }
  }

// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback)

Ява

// Build an ad request with native ad options to customize the ad.
List<NativeAd.NativeAdType> adTypes = Arrays.asList(NativeAd.NativeAdType.NATIVE);
NativeAdRequest adRequest = new NativeAdRequest
                                .Builder("/21775744923/example/native", adTypes)
                                .build();

NativeAdLoaderCallback adCallback = new NativeAdLoaderCallback() {
    @Override
    public void onNativeAdLoaded(NativeAd nativeAd) {
      if (getActivity() != null) {
        getActivity()
          .runOnUiThread(() -> {
            // Inflate the native ad view and add it to the view hierarchy.
            NativeAdBinding nativeAdBinding = NativeAdBinding.inflate(getLayoutInflater());
            NativeAdView adView = (NativeAdView) nativeAdBinding.getRoot();
            FrameLayout frameLayout = myActivityLayout.nativeAdPlaceholder;

            // Populate and register the native ad asset views.
            displayNativeAd(nativeAd, nativeAdBinding);

            // Remove all old ad views and add the new native ad
            // view to the view hierarchy.
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        });
      }
    }
};

// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback);

Обратите внимание, что все активы для данного нативного объявления должны отображаться внутри макета NativeAdView . Google Mobile Ads SDK пытается регистрировать предупреждение, когда нативные активы отображаются вне макета представления нативного объявления.

Классы представления рекламы также предоставляют методы, используемые для регистрации представления, используемого для каждого отдельного актива, и один для регистрации самого объекта NativeAd . Регистрация представлений таким образом позволяет SDK автоматически обрабатывать такие задачи, как:

  • Запись щелчков
  • Регистрация впечатлений, когда на экране виден первый пиксель
  • Отображение наложения AdChoices для собственных заполняющих креативов — в настоящее время доступно только избранной группе издателей

Наложение AdChoices

Наложение AdChoices добавляется в качестве рекламного представления SDK при возврате объявления с обратной засыпкой. Если ваше приложение использует нативную засыпку, оставьте место в предпочитаемом вами углу нативного рекламного представления для автоматически вставленного логотипа AdChoices. Кроме того, важно, чтобы наложение AdChoices было видно, поэтому выбирайте фоновые цвета и изображения соответствующим образом. Для получения дополнительной информации о внешнем виде и функциях наложения обратитесь к руководству по внедрению программных нативных объявлений .

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

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

Пример кода

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

  1. Создайте экземпляр класса NativeAdView .
  2. Для каждого отображаемого рекламного актива:

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

Вот пример функции, которая отображает NativeAd :

Котлин

private fun displayNativeAd(nativeAd: NativeAd, nativeAdBinding : NativeAdBinding) {
  // Set the native ad view elements.
  val nativeAdView = nativeAdBinding.root
  nativeAdView.advertiserView = nativeAdBinding.adAdvertiser
  nativeAdView.bodyView = nativeAdBinding.adBody
  nativeAdView.callToActionView = nativeAdBinding.adCallToAction
  nativeAdView.headlineView = nativeAdBinding.adHeadline
  nativeAdView.iconView = nativeAdBinding.adAppIcon
  nativeAdView.priceView = nativeAdBinding.adPrice
  nativeAdView.starRatingView = nativeAdBinding.adStars
  nativeAdView.storeView = nativeAdBinding.adStore

  // Set the view element with the native ad assets.
  nativeAdBinding.adAdvertiser.text = nativeAd.advertiser
  nativeAdBinding.adBody.text = nativeAd.body
  nativeAdBinding.adCallToAction.text = nativeAd.callToAction
  nativeAdBinding.adHeadline.text = nativeAd.headline
  nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.icon?.drawable)
  nativeAdBinding.adPrice.text = nativeAd.price
  nativeAd.starRating?.toFloat().let { value ->
    nativeAdBinding.adStars.rating = value
  }
  nativeAdBinding.adStore.text = nativeAd.store

  // Hide views for assets that don't have data.
  nativeAdBinding.adAdvertiser.visibility = getAssetViewVisibility(nativeAd.advertiser)
  nativeAdBinding.adBody.visibility = getAssetViewVisibility(nativeAd.body)
  nativeAdBinding.adCallToAction.visibility = getAssetViewVisibility(nativeAd.callToAction)
  nativeAdBinding.adHeadline.visibility = getAssetViewVisibility(nativeAd.headline)
  nativeAdBinding.adAppIcon.visibility = getAssetViewVisibility(nativeAd.icon)
  nativeAdBinding.adPrice.visibility = getAssetViewVisibility(nativeAd.price)
  nativeAdBinding.adStars.visibility = getAssetViewVisibility(nativeAd.starRating)
  nativeAdBinding.adStore.visibility = getAssetViewVisibility(nativeAd.store)

  // Inform the Google Mobile Ads SDK that you have finished populating
  // the native ad views with this native ad.
  nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia)
}

/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return [View.VISIBLE] if the asset is not null, [View.INVISIBLE] otherwise.
*/
private fun getAssetViewVisibility(asset: Any?): Int {
  return if (asset == null) View.INVISIBLE else View.VISIBLE
}

Ява

private void displayNativeAd(ad: NativeAd, nativeAdBinding : NativeAdBinding) {
  // Set the native ad view elements.
  NativeAdView nativeAdView = nativeAdBinding.getRoot();
  nativeAdView.setAdvertiserView(nativeAdBinding.adAdvertiser);
  nativeAdView.setBodyView(nativeAdBinding.adBody);
  nativeAdView.setCallToActionView(nativeAdBinding.adCallToAction);
  nativeAdView.setHeadlineView(nativeAdBinding.adHeadline);
  nativeAdView.setIconView(nativeAdBinding.adAppIcon);
  nativeAdView.setPriceView(nativeAdBinding.adPrice);
  nativeAdView.setStarRatingView(nativeAdBinding.adStars);
  nativeAdView.setStoreView(nativeAdBinding.adStore);

  // Set the view element with the native ad assets.
  nativeAdBinding.adAdvertiser.setText(nativeAd.getAdvertiser());
  nativeAdBinding.adBody.setText(nativeAd.getBody());
  nativeAdBinding.adCallToAction.setText(nativeAd.getCallToAction());
  nativeAdBinding.adHeadline.setText(nativeAd.getHeadline());
  if (nativeAd.getIcon() != null) {
      nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.getIcon().getDrawable());
  }
  nativeAdBinding.adPrice.setText(nativeAd.getPrice());
  if (nativeAd.getStarRating() != null) {
      nativeAdBinding.adStars.setRating(nativeAd.getStarRating().floatValue());
  }
  nativeAdBinding.adStore.setText(nativeAd.getStore());

  // Hide views for assets that don't have data.
  nativeAdBinding.adAdvertiser.setVisibility(getAssetViewVisibility(nativeAd.getAdvertiser()));
  nativeAdBinding.adBody.setVisibility(getAssetViewVisibility(nativeAd.getBody()));
  nativeAdBinding.adCallToAction.setVisibility(getAssetViewVisibility(nativeAd.getCallToAction()));
  nativeAdBinding.adHeadline.setVisibility(getAssetViewVisibility(nativeAd.getHeadline()));
  nativeAdBinding.adAppIcon.setVisibility(getAssetViewVisibility(nativeAd.getIcon()));
  nativeAdBinding.adPrice.setVisibility(getAssetViewVisibility(nativeAd.getPrice()));
  nativeAdBinding.adStars.setVisibility(getAssetViewVisibility(nativeAd.getStarRating()));
  nativeAdBinding.adStore.setVisibility(getAssetViewVisibility(nativeAd.getStore()));

  // Inform the Google Mobile Ads SDK that you have finished populating
  // the native ad views with this native ad.
  nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia);
}

/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return {@link View#VISIBLE} if the asset is not null, {@link View#INVISIBLE} otherwise.
*/
private int getAssetViewVisibility(Object asset) {
    return (asset == null) ? View.INVISIBLE : View.VISIBLE;
}

Вот отдельные задания:

  1. Раздуть макет

    Котлин

     // Remove all old ad views when loading a new native ad.
     binding.nativeViewContainer.removeAllViews()
    
     // Inflate the native ad view and add it to the view hierarchy.
     val nativeAdBinding = NativeAdBinding.inflate(layoutInflater)
     binding.nativeViewContainer.addView(nativeAdBinding.root)
    

    Ява

     // Remove all old ad views when loading a new native ad.
     binding.nativeViewContainer.removeAllViews();
    
     // Inflate the native ad view and add it to the view hierarchy.
     NativeAdBinding nativeAdBinding = NativeAdBinding.inflate(getLayoutInflater());
     binding.nativeViewContainer.addView(nativeAdBinding.getRoot());
    

    Этот код расширяет XML-макет, содержащий представления для отображения нативной рекламы, а затем находит ссылку на NativeAdView . Обратите внимание, что вы также можете повторно использовать существующий NativeAdView , если он есть в вашем фрагменте или активности, или даже создать экземпляр динамически, не используя файл макета.

  2. Заполните и зарегистрируйте представления активов

    В этом примере кода определяется представление, используемое для отображения заголовка, задается его текст с использованием строкового актива, предоставленного объектом объявления, и регистрируется с помощью объекта NativeAdView :

    Котлин

     nativeAdView.headlineView = nativeAdBinding.adHeadline
     nativeAdBinding.adHeadline.text = nativeAd.headline
     nativeAdBinding.adHeadline.visibility = getAssetViewVisibility(nativeAd.headline)
    

    Ява

     nativeAdView.setHeadlineView(nativeAdBinding.adHeadline);
     nativeAdBinding.adHeadline.setText(nativeAd.getHeadline());
     nativeAdBinding.adHeadline.setVisibility(getAssetViewVisibility(nativeAd.getHeadline()));
    

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

  3. Обработка щелчков

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

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

    Котлин

     private fun setEventCallback(nativeAd: NativeAd) {
       nativeAd.adEventCallback =
         object : NativeAdEventCallback {
           override fun onAdClicked() {
             Log.d(Constant.TAG, "Native ad recorded a click.")
           }
         }
     }
    

    Ява

     private void setEventCallback(NativeAd nativeAd) {
       nativeAd.setAdEventCallback(new NativeAdEventCallback() {
           @Override
           public void onAdClicked() {
             Log.d(Constant.TAG, "Native ad recorded a click.");
           }
       });
     }
    
  4. Зарегистрируйте MediaView

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

    Котлин

    // Get the media asset view.
    val mediaView = nativeAdBinding.adMedia
    

    Ява

    // Get the media asset view.
    MediaView mediaView = nativeAdBinding.adMedia;
    

    ImageScaleType

    Класс MediaView имеет свойство ImageScaleType при отображении изображений. Если вы хотите изменить способ масштабирования изображения в MediaView , установите соответствующий ImageView.ScaleType с помощью метода setImageScaleType() MediaView :

    Котлин

    nativeAdViewBinding.mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
    

    Ява

    nativeAdViewBinding.mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
    

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

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

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

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

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

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

    На этом последнем этапе объект нативной рекламы регистрируется в представлении, отвечающем за его отображение, а также в представлении для актива медиаконтента.

    Котлин

     // Inform the Google Mobile Ads SDK that you have finished populating
     // the native ad views with this native ad and media content asset.
     nativeAdView.registerNativeAd(nativeAd, mediaView)
    

    Ява

     // Inform the Google Mobile Ads SDK that you have finished populating
     // the native ad views with this native ad and media content asset.
     nativeAdView.registerNativeAd(nativeAd, mediaView);
    

Уничтожить рекламу

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

Котлин

nativeAd.destroy()

Ява

nativeAd.destroy();

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

Прямая продажа рекламы

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

/21775744923/example/native

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

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

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

Нативная засыпная реклама

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

/21775744923/example/native-backfill

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

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

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

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

Пример

Загрузите и запустите пример приложения , демонстрирующий использование Next Gen Google Mobile Ads SDK.