Отображение определенного системой формата нативной рекламы.
Когда нативное объявление загружается, ваше приложение получит объект нативного объявления через одно из сообщений протокола GADAdLoaderDelegate
. Затем ваше приложение отвечает за отображение рекламы (хотя оно не обязательно должно делать это немедленно). Чтобы упростить отображение определенных системой форматов объявлений, SDK предлагает несколько полезных ресурсов.
GADNativeAdView
Для GADNativeAd
существует соответствующий класс просмотра рекламы: GADNativeAdView
. Этот класс представления рекламы представляет собой UIView
, который издатели должны использовать для отображения рекламы. Например, один GADNativeAdView
может отображать один экземпляр GADNativeAd
. Каждый из объектов UIView
используемых для отображения ресурсов этого объявления, должен быть подпредставлением этого объекта GADNativeAdView
.
Например, если вы отображали рекламу в UITableView
, иерархия представлений для одной из ячеек может выглядеть следующим образом:
Класс GADNativeAdView
также предоставляет IBOutlets
используемые для регистрации представления, используемого для каждого отдельного актива, и метод для регистрации самого объекта GADNativeAd
. Регистрация представлений таким образом позволяет SDK автоматически выполнять такие задачи, как:
- Запись кликов.
- Запись показов (когда на экране виден первый пиксель).
- Отображение наложения AdChoices.
Наложение «Выбор рекламы»
Для косвенных нативных объявлений (показываемых через заполнение Менеджера рекламы или через Ad Exchange или AdSense) SDK добавляет оверлей AdChoices. Оставьте место в предпочитаемом вами углу окна просмотра собственной рекламы для автоматически вставляемого логотипа AdChoices. Кроме того, убедитесь, что наложение AdChoices размещено на контенте, который позволяет легко увидеть значок. Дополнительную информацию о внешнем виде и функциях наложения см. в рекомендациях по реализации программных нативных объявлений .
Атрибуция рекламы для программных нативных объявлений
При показе программных нативных объявлений необходимо указать атрибуцию объявления, чтобы обозначить, что просмотр является рекламой. Подробную информацию можно найти в наших правилах .Пример кода
Давайте посмотрим, как отображать нативную рекламу с помощью представлений, динамически загружаемых из файлов xib. Это может быть очень полезным подходом при использовании GADAdLoaders
настроенных на запрос нескольких форматов.
Разместите UIViews
Первым шагом является размещение UIViews
, которые будут отображать собственные рекламные ресурсы. Вы можете сделать это в Interface Builder, как и при создании любого другого файла xib. Вот как может выглядеть макет нативного объявления:
Обратите внимание на значение пользовательского класса в правом верхнем углу изображения. Он настроен на
GADNativeAdView
. Это класс просмотра рекламы, который используется для отображения GADNativeAd
.
Вам также потребуется установить собственный класс для GADMediaView
, который используется для отображения видео или изображения для объявления.
Связывание торговых точек с представлениями
После того, как представления созданы и вы назначили макету правильный класс представления рекламы, свяжите источники ресурсов представления рекламы с созданными вами UIViews
. Вот как вы можете связать источники ресурсов представления рекламы с UIViews
, созданными для рекламы:
На панели розеток розетки в GADNativeAdView
были связаны с UIViews
расположенными в конструкторе интерфейсов. Это позволяет SDK узнать, какой UIView
отображает какой ресурс. Также важно помнить, что эти каналы представляют собой просмотры, на которые можно нажать в объявлении.
Покажите объявление
После завершения макета и связывания торговых точек добавьте в свое приложение следующий код, который будет отображать рекламу после ее загрузки:
Быстрый
// Mark: - GADNativeAdLoaderDelegate
func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) {
print("Received native ad: \(nativeAd)")
refreshAdButton.isEnabled = true
// Create and place ad in view hierarchy.
let nibView = Bundle.main.loadNibNamed("NativeAdView", owner: nil, options: nil)?.first
guard let nativeAdView = nibView as? GADNativeAdView else {
return
}
setAdView(nativeAdView)
// Set ourselves as the native ad delegate to be notified of native ad events.
nativeAd.delegate = self
// Populate the native ad view with the native ad assets.
// The headline and mediaContent are guaranteed to be present in every native ad.
(nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
// This app uses a fixed width for the GADMediaView and changes its height to match the aspect
// ratio of the media it displays.
if let mediaView = nativeAdView.mediaView, nativeAd.mediaContent.aspectRatio > 0 {
let heightConstraint = NSLayoutConstraint(
item: mediaView,
attribute: .height,
relatedBy: .equal,
toItem: mediaView,
attribute: .width,
multiplier: CGFloat(1 / nativeAd.mediaContent.aspectRatio),
constant: 0)
heightConstraint.isActive = true
}
// These assets are not guaranteed to be present. Check that they are before
// showing or hiding them.
(nativeAdView.bodyView as? UILabel)?.text = nativeAd.body
nativeAdView.bodyView?.isHidden = nativeAd.body == nil
(nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal)
nativeAdView.callToActionView?.isHidden = nativeAd.callToAction == nil
(nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image
nativeAdView.iconView?.isHidden = nativeAd.icon == nil
(nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars(
fromStarRating: nativeAd.starRating)
nativeAdView.starRatingView?.isHidden = nativeAd.starRating == nil
(nativeAdView.storeView as? UILabel)?.text = nativeAd.store
nativeAdView.storeView?.isHidden = nativeAd.store == nil
(nativeAdView.priceView as? UILabel)?.text = nativeAd.price
nativeAdView.priceView?.isHidden = nativeAd.price == nil
(nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser
nativeAdView.advertiserView?.isHidden = nativeAd.advertiser == nil
// For the SDK to process touch events properly, user interaction should be disabled.
nativeAdView.callToActionView?.isUserInteractionEnabled = false
// Associate the native ad view with the native ad object. This is
// required to make the ad clickable.
// Note: this should always be done after populating the ad views.
nativeAdView.nativeAd = nativeAd
}
SwiftUI
Создайте модель представления
Создайте модель представления, которая загружает нативное объявление и публикует изменения данных нативного объявления:
import GoogleMobileAds
class NativeAdViewModel: NSObject, ObservableObject, GADNativeAdLoaderDelegate {
@Published var nativeAd: GADNativeAd?
private var adLoader: GADAdLoader!
func refreshAd() {
adLoader = GADAdLoader(
adUnitID: "ca-app-pub-3940256099942544/3986624511",
// The UIViewController parameter is optional.
rootViewController: nil,
adTypes: [.native], options: nil)
adLoader.delegate = self
adLoader.load(GADRequest())
}
func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) {
// Native ad data changes are published to its subscribers.
self.nativeAd = nativeAd
nativeAd.delegate = self
}
func adLoader(_ adLoader: GADAdLoader, didFailToReceiveAdWithError error: Error) {
print("\(adLoader) failed with error: \(error.localizedDescription)")
}
}
Создайте UIViewRepresentable
Создайте UIViewRepresentable
для GADNativeView
и подпишитесь на изменения данных в классе ViewModel
:
private struct NativeAdView: UIViewRepresentable {
typealias UIViewType = GADNativeAdView
// Observer to update the UIView when the native ad value changes.
@ObservedObject var nativeViewModel: NativeAdViewModel
func makeUIView(context: Context) -> GADNativeAdView {
return
Bundle.main.loadNibNamed(
"NativeAdView",
owner: nil,
options: nil)?.first as! GADNativeAdView
}
func updateUIView(_ nativeAdView: GADNativeAdView, context: Context) {
guard let nativeAd = nativeViewModel.nativeAd else { return }
// Each UI property is configurable using your native ad.
(nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
(nativeAdView.bodyView as? UILabel)?.text = nativeAd.body
(nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image
(nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars(from: nativeAd.starRating)
(nativeAdView.storeView as? UILabel)?.text = nativeAd.store
(nativeAdView.priceView as? UILabel)?.text = nativeAd.price
(nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser
(nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal)
// For the SDK to process touch events properly, user interaction should be disabled.
nativeAdView.callToActionView?.isUserInteractionEnabled = false
// Associate the native ad view with the native ad object. This is required to make the ad
// clickable.
// Note: this should always be done after populating the ad views.
nativeAdView.nativeAd = nativeAd
}
Добавьте представление в иерархию представлений
Следующий код демонстрирует добавление UIViewRepresentable
в иерархию представлений:
struct NativeContentView: View {
// Single source of truth for the native ad data.
@StateObject private var nativeViewModel = NativeAdViewModel()
var body: some View {
ScrollView {
VStack(spacing: 20) {
NativeAdView(nativeViewModel: nativeViewModel) // Updates when the native ad data changes.
.frame(minHeight: 300) // minHeight determined from xib.
Цель-C
#pragma mark GADNativeAdLoaderDelegate implementation
- (void)adLoader:(GADAdLoader *)adLoader didReceiveNativeAd:(GADNativeAd *)nativeAd {
NSLog(@"Received native ad: %@", nativeAd);
self.refreshButton.enabled = YES;
// Create and place ad in view hierarchy.
GADNativeAdView *nativeAdView =
[[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject;
[self setAdView:nativeAdView];
// Set the mediaContent on the GADMediaView to populate it with available
// video/image asset.
nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
// Populate the native ad view with the native ad assets.
// The headline is present in every native ad.
((UILabel *)nativeAdView.headlineView).text = nativeAd.headline;
// These assets are not guaranteed to be present. Check that they are before
// showing or hiding them.
((UILabel *)nativeAdView.bodyView).text = nativeAd.body;
nativeAdView.bodyView.hidden = nativeAd.body ? NO : YES;
[((UIButton *)nativeAdView.callToActionView)setTitle:nativeAd.callToAction
forState:UIControlStateNormal];
nativeAdView.callToActionView.hidden = nativeAd.callToAction ? NO : YES;
((UIImageView *)nativeAdView.iconView).image = nativeAd.icon.image;
nativeAdView.iconView.hidden = nativeAd.icon ? NO : YES;
((UIImageView *)nativeAdView.starRatingView).image = [self imageForStars:nativeAd.starRating];
nativeAdView.starRatingView.hidden = nativeAd.starRating ? NO : YES;
((UILabel *)nativeAdView.storeView).text = nativeAd.store;
nativeAdView.storeView.hidden = nativeAd.store ? NO : YES;
((UILabel *)nativeAdView.priceView).text = nativeAd.price;
nativeAdView.priceView.hidden = nativeAd.price ? NO : YES;
((UILabel *)nativeAdView.advertiserView).text = nativeAd.advertiser;
nativeAdView.advertiserView.hidden = nativeAd.advertiser ? NO : YES;
// In order for the SDK to process touch events properly, user interaction
// should be disabled.
nativeAdView.callToActionView.userInteractionEnabled = NO;
// Associate the native ad view with the native ad object. This is
// required to make the ad clickable.
nativeAdView.nativeAd = nativeAd;
}
Полный пример на GitHub
Полный пример интеграции нативной рекламы в Swift, SwiftUI и Objective-C можно просмотреть, перейдя по соответствующей ссылке на GitHub.
Пример пользовательского рендеринга Swift. Пример нативной рекламы SwiftUI. Пример пользовательского рендеринга Objective-C.
GADMediaView
Ресурсы изображений и видео отображаются пользователям через GADMediaView
. Это UIView
, который можно определить в файле xib или создать динамически. Его следует поместить в иерархию представлений GADNativeAdView
, как и любое другое представление ресурса.
Как и во всех представлениях ресурсов, в представлении мультимедиа необходимо заполнить содержимое. Это устанавливается с помощью свойства mediaContent
в GADMediaView
. Свойство mediaContent
объекта GADNativeAd
содержит медиаконтент, который можно передать в GADMediaView
.
Вот фрагмент примера пользовательского рендеринга ( Swift | Objective-C ), который показывает, как заполнить GADMediaView
собственными рекламными ресурсами с помощью GADMediaContent
из GADNativeAd
:
Быстрый
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
Цель-C
nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
Убедитесь, что в файле построителя интерфейса для вашего собственного представления рекламы для пользовательского класса представлений установлено значение GADMediaView
, и вы подключили его к розетке mediaView
.
Изменение режима содержимого изображения
Класс GADMediaView
учитывает свойство contentMode
UIView
при отображении изображений. Если вы хотите изменить способ масштабирования изображения в GADMediaView
, для достижения этой цели установите соответствующий UIViewContentMode
в свойстве contentMode
GADMediaView
.
Например, чтобы заполнить GADMediaView
при отображении изображения (в объявлении нет видео):
Быстрый
nativeAdView.mediaView?.contentMode = .aspectFill
Цель-C
nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;
GADMediaContent
Класс GADMediaContent
содержит данные, относящиеся к медиаконтенту собственного объявления, которое отображается с помощью класса GADMediaView
. Если установлено в свойстве mediaContent
GADMediaView
:
Если видеоресурс доступен, он помещается в буфер и начинает воспроизводиться внутри
GADMediaView
. Вы можете узнать, доступен ли видеоресурс, проверивhasVideoContent
.Если объявление не содержит видеоресурса, вместо него загружается ресурс
mainImage
и помещается вGADMediaView
.
Следующие шаги
Узнайте больше о конфиденциальности пользователей .