Показать нативную рекламу
Когда нативное объявление загружается, 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 был хорошо виден, поэтому правильно выбирайте цвета фона и изображения. Дополнительные сведения о внешнем виде и функциях оверлея см. в разделе Описания полей нативных объявлений .
Атрибуция рекламы
Вы должны отобразить атрибуцию рекламы, чтобы обозначить, что просмотр является рекламой. Узнайте больше в наших правилах политики .
Пример кода
Вот шаги для отображения нативной рекламы:
- Создайте экземпляр класса
NativeAdView
. - Для каждого отображаемого объекта рекламы:
- Заполните представление актива активом в объекте объявления.
- Зарегистрируйте представление актива с помощью класса
ViewGroup
.
- Зарегистрируйте
MediaView
, если ваш нативный рекламный макет включает большой медиаресурс. - Зарегистрируйте объект объявления в классе
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)
}
Вот индивидуальные задания:
Раздуть макет
Джава
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
если он есть в вашем фрагменте или действии, или даже создать экземпляр динамически без использования файла макета.Заполните и зарегистрируйте представления активов
Этот пример кода находит представление, используемое для отображения заголовка, задает его текст с помощью строкового актива, предоставленного объектом объявления, и регистрирует его в объекте
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
вместо ресурса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
загруженное вручную изображение. Обратите внимание, что это изображение будет использоваться только при отсутствии доступных видеоматериалов.Зарегистрируйте нативный рекламный объект
Этот последний шаг регистрирует собственный рекламный объект в представлении, которое отвечает за его отображение:
Джава
adView.setNativeAd(ad);
Котлин
adView.setNativeAd(ad)
Уничтожить объявление
Когда вы закончите показывать нативную рекламу, вы должны уничтожить ее, чтобы реклама была должным образом собрана из мусора.
Джава
nativeAd.destroy();
.inflate(R.layout.ad_layout_file, parent);
Котлин
nativeAd.destroy()
Примеры на GitHub
Пример полной реализации нативной рекламы:
Следующие шаги
Изучите следующие темы: