Отображение нативной рекламы
Когда загружается нативное объявление, 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, "ca-app-pub-3940256099942544/2247696110")
.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, "ca-app-pub-3940256099942544/2247696110")
.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 было хорошо видно, поэтому выбирайте соответствующие цвета фона и изображения. Дополнительную информацию о внешнем виде и функциях наложения см. в описании полей нативной рекламы .
Атрибуция рекламы
Вы должны отобразить атрибуцию объявления, чтобы обозначить, что просмотр является рекламой. Подробную информацию можно найти в наших правилах .
Пример кода
Вот шаги для показа нативной рекламы:
- Создайте экземпляр класса
NativeAdView
. Для каждого отображаемого рекламного объекта:
- Заполните представление актива активом в объекте объявления.
- Зарегистрируйте представление актива с помощью класса
NativeAdView
.
Зарегистрируйте
MediaView
если ваш собственный макет объявления включает в себя большой медиаресурс.Зарегистрируйте объект объявления в классе
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)
}
Вот индивидуальные задания:
Раздувание макета
Ява
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, если вы правильно заполняете и регистрируете представления ресурсов, как описано в предыдущем разделе.
Чтобы отслеживать клики, внедрите обратный вызов кликов Google Mobile Ads 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. } @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. } override fun onAdClicked() { // Log the click event or other custom behavior. } }) .build()
Зарегистрируйте МедиаВью
Вам необходимо использовать ресурс
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
для изображения, загруженного вручную. Обратите внимание, что это изображение будет использоваться только в том случае, если нет доступного видеоресурса.Зарегистрируйте объект нативной рекламы
На этом последнем этапе объект нативной рекламы регистрируется в представлении, отвечающем за его отображение.
Ява
adView.setNativeAd(ad);
Котлин
adView.setNativeAd(ad)
Удалить объявление
Когда вы закончите показывать нативное объявление, вам следует уничтожить его, чтобы оно было правильно удалено.
Ява
nativeAd.destroy();
Котлин
nativeAd.destroy()
Примеры на GitHub
Пример полной реализации нативной рекламы:
Следующие шаги
Изучите следующие темы: