Ad Setup

Использование шаблонов нативной рекламы в iOS

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

Прежде чем продолжить, обязательно ознакомьтесь с руководствами по началу работы с Audience Network и iOS.

Чтобы эффективно использовать это руководство, вы должны быть знакомы с реализацией нативной рекламы.

Шаг 1. Реализация шаблона

Шаг 2. Дальнейшая настройка

Шаг 1. Реализация шаблона

• Реализация для нативной рекламы

В файле заголовка контроллера представления (или файле Swift, если вы используете Swift) импортируйте FBAudienceNetwork, объявите соответствие протоколу FBNativeAdDelegate и добавьте переменную экземпляра в рекламный блок:

import UIKit
import FBAudienceNetwork

class ViewController: UIViewController, FBNativeAdDelegate {
  private var nativeAd: FBNativeAd?
}
#import <UIKit/UIKit.h>
@import FBAudienceNetwork;

@interface ViewController : UIViewController <FBNativeAdDelegate>

@property (nonatomic, strong) FBNativeAd *nativeAd;

@end

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

override func viewDidLoad() {
  super.viewDidLoad()
    
  // Instantiate the ad object.
  // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
  // now, while you are testing and replace it later when you have signed up.
  // While you are using this temporary code you will only get test ads and if you release
  // your code like this to the App Store your users will not receive ads (you will get a 'No Fill' error).
  let nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
  nativeAd.delegate = self
  nativeAd.loadAd()
}
- (void)viewDidLoad 
{
  [super viewDidLoad];
  // Instantiate a NativeAd object. 
  // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
  // now, while you are testing and replace it later when you have signed up.
  // While you are using this temporary code you will only get test ads and if you release
  // your code like this to the App Store your users will not receive ads (you will get a no fill error).
  FBNativeAd *nativeAd = [[FBNativeAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];
  nativeAd.delegate = self;
  [nativeAd loadAd];
}

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

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

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

Добавив код для загрузки рекламы, также добавьте следующие функции для формирования рекламного объявления:

func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
    
  if let previousNativeAd = self.nativeAd, previousNativeAd.isAdValid {
    previousNativeAd.unregisterView()
  }
    
  self.nativeAd = nativeAd

  let adView = FBNativeAdView(nativeAd: nativeAd, with: .genericHeight300)

  view.addSubview(adView)

  let size = view.bounds.size
  let xOffset: CGFloat = size.width / 2 - 160
  let yOffset: CGFloat = (size.height > size.width) ? 100 : 20
  adView.frame = CGRect(x: xOffset, y: yOffset, width: 320, height: 300)
}
- (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
{    
  self.nativeAd = nativeAd;
  [self showNativeAd];
}

- (void)showNativeAd
{
  if (self.nativeAd && self.nativeAd.isAdValid) {
    [self.nativeAd unregisterView];
  }

  FBNativeAdView *adView = [FBNativeAdView nativeAdViewWithNativeAd:self.nativeAd withType:FBNativeAdViewTypeGenericHeight300];

  [self.view addSubview:adView];

  CGSize size = self.view.bounds.size;
  CGFloat xOffset = size.width / 2 - 160;
  CGFloat yOffset = (size.height > size.width) ? 100 : 20;
  adView.frame = CGRectMake(xOffset, yOffset, 320, 300);
}

В качестве цели сборки выберите устройство и выполните показанный выше код. Результат должен быть примерно таким:



Существует два шаблона пользовательских форматов рекламы:

Тип шаблона представления Высота Ширина Добавляемые атрибуты

FBNativeAdView TypeGenericHeight300

300 точек

Адаптируемая ширина

Изображение, значок, заголовок, контекст, описание и кнопка призыва к действию

FBNativeAdView TypeGenericHeight400

400 точек

Адаптируемая ширина

Изображение, значок, заголовок, подзаголовок, контекст, описание и кнопка призыва к действию

• Реализация для нативной баннерной рекламы

Для показа нативной баннерной рекламы с использованием шаблонов высотой 100 и 120 необходимо создать экземпляр FBNativeBannerAd и показать его в экземпляре представления FBNativeBannerAdView следующим образом:

В файле заголовка контроллера представления (или файле Swift, если вы используете Swift) импортируйте FBAudienceNetwork, объявите соответствие протоколу FBNativeBannerAdDelegate и добавьте переменную экземпляра в рекламный блок:

import UIKit
import FBAudienceNetwork

class ViewController: UIViewController, FBNativeBannerAdDelegate {
  private var nativeBannerAd: FBNativeBannerAd?
}
#import <UIKit/UIKit.h>
@import FBAudienceNetwork;

@interface ViewController : UIViewController <FBNativeBannerAdDelegate>

@property (nonatomic, strong) FBNativeBannerAd *nativeBannerAd;

@end

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

override func viewDidLoad() {
  super.viewDidLoad()
  
  // Instantiate a native banner ad object.
  // NOTE: the placement ID will eventually identify this as your app. You can ignore it while you are testing
  // and replace it later when you have signed up.
  // While you are using this temporary code you will only get test ads and if you release
  // your code like this to the App Store your users will not receive ads (you will get a ‘No Fill’ error).
  let nativeBannerAd = FBNativeBannerAd(placementID: "YOUR_PLACEMENT_ID")

  // Set a delegate to get notified when the ad was loaded.
  nativeBannerAd.delegate = self

  // Initiate a request to load an ad.
  nativeBannerAd.loadAd()  
}
- (void)viewDidLoad 
{
  [super viewDidLoad];

  // Instantiate a native banner ad object.
  // NOTE: the placement ID will eventually identify this as your app. You can ignore it while you are testing
  // and replace it later when you have signed up.
  // While you are using this temporary code you will only get test ads and if you release
  // your code like this to the App Store your users will not receive ads (you will get a ‘No Fill’ error).
  // your code like this to the App Store your users will not receive ads (you will get a ‘No Fill’ error).
  FBNativeBannerAd *nativeBannerAd = [[FBNativeBannerAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];

  // Set a delegate to get notified when the ad was loaded.
  nativeBannerAd.delegate = self;

  // Initiate a request to load an ad.
  [nativeBannerAd loadAd];
}

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

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

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

Добавив код для загрузки рекламы, также добавьте следующие функции для формирования рекламного объявления:

func nativeBannerAdDidLoad(_ nativeBannerAd: FBNativeBannerAd) {
  
  // 1. If there is an existing valid ad, unregister the view
  if let previousAd = self.nativeBannerAd, previousAd.isAdValid {
    previousAd.unregisterView()
  }
  
  // 2. Retain a reference to the ad object
  self.nativeBannerAd = nativeBannerAd
  
  // 3. Instantiate the ad view
  let adView = FBNativeBannerAdView(nativeBannerAd: nativeBannerAd, with: .genericHeight100)
  view.addSubview(adView)

  // 4. Set the frame of the ad view (either manually or using constraints)
  let size = view.bounds.size
  let xOffset: CGFloat = size.width / 2 - 160
  let yOffset: CGFloat = (size.height > size.width) ? 100 : 20
  adView.frame = CGRect(x: xOffset, y: yOffset, width: 320, height: 300)
}
- (void)nativeBannerAdDidLoad:(FBNativeBannerAd *)nativeBannerAd
{
  if (self.nativeBannerAd && self.nativeBannerAd.isAdValid) {
    [self.nativeBannerAd unregisterView];
  }
  
  self.nativeBannerAd = nativeBannerAd;
  
  FBNativeBannerAdView *adView = [FBNativeBannerAdView nativeBannerAdViewWithNativeBannerAd:self.nativeBannerAd
                                                                                   withType:FBNativeBannerAdViewTypeGenericHeight100];
  
  [self.view addSubview:adView];
  
  CGSize size = self.view.bounds.size;
  CGFloat xOffset = size.width / 2 - 160;
  CGFloat yOffset = (size.height > size.width) ? 100 : 20;
  adView.frame = CGRectMake(xOffset, yOffset, 320, 100);
}

Существует два шаблона пользовательских форматов рекламы:

Тип шаблона представления Высота Ширина Добавляемые атрибуты

FBNativeBannerAdView TypeGenericHeight100

100 точек

Адаптируемая ширина

Значок, заголовок, контекст и кнопка призыва к действию

FBNativeBannerAdView TypeGenericHeight120

120 точек

Адаптируемая ширина

Значок, заголовок, контекст, описание и кнопка призыва к действию

Шаг 2. Дальнейшая настройка

В нативном пользовательском шаблоне можно настроить следующие элементы:

  • высота;
  • ширина;
  • цвет фона;
  • цвет заголовка;
  • шрифт заголовка;
  • цвет описания;
  • шрифт описания;
  • цвет кнопки;
  • цвет заголовка кнопки;
  • шрифт заголовка кнопки;
  • цвет границы кнопки.

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

Для отображения этих элементов необходимо создать объект FBNativeAdViewAttributes и передать загруженную нативную рекламу:

• Пример для нативной рекламы

func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
  
  // Instantiate the attributes to customize the view
  let attributes = FBNativeAdViewAttributes()
  attributes.backgroundColor = UIColor(white: 0.9, alpha: 1)
  attributes.buttonColor = UIColor(red: 66 / 255.0, green: 108 / 255.0, blue: 173 / 255.0, alpha: 1)
  attributes.buttonTitleColor = .white

  // Feed the attributes to the view
  let adView = FBNativeAdView(nativeAd: nativeAd, with: .genericHeight300, with: attributes)
  
  ... Rest of implementation ...
}
- (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
{
  // Instantiate the attributes to customize the view
  FBNativeAdViewAttributes *attributes = [[FBNativeAdViewAttributes alloc] init];

  attributes.backgroundColor = [UIColor colorWithRed:0.9 green:0.9 blue:0.9 alpha:1];
  attributes.buttonColor = [UIColor colorWithRed:66/255.0 green:108/255.0 blue:173/255.0 alpha:1];
  attributes.buttonTitleColor = [UIColor whiteColor];

  // Feed the attributes to the view
  FBNativeAdView *adView = [FBNativeAdView nativeAdViewWithNativeAd:nativeAd 
      withType:FBNativeAdViewTypeGenericHeight300 withAttributes:attributes];

  ... Rest of implementation ...
}

Показанный выше код выводит рекламу, которая выглядит примерно так:

• Пример для нативной баннерной рекламы

func nativeBannerAdDidLoad(_ nativeBannerAd: FBNativeBannerAd) {
  
  // Instantiate the attributes to customize the view
  let attributes = FBNativeAdViewAttributes()
  attributes.backgroundColor = UIColor(white: 0.9, alpha: 1)
  attributes.buttonColor = UIColor(red: 66 / 255.0, green: 108 / 255.0, blue: 173 / 255.0, alpha: 1)
  attributes.buttonTitleColor = .white

  // Instantiate the view and feed the attributes to the initializer
  let adView = FBNativeBannerAdView(nativeBannerAd: nativeBannerAd, with: .genericHeight100, with: attributes)
  
  ... Rest of implementation ...
}
- (void)nativeBannerAdDidLoad:(FBNativeBannerAd *)nativeAd 
{
  // Instantiate the attributes to customize the view
  FBNativeAdViewAttributes *attributes = [[FBNativeAdViewAttributes alloc] init];
  attributes.backgroundColor = [UIColor colorWithRed:0.9 green:0.9 blue:0.9 alpha:1];
  attributes.buttonColor = [UIColor colorWithRed:66/255.0 green:108/255.0 blue:173/255.0 alpha:1];
  attributes.buttonTitleColor = [UIColor whiteColor];

  // Instantiate the view and feed the attributes to the initializer
  FBNativeBannerAdView *adView = [FBNativeBannerAdView nativeBannerAdViewWithNativeBannerAd :nativeAd 
      withType:FBNativeBannerAdViewTypeGenericHeight100 withAttributes:attributes];

  ... Rest of implementation ...
}

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

  • Изучите наши примеры кода, демонстрирующие способы использования нативной рекламы. NativeAdSample является частью SDK и находится в папке FBAudienceNetwork/samples. Откройте проект в Xcode и запустите его на устройстве или в эмуляторе.