Как показывать нативные объявления

Выберите платформу: Android iOS Android (устаревшая версия)

Как показывать нативные объявления стандартных форматов

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

GADNativeAdView

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

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

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

  • Регистрация кликов.
  • Регистрация показов (когда на экране виден первый пиксель).
  • Показывать значок "Выбор рекламы".

Значок "Выбор рекламы"

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

Пометка рекламы

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

Пример кода

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

Разместите объекты UIView

Сначала нужно создать макет UIViews, в котором будут показываться объекты нативного объявления. Это можно сделать в Interface Builder так же, как и при создании любого другого файла XIB. Вот как может выглядеть макет нативного объявления:

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

GADNativeAdView. Это класс представления объявления, который используется для показа GADNativeAd.

Вам также нужно будет задать специальный класс для GADMediaView, который используется для показа видео или изображения в объявлении.

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

На панели выходов выходы в GADNativeAdView связаны с UIViews, размещенными в Interface Builder. Так SDK узнает, в каком UIView показывать тот или иной объект. Также важно помнить, что эти издания представляют взгляды, на которые можно нажать в объявлении.

Показ объявления

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

Swift

func adLoader(_ adLoader: AdLoader, didReceive nativeAd: NativeAd) {
  // ...

  // 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

  // Some native ads will include a video asset, while others do not. Apps can use the
  // GADVideoController's hasVideoContent property to determine if one is present, and adjust their
  // UI accordingly.
  let mediaContent = nativeAd.mediaContent
  if mediaContent.hasVideoContent {
    // By acting as the delegate to the GADVideoController, this ViewController receives messages
    // about events in the video lifecycle.
    mediaContent.videoController.delegate = self
    videoStatusLabel.text = "Ad contains a video asset."
  } else {
    videoStatusLabel.text = "Ad does not contain a video."
  }

  // 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 aspectRatioConstraint = NSLayoutConstraint(
      item: mediaView,
      attribute: .width,
      relatedBy: .equal,
      toItem: mediaView,
      attribute: .height,
      multiplier: CGFloat(nativeAd.mediaContent.aspectRatio),
      constant: 0)
    mediaView.addConstraint(aspectRatioConstraint)
    nativeAdView.layoutIfNeeded()
  }

  // 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(from: 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
}

SwiftUI

Создание модели представления

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

import GoogleMobileAds

class NativeAdViewModel: NSObject, ObservableObject, NativeAdLoaderDelegate {
  @Published var nativeAd: NativeAd?
  private var adLoader: AdLoader!

  func refreshAd() {
    adLoader = AdLoader(
      adUnitID: "ca-app-pub-3940256099942544/3986624511",
      // The UIViewController parameter is optional.
      rootViewController: nil,
      adTypes: [.native], options: nil)
    adLoader.delegate = self
    adLoader.load(Request())
  }

  func adLoader(_ adLoader: AdLoader, didReceive nativeAd: NativeAd) {
    // Native ad data changes are published to its subscribers.
    self.nativeAd = nativeAd
    nativeAd.delegate = self
  }

  func adLoader(_ adLoader: AdLoader, didFailToReceiveAdWithError error: Error) {
    print("\(adLoader) failed with error: \(error.localizedDescription)")
  }
}

Создайте UIViewRepresentable

Создайте UIViewRepresentable для NativeView и подпишитесь на изменения данных в классе ViewModel:

private struct NativeAdViewContainer: UIViewRepresentable {
  typealias UIViewType = NativeAdView

  // Observer to update the UIView when the native ad value changes.
  @ObservedObject var nativeViewModel: NativeAdViewModel

  func makeUIView(context: Context) -> NativeAdView {
    return
      Bundle.main.loadNibNamed(
        "NativeAdView",
        owner: nil,
        options: nil)?.first as! NativeAdView
  }

  func updateUIView(_ nativeAdView: NativeAdView, 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 в иерархию View:

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) {
        // Updates when the native ad data changes.
        NativeAdViewContainer(nativeViewModel: nativeViewModel)
          .frame(minHeight: 300)  // minHeight determined from xib.

Objective-C

- (void)adLoader:(GADAdLoader *)adLoader didReceiveNativeAd:(GADNativeAd *)nativeAd {
  // ...

  GADNativeAdView *nativeAdView = self.nativeAdView;

  // Set ourselves as the 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.
  ((UILabel *)nativeAdView.headlineView).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 content it displays.
  if (nativeAdView.mediaView != nil && nativeAd.mediaContent.aspectRatio > 0) {
    NSLayoutConstraint *aspectRatioConstraint =
        [NSLayoutConstraint constraintWithItem:nativeAdView.mediaView
                                     attribute:NSLayoutAttributeWidth
                                     relatedBy:NSLayoutRelationEqual
                                        toItem:nativeAdView.mediaView
                                     attribute:NSLayoutAttributeHeight
                                    multiplier:(nativeAd.mediaContent.aspectRatio)
                                      constant:0];
    [nativeAdView.mediaView addConstraint:aspectRatioConstraint];
    [nativeAdView layoutIfNeeded];
  }

  if (nativeAd.mediaContent.hasVideoContent) {
    // By acting as the delegate to the GADVideoController, this ViewController
    // receives messages about events in the video lifecycle.
    nativeAd.mediaContent.videoController.delegate = self;

    self.videoStatusLabel.text = @"Ad contains a video asset.";
  } else {
    self.videoStatusLabel.text = @"Ad does not contain a video.";
  }

  // 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.
  // Note: this should always be done after populating the ad views.
  nativeAdView.nativeAd = nativeAd;
}

Полный пример на GitHub

Полный пример интеграции нативных объявлений в Swift, SwiftUI и Objective-C можно посмотреть по соответствующей ссылке на GitHub.

Пример расширенного нативного объявления на Swift Пример нативного объявления на SwiftUI Пример расширенного нативного объявления на Objective-C

GADMediaView

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

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

Ниже приведен фрагмент кода из примера расширенного нативного объявления (Swift | Objective-C), в котором показано, как заполнить GADMediaView объектами нативного объявления с помощью GADMediaContent из GADNativeAd:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

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

Изменить режим контента изображения

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

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

Swift

nativeAdView.mediaView?.contentMode = .scaleAspectFit

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeScaleAspectFit;

GADMediaContent

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

  • Если видеообъект доступен, он буферизуется и начинает воспроизводиться в GADMediaView. Чтобы узнать, доступен ли видеообъект, проверьте hasVideoContent.

  • Если в объявлении нет видеообъекта, скачивается объект mainImage и помещается в GADMediaView.

Дальнейшие действия

Подробнее о конфиденциальности пользователей…