Родной расширенный

Отображение определенного системой формата нативной рекламы.

Когда нативное объявление загружается, ваше приложение получит объект нативного объявления через одно из сообщений протокола 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. Вот как может выглядеть макет нативного объявления:

Обратите внимание на значение Custom Class в правом верхнем углу изображения. Он настроен на

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)")
  }
}
NativeAdViewModel.swift

Создайте 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
  }
NativeContentView.swift

Добавьте представление в иерархию представлений

Следующий код демонстрирует добавление 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.
NativeContentView.swift

Цель-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 .

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

Узнайте больше о конфиденциальности пользователей .