Добавление нативной рекламы в ваше приложение iOS

С помощью API Native Ad вы можете создавать индивидуально настроенную рекламу для своего приложения. Выбирая API Native Ad вместо готовой к показу рекламы, вы получаете набор свойств рекламы (название, изображение, призыв к действию и т. п.), позволяющих разработать для нее индивидуальное представление.

Давайте реализуем следующее место размещения нативной рекламы. Вам предстоит создать следующие представления для нативной рекламы.

Шаг 1․ Создание представления нативной рекламы в Storyboard

Шаг 2․ Загрузка и показ нативной рекламы

Шаг 3․ Как узнать соотношение сторон материалов и применить естественную ширину и высоту

Шаг 4․ Проверка регистрации показов и кликов

Шаг 5․ Что делать, если реклама не демонстрируется

Шаг 6․ Загрузка рекламы без автоматического кэширования

Шаг 7․ Тестирование интеграции рекламы

См. известные проблемы в журнале изменений

Шаг 1․ Создание представления нативной рекламы в Storyboard

1. Создав проект согласно руководству по началу работы для iOS, откройте Main.storyboard. Добавьте элемент UIView в главный элемент View и присвойте ему имя adUIView.
   
   
   
2. Затем добавьте adIconImageView (FBMediaView), adTitleLabel (UILabel), adCoverMediaView (FBMediaView), adSocialContext (UILabel), adCallToActionButton (UIButton), adOptionsView (FBAdOptionsView), adBodyLabel (UILabel) и sponsoredLabel (UILabel) в adUIView, как показано здесь:
   
   
   
3. Вы можете заметить красную стрелку рядом с элементом View Controller Scene. Как правило, это означает, что в вашем макете отсутствуют некоторые ограничения.
   
   
   Выберите все объекты представления в сцене и нажмите значок "resolve layout issue" (разрешить проблему макета), чтобы добавить недостающие ограничения.
   
   
   
4. Итак, вы создали все элементы пользовательского интерфейса для показа нативной рекламы. Вам надо ссылаться на эти элементы пользовательского интерфейса в интерфейсе ViewController. Сначала откройте ViewController.m (ViewController.swift, если вы используете Swift), затем перетащите adUIView вовнутрь объекта ViewController. Можете присвоить ему имя adUIView. Затем сделайте то же самое для adIconImageView, adTitleLabel, adCoverMediaView, adSocialContext, adCallToActionButton, adOptionsView, adBodyLabel и sponsoredLabel.
   
   
   
5. Соберите и запустите проект. На своем устройстве или в симуляторе вы должны увидеть пустое пространство для материалов:
   

Теперь, когда вы создали все элементы пользовательского интерфейса для показа нативной рекламы, нужно загрузить нативную рекламу и привязать эти материалы к элементам пользовательского интерфейса.

Шаг 2. Загрузка и показ нативной рекламы

1. Импортируйте SDK исходном файле контроллера представления, объявите, что ViewController соблюдает протокол FBNativeAdDelegate и добавьте переменную экземпляра FBNativeAd
   SwiftObjective-C

   import UIKit
   import FBAudienceNetwork
   
   class ViewController: UIViewController, FBNativeAdDelegate {
       
     private var nativeAd: FBNativeAd?
   }

   #import <UIKit/UIKit.h>
   @import FBAudienceNetwork;
   
   @interface ViewController () <FBNativeAdDelegate>
   
   @property (strong, nonatomic) FBNativeAd *nativeAd;
   
   @end


2. Для загрузки контента нативной рекламы добавьте следующие линии кода в методе viewDidLoad
   SwiftObjective-C

   override func viewDidLoad() {
     super.viewDidLoad()
       
     let nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
     nativeAd.delegate = self
     nativeAd.loadAd()
   }

   - (void)viewDidLoad 
   {
     [super viewDidLoad];
   
     FBNativeAd *nativeAd = [[FBNativeAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];
     nativeAd.delegate = self;
     [nativeAd loadAd];
   }
   
   

   В YOUR_PLACEMENT_ID, показан временный ID, который используется только для тестирования.

   Если вы будете использовать этот временный ID в рабочем коде, вместо рекламных объявлений пользователи будут получать ошибку No Fill. После тестирования необходимо вернуться к этому шагу и подставить вместо этого временного ID рабочий ID места размещения.

   Инструкции по генерации рабочего ID места размещения см. в этой статье.

3. Далее нужно показать эту рекламу с готовыми материалами. Вам понадобится ваш ViewController для реализации метода делегата nativeAdDidLoad
   SwiftObjective-C

   func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
       
     // 1. If there is an existing valid native ad, unregister the view
     if let previousNativeAd = self.nativeAd, previousNativeAd.isAdValid {
       previousNativeAd.unregisterView()
     }
       
     // 2. Retain a reference to the native ad object
     self.nativeAd = nativeAd
   
     // 3. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     nativeAd.registerView(
       forInteraction: adUIView,
       mediaView: adCoverMediaView,
       iconView: adIconImageView,
       viewController: self,
       clickableViews: [adCallToActionButton, adCoverMediaView]
     )
       
     // 4. Render the ad content onto the view
     adTitleLabel.text = nativeAd.advertiserName
     adBodyLabel.text = nativeAd.bodyText
     adSocialContextLabel.text = nativeAd.socialContext
     sponsoredLabel.text = nativeAd.sponsoredTranslation
     adCallToActionButton.setTitle(nativeAd.callToAction, for: .normal)
     adOptionsView.nativeAd = nativeAd
   }

   - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd
   {
     // 1. If there is an existing valid native ad, unregister the view
     if (self.nativeAd && self.nativeAd.isAdValid) {
       [self.nativeAd unregisterView];
     }
   
     // 2. Retain a reference to the native ad object
     self.nativeAd = nativeAd;
   
     // 3. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     [self.nativeAd registerViewForInteraction:self.adUIView
                                     mediaView:self.adCoverMediaView
                                      iconView:self.adIconImageView
                                viewController:self
                                clickableViews:@[self.adCallToActionButton, self.adCoverMediaView]];
   
     // 4. Render the ad content onto the view
     self.adTitleLabel.text = self.nativeAd.advertiserName;
     self.adBodyLabel.text = self.nativeAd.bodyText;
     self.adSocialContextLabel.text = self.nativeAd.socialContext;
     self.sponsoredLabel.text = self.nativeAd.sponsoredTranslation;
     [self.adCallToActionButton setTitle:self.nativeAd.callToAction forState:UIControlStateNormal];
     self.adOptionsView.nativeAd = self.nativeAd; 
   }

Управление интерактивной областью

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




4. Выберите сборку в качестве устройства и выполните код, приведенный выше. Вы увидите следующее:
   
   
   
   

Шаг 3. Как узнать соотношение сторон материалов и применить естественную ширину и высоту

В примере выше медиаматериалы рекламы демонстрируются в adCoverMediaView, а тип объекта — FBMediaView. На предыдущем шаге мы показали, как с помощью FBMediaView загрузить медиаматериалы из определенного объекта FBNativeAd. Это представление позволяет не загружать обложку вручную. При создании FBMediaView ширина и высота определяются автоматическими границами макета, указанными в раскадровке, либо задаются в программном коде. Однако ширина и высота представления могут не совпасть со скачанной позже обложкой рекламы. Чтобы исправить это, нужно узнать соотношение сторон материалов и применить естественную ширину и высоту (см. ниже):

1. Объявите, что ваш Контроллер представления реализует протокол FBMediaViewDelegate
   SwiftObjective-C

   class ViewController: UIViewController, FBNativeAdDelegate, FBMediaViewDelegate {
     ...
   }

   @interface ViewController : UIViewController <FBNativeAdDelegate, FBMediaViewDelegate>
   ...
   @end


2. Когда нативная реклама будет загружена, настройте делегат объекта FBMediaView в качестве вашего контроллера представления
   SwiftObjective-C

   func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
     adCoverMediaView.delegate = self
   }

   - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
   {
     self.adCoverMediaView.delegate = self;
   }


3. Реализуйте метод mediaViewDidLoad в вашем контроллере представления
   SwiftObjective-C

   func mediaViewDidLoad(_ mediaView: FBMediaView) {
     let currentAspect = mediaView.frame.size.width / mediaView.frame.size.height
     print(currentAspect)
     
     let actualAspect = mediaView.aspectRatio
     print(actualAspect)
   }

   - (void)mediaViewDidLoad:(FBMediaView *)mediaView
   {
     CGFloat currentAspect = mediaView.frame.size.width / mediaView.frame.size.height;
     NSLog(@"current aspect of media view: %f", currentAspect);
     
     CGFloat actualAspect = mediaView.aspectRatio;
     NSLog(@"actual aspect of media view: %f", actualAspect);
   }
   
   mediaView.aspectRatio возвращает позитивный CGFloat, или же 0.0 в случае отсутствия загружаемой рекламы. Значение станет действительным после загрузки медиапредставления. Есть удобные методы, которые позволяют настроить ширину и высоту объекта FBMediaView с учетом соотношения сторон загружаемых медиаматериалов. Вы можете вызвать applyNaturalWidth или applyNaturalHeight, чтобы обновить высоту или ширину объекта FBMediaView с учетом соотношения сторон медиаматериалов.

Шаг 4. Проверка регистрации показов и кликов

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

func nativeAdDidClick(_ nativeAd: FBNativeAd) {
  print("Native ad was clicked.")
}

func nativeAdDidFinishHandlingClick(_ nativeAd: FBNativeAd) {
  print("Native ad did finish click handling.")
}

func nativeAdWillLogImpression(_ nativeAd: FBNativeAd) {
  print("Native ad impression is being captured.")
}

- (void)nativeAdDidClick:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad was clicked.");
}

- (void)nativeAdDidFinishHandlingClick:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad did finish click handling.");
}

- (void)nativeAdWillLogImpression:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad impression is being captured.");
}

Шаг 5. Что делать, если реклама не демонстрируется

Добавьте в ваш контроллер представления и реализуйте следующую функцию, чтобы обрабатывать случаи сбоя загрузки рекламы

func nativeAd(_ nativeAd: FBNativeAd, didFailWithError error: Error) {
  print("Native ad failed to load with error: \(error.localizedDescription)")
}

- (void)nativeAd:(FBNativeAd *)nativeAd didFailWithError:(NSError *)error
{
  NSLog(@"Native ad failed to load with error: %@", error);
}

Шаг 6. Загрузка рекламы без автоматического кэширования

1. Настоятельно рекомендуется по умолчанию никогда не выключать кэширование медиафайлов. Однако при необходимости этот параметр можно переопределить. Будьте очень осторожны, если решите изменить параметры кэширования медиафайлов, установленные по умолчанию
   SwiftObjective-C

   let nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
   nativeAd.delegate = self
   nativeAd.loadAd(withMediaCachePolicy: .none)

   FBNativeAd *nativeAd = [[FBNativeAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];
   nativeAd.delegate = self;
   [nativeAd loadAdWithMediaCachePolicy:FBNativeAdsCachePolicyNone];


2. Во-первых, вам надо будет вручную скачать все медиафайлы для нативной рекламы
   SwiftObjective-C

   func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
     
     ...
     
     self.adCoverMediaView.delegate = self
     nativeAd.downloadMedia()
     self.nativeAd = nativeAd
     
     ...
   }

   - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd
   {
     ...
   
     self.adCoverMediaView.delegate = self;
     [nativeAd downloadMedia];
     self.nativeAd = nativeAd;
   
     ...
   }


3. Затем необходимо только вызвать registerViewForInteraction и показать рекламу после обратного вызова mediaViewDidLoad. Чтобы показ был засчитан, должны быть загружены и отображены все медиаматериалы
   SwiftObjective-C

   func mediaViewDidLoad(_ mediaView: FBMediaView) {
     guard let nativeAd = nativeAd else {
       return
     }
     
     // 1. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     nativeAd.registerView(
       forInteraction: adUIView,
       mediaView: mediaView,
       iconView: adIconImageView,
       viewController: self,
       clickableViews: [adCallToActionButton, mediaView]
     )
       
     // 2. Render the ad content onto the view
     adTitleLabel.text = nativeAd.advertiserName
     adBodyLabel.text = nativeAd.bodyText
     adSocialContextLabel.text = nativeAd.socialContext
     sponsoredLabel.text = nativeAd.sponsoredTranslation
     adCallToActionButton.setTitle(nativeAd.callToAction, for: .normal)
     adOptionsView.nativeAd = nativeAd
   }

   - (void)mediaViewDidLoad:(FBMediaView *)mediaView 
   {
     if (!self.nativeAd) {
       return;
     }
   
     // 1. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     [self.nativeAd registerViewForInteraction:self.adUIView
                                     mediaView:mediaView
                                      iconView:self.adIconImageView
                             viewController:self
                            clickableViews:@[self.adCallToActionButton, mediaView]];
   
     // 2. Render the ad content onto the view
     self.adTitleLabel.text = self.nativeAd.advertiserName;
     self.adBodyLabel.text = self.nativeAd.bodyText;
     self.adSocialContextLabel.text = self.nativeAd.socialContext;
     self.sponsoredLabel.text = self.nativeAd.sponsoredTranslation;
     [self.adCallToActionButton setTitle:self.nativeAd.callToAction forState:UIControlStateNormal];
     self.adOptionsView.nativeAd = self.nativeAd; 
   }