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

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

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

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

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

GADNativeAdView

Для каждого формата GADNativeAd есть соответствующий класс представления объявления: 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
}
ViewController.swift

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

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

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

В примере кода ниже показано, как добавить 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.
NativeContentView.swift

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;
}
ViewController.m

Примечание. В примере кода отключено взаимодействие пользователя с призывом к действию UIButton. Если вы используете UIButton для показа объектов нативных объявлений, отключите взаимодействие с пользователем, чтобы Google Mobile Ads SDK мог правильно получать и обрабатывать события пользовательского интерфейса. Поэтому для показа объектов нативных объявлений лучше использовать UILabel и UIImageView.

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

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

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

GADMediaView

Важно! Если вы хотите включить основной объект изображения в шаблон нативного объявления, используйте объект GADMediaView, а не UIImageView.

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

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

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

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
ViewController.swift

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
ViewController.m

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

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

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

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

Swift

nativeAdView.mediaView?.contentMode = .scaleAspectFit
NativeAdSnippets.swift

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeScaleAspectFit;
NativeAdSnippets.m

GADMediaContent

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

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

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

Важно! По умолчанию mainImage – это первый скачанный объект изображения. Если используется disableImageLoading, то mainImage имеет значение nil и вам нужно задать это свойство для скачанного вручную изображения. Обратите внимание, что это изображение будет использоваться, только если видеообъект недоступен.

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

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