Meta Audience Network

ネイティブ広告をiOSアプリに追加する

ネイティブ広告APIを使用すると、アプリに表示する広告のエクスペリエンスをカスタマイズできます。ネイティブ広告APIを使うと、そのまま表示できる広告を受信するのではなく、広告プロパティ(タイトル、画像、コールトゥアクションなど)のグループを受信することになります。それを使って、広告が表示されるカスタムUIViewを構築する必要があります。

アプリのネイティブ広告をデザインする際は、ネイティブ広告に関するガイドに従ってください。

次のネイティブ広告配置を実装してみましょう。ネイティブ広告に次のビューを作成します。

ビュー1: 広告主のアイコン

ビュー2: 広告のタイトル

ビュー3: 広告ラベル

ビュー4: 広告主のチョイス

ビュー5: 広告メディアビュー

ビュー6: ソーシャルコンテキスト

ビュー7: 広告の本文

ビュー8: 広告のコールトゥアクションボタン


ステップ1: ストーリーボードにネイティブ広告ビューを作成する

ステップ2: ネイティブ広告を読み込んで表示する

ステップ3: コンテンツのアスペクト比を取得して自然な幅と高さを適用する方法

ステップ4:インプレッションとクリックのログ記録を確認する

ステップ5: 広告が表示されない場合のデバッグ方法

ステップ6: 自動キャッシュなしで広告を読み込む

ステップ7: 広告の統合をテストする

変更ログの既知の問題を確認する

ステップ1: ストーリーボードにネイティブ広告ビューを作成する

続行する前に、必ずAudience Networkのスタートガイドとのスタートガイドすべてに目を通しておいてください。

ネイティブ広告とバナー広告をデザインする際には、ユーザーが快適に利用できるよう「iOSレイアウトのガイドライン」に従ってください。

  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. [ビューコントローラーシーン]の横に赤色の矢印が表示されることがあります。通常これは、レイアウトに制限がないことを意味します。


    シーン内のすべてのビューオブジェクトを選択し、[レイアウトの問題を解決]アイコンをクリックして不足している制限を追加する必要があります。


  4. これで、ネイティブ広告を表示するためのUI要素がすべて作成されました。これらのUI要素をViewControllerインターフェイスで参照する必要があります。まず、ViewController.m (Swiftを使っている場合はViewController.swift)を開いてから、adUIViewをViewControllerオブジェクト内にドラッグします。名前をadUIViewにすることができます。その後、同じ操作をadIconImageView、adTitleLabel、adCoverMediaView、adSocialContext、adCallToActionButton、adOptionsView、adBodyLabel、sponsoredLabelについてもする必要があります。


  5. プロジェクトをビルドして実行します。デバイスまたはシミュレーターには空のコンテンツが次のように表示されます。

これでネイティブ広告を表示するためのすべてのUI要素が作成されました。次のステップではネイティブ広告を読み込んで、コンテンツをUI要素にバインドします。

ステップ2: ネイティブ広告を読み込んで表示する

  1. ビューコントローラーのソースファイルで、SDKをインポートし、ViewControllerがFBNativeAdDelegateプロトコルに従うものであることを宣言し、FBNativeAdインスタンス変数を追加します 
    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メソッドの中で、ネイティブ広告コンテンツを読み込むためのコードとして、以下の行を追加します 
    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です。

    この一時的なIDを実際のコードで使用しても、ユーザーは広告を受け取りません(No Fillエラーを受け取ります)。テスト後にここに戻って、一時的なIDを実際の配置IDに置き換えてください。

    実際の配置IDの生成方法については、Audience Network設定をご覧ください

  3. 次のステップで、コンテンツの準備が整ったら広告を表示します。nativeAdDidLoadデリゲートメソッドを実装するには、ViewControllerが必要になります 
    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; 
}

    4. クリック可能な領域をコントロールする

    快適な操作性とより良い結果を得るには、利用者が意図せずクリックしてしまわないよう広告のクリック可能な領域をコントロールすることをおすすめします。クリックできない余白の運用について詳しくは、Audience Network SDKポリシーをご覧ください。



  4. ビルドターゲットにデバイスを選択し、上記のコードを実行すると、次のように表示されます。



シミュレーターで広告を実行するときには、設定をテストモードに変更しないとテスト広告が表示されません。詳しくは、テストモードの使用方法に関するページをご覧ください。

ステップ3: コンテンツのアスペクト比を入手して自然な幅と高さを適用する方法

上記の例では、広告のメディアコンテンツがadCoverMediaViewに表示されており、オブジェクトタイプはFBMediaViewになっています。ここまでの手順では、FBMediaViewを使ってメディアコンテンツをFBNativeAdオブジェクトから読み込む方法を示してきました。このビューは、手動によるカバー画像の読み込みに取って代わるものです。FBMediaViewの作成時に、その幅と高さはストーリーボードで設定された自動レイアウトの制約によって決まるか、ハードコーディングすることができます。しかし、ビューのこの幅と高さは、後にダウンロードされる広告の実際のカバー画像に適合しないかもしれません。これを修正するには、コンテンツのアスペクト比を取得し、自然な幅と高さを適用します。この方法を示す例を以下に示します。

  1. ビューコントローラーがFBMediaViewDelegateプロトコルを実装することを宣言します 
    class ViewController: UIViewController, FBNativeAdDelegate, FBMediaViewDelegate {
  ...
}
    @interface ViewController : UIViewController <FBNativeAdDelegate, FBMediaViewDelegate>
...
@end

  2. ネイティブ広告の読み込み時に、FBMediaViewオブジェクトのデリゲートをビューコントローラーとして設定します 
    func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
  adCoverMediaView.delegate = self
}
    - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
{
  self.adCoverMediaView.delegate = self;
}

  3. ビューコントローラーにmediaViewDidLoadメソッドを実装します 
    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が返されます。この値は、メディアビューの読み込み後に有効になります。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. いかなる場合もメディアキャッシングはデフォルトのオンのままにしておくことを強く推奨します。しかし、このデフォルト設定をオーバーライドすることもできます。デフォルトのメディアキャッシュ設定をオーバーライドすることにした場合は、十分注意してください 
    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. まず、ネイティブ広告のすべてのメディアを、手動でダウンロードする必要があります 
    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. 次に、mediaViewDidLoadコールバックの後でregisterViewForInteractionのみを呼び出して広告を表示してください。インプレッションの対象となるには、すべてのメディアが読み込まれ表示される必要があります 
    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; 
}

次のステップ

  • ネイティブ広告の使い方を示すコードサンプルを読み、研究してください。SDKの一部として提供されるNativeAdSampleは、FBAudienceNetwork/samplesフォルダにあります。プロジェクトをXcodeで開き、デバイス上またはシミュレータ上で実行してください。

その他の情報

スタートガイド

Audience Networkの利用を開始するためのテクニカルガイド

コードサンプル

Audience Network広告の統合のサンプル

よくある質問

Audience Networkのよくある質問

ネイティブ広告テンプレート

ネイティブ広告の統合に使用できる、よりシンプルなアプローチ