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

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

Когда загрузится нативное объявление, ваше приложение получит объект нативного объявления через одно из сообщений протокола GADAdLoaderDelegate . Затем ваше приложение отвечает за отображение рекламы (хотя оно не обязательно должно делать это немедленно). Чтобы упростить отображение системных форматов объявлений, SDK предлагает несколько полезных ресурсов.

GADNativeAdView

Для GADNativeAd существует соответствующий класс «представления рекламы»: GADNativeAdView . Этот класс просмотра рекламы представляет собой UIView , который издатели должны использовать для отображения рекламы. Например, один GADNativeAdView может отображать один экземпляр GADNativeAd . Каждый из объектов UIView , используемых для отображения ресурсов этого объявления, должен быть дочерними представлениями этого объекта GADNativeAdView .

Например, если вы показывали рекламу в UITableView , иерархия представлений для одной из ячеек может выглядеть так:

Класс GADNativeAdView также предоставляет IBOutlets , используемые для регистрации представления, используемого для каждого отдельного ресурса, и метод для регистрации самого объекта GADNativeAd . Регистрация представлений таким образом позволяет SDK автоматически обрабатывать такие задачи, как:

  • Запись кликов.
  • Запись показов (когда на экране виден первый пиксель).
  • Отображение оверлея AdChoices.

Оверлей AdChoices

Для непрямых нативных объявлений (доставляемых через AdMobили через Ad Exchange или AdSense) SDK добавляет оверлей AdChoices. Оставьте место в нужном вам углу нативного объявления для автоматически вставленного логотипа AdChoices. Кроме того, убедитесь, что оверлей AdChoices размещен на контенте, который позволяет легко увидеть значок. Дополнительную информацию о внешнем виде и функциях оверлея см. в руководстве по внедрению нативных объявлений с алгоритмической продажей .

Атрибуция рекламы

При отображении программных нативных объявлений вы должны отображать атрибуцию объявления, чтобы обозначить, что просмотр является рекламой.

Пример кода

Давайте посмотрим, как отображать нативную рекламу, используя представления, загружаемые динамически из xib-файлов. Это может быть очень полезным подходом при использовании GADAdLoaders , настроенных на запрос нескольких форматов.

Разметка UIViews

Первый шаг — разместить UIViews , которые будут отображать ресурсы нативной рекламы. Вы можете сделать это в Интерфейсном Разработчике, как и при создании любого другого 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

  // In order 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
}

Цель-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 guaranteed to be 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, так и на Objective-C.

Загрузить расширенный пример

GADMediaView

Изображения и видео отображаются для пользователей через GADMediaView . Это UIView , который можно определить в xib-файле или сконструировать динамически. Оно должно быть помещено в иерархию представлений GADNativeAdView , как и любое другое представление объекта.

Как и во всех представлениях активов, в представлении мультимедиа необходимо заполнить свое содержимое. Это задается с помощью свойства mediaContent в GADMediaView . Свойство mediaContent объекта GADNativeAd содержит мультимедийный контент, который можно передать в GADMediaView .

Вот фрагмент из примераNative Advanced ( Swift | Objective-C ), который показывает, как заполнить GADMediaView нативными рекламными ресурсами с помощью GADMediaContent из GADNativeAd :

Быстрый

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Цель-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

Убедитесь, что в вашем файле построителя интерфейса для собственного представления рекламы у вас есть настраиваемый класс представлений, установленный на GADMediaView , и вы подключили его к выходу mediaView .

Изменение режима содержимого изображения

Класс GADMediaView учитывает свойство UIView contentMode при отображении изображений. Если вы хотите изменить способ масштабирования изображения в GADMediaView , задайте для этого соответствующий UIViewContentMode в contentMode объекта GADMediaView .

Например, чтобы заполнить GADMediaView при отображении изображения (в объявлении нет видео):

Быстрый

nativeAdView.mediaView?.contentMode = .aspectFill

Цель-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

Класс GADMediaContent содержит данные, относящиеся к мультимедийному содержанию нативной рекламы, которая отображается с помощью класса GADMediaView . При установке в GADMediaView mediaContent :

  • Если видеоресурс доступен, он помещается в буфер и начинает воспроизводиться внутри GADMediaView . Вы можете узнать, доступен ли видеоресурс, проверив hasVideoContent .

  • Если в объявлении нет видеоресурса, вместо него загружается ресурс mainImage и помещается в GADMediaView .