Отображение 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 было видно, поэтому выбирайте фоновые цвета и изображения соответствующим образом. Для получения дополнительной информации о внешнем виде и функциях наложения обратитесь к руководству по внедрению программных нативных объявлений .
Атрибуция рекламы для программной нативной рекламы
При отображении программных нативных объявлений вы должны отобразить атрибутику объявления, чтобы обозначить, что просмотр является рекламой. Узнайте больше в наших рекомендациях по политике .
Пример кода
Вот шаги для показа нативной рекламы:
- Создайте экземпляр класса
NativeAdView
. Для каждого отображаемого рекламного актива:
- Заполните представление актива активом из объекта рекламы.
- Зарегистрируйте представление активов с помощью класса
NativeAdView
.
Зарегистрируйте объект рекламы с помощью класса
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;
}
Вот отдельные задания:
Раздуть макет
Котлин
// 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
, если он есть в вашем фрагменте или активности, или даже создать экземпляр динамически, не используя файл макета.Заполните и зарегистрируйте представления активов
В этом примере кода определяется представление, используемое для отображения заголовка, задается его текст с использованием строкового актива, предоставленного объектом объявления, и регистрируется с помощью объекта
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()));
Этот процесс поиска представления, установки его значения и регистрации его в классе представления рекламы следует повторить для каждого из ресурсов, предоставляемых объектом собственной рекламы, который будет отображаться приложением.
Обработка щелчков
Не внедряйте никаких пользовательских обработчиков кликов в любые представления поверх или внутри собственного представления рекламы. Клики по активам представления рекламы обрабатываются 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."); } }); }
Зарегистрируйте 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
для вашего вручную загруженного изображения. Обратите внимание, что это изображение будет использоваться только при отсутствии доступного видеоресурса.Зарегистрируйте нативный рекламный объект
На этом последнем этапе объект нативной рекламы регистрируется в представлении, отвечающем за его отображение, а также в представлении для актива медиаконтента.
Котлин
// 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.