ネイティブ アドバンス広告

システム定義のネイティブ広告フォーマットの表示

ネイティブ広告の読み込み時に、アプリは GADAdLoaderDelegate プロトコルのいずれかのメッセージを介してネイティブ広告のオブジェクトを受け取ります。次に、アプリは広告の表示処理を行います(ただし、すぐに表示する必要があるとは限りません)。システム定義の広告フォーマットを簡単に表示できるようにするため、SDK には便利なリソースが用意されています。

GADUnifiedNativeAdView

GADUnifiedNativeAd には、対応する「広告ビュー」クラスの GADUnifiedNativeAdView があります。この広告ビュークラスは UIView で、広告を表示するにはこれを使用する必要があります。たとえば、1 つの GADUnifiedNativeAdViewGADUnifiedNativeAd のインスタンスを 1 つ表示できます。その広告のアセットの表示に使用する UIView オブジェクトは、いずれも GADUnifiedNativeAdView オブジェクトのサブビューである必要があります。

たとえば、UITableView に広告を表示している場合は、1 つのセルのビュー階層を次のように表すことができます。

GADUnifiedNativeAdView クラスには、個々のアセットのビューを登録するための IBOutlets と、GADUnifiedNativeAd オブジェクトそのものを登録するためのメソッドも用意されています。この方法でビューを登録することで、SDK で次のようなタスクを自動的に処理できます。

  • クリックの記録
  • インプレッションの記録(画面に最初のピクセルが表示されたとき)
  • AdChoices オーバーレイの表示

AdChoices オーバーレイ

間接販売のネイティブ広告(AdMob バックフィル、Ad Exchange、AdSense 経由で配信)の場合は、SDK によって AdChoices オーバーレイが追加されます。AdChoices ロゴは自動的に挿入されるため、ネイティブ広告ビューでご希望の隅のスペースを空けておいてください。また、AdChoices オーバーレイのアイコンは、その他のコンテンツと簡単に見分けることができるようにしてください。オーバーレイのデザインや機能について詳しくは、プログラマティック ネイティブ広告の実装に関するガイドラインをご確認ください。

広告の帰属表示

プログラマティック ネイティブ広告を表示する場合は、広告の帰属表示を行って、そのビューが広告であることを示す必要があります。

サンプルコード

次に、xib ファイルから動的に読み込まれるビューを使用してネイティブ広告を表示する方法について説明します。複数のフォーマットをリクエストするように設定された GADAdLoaders を使用する場合は、この方法が非常に役立ちます。

UIViews のレイアウト

まず、ネイティブ広告アセットを表示する UIViews のレイアウトを指定します。これは、他の xib ファイルを作成する場合と同様に、Interface Builder で行います。ネイティブ広告のレイアウトは次のようになります。

画像の右上にあるカスタムクラス値を見ると、

GADUnifiedNativeAdView に設定されています。これは、GADUnifiedNativeAd の表示に使用される広告ビュークラスです。

また、広告に動画や画像を表示するために使用される GADMediaView に対して、カスタムクラスを設定する必要もあります。

アウトレットのビューへのリンク

ビューを配置し、レイアウトに適切な広告ビュークラスを割り当てたら、作成済みの UIViews に広告ビューのアセット アウトレットをリンクします。作成した UIViews に広告ビューのアセット アウトレットをリンクする方法を次に示します。

アウトレット パネルで、GADUnifiedNativeAdView のアウトレットが、インターフェース ビルダーに配置されている UIViews にリンクされています。これにより、どの UIView でどのアセットを表示するかが SDK に指示されます。また、これらのアウトレットが、広告でクリック可能なビューを表しているという点も重要です。

広告の表示

レイアウトが完成してアウトレットをリンクしたら、最後に、読み込まれた広告を表示するためのコードをアプリに追加します。上で定義したビューに広告を表示するメソッドを次に示します。

Swift

// Mark: - GADUnifiedNativeAdLoaderDelegate
func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADUnifiedNativeAd) {
  print("Received unified native ad: \(nativeAd)")
  refreshAdButton.isEnabled = true
  // Create and place ad in view hierarchy.
  let nibView = Bundle.main.loadNibNamed("UnifiedNativeAdView", owner: nil, options: nil)?.first
  guard let nativeAdView = nibView as? GADUnifiedNativeAdView else {
    return
  }
  setAdView(nativeAdView)

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  nativeAdView.nativeAd = nativeAd

  // Set the mediaContent on the GADMediaView to populate it with available
  // video/image asset.
  nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

  // Populate the native ad view with the native ad assets.
  // The headline is guaranteed to be present in every native ad.
  (nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline

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

Objective-C

#pragma mark GADUnifiedNativeAdLoaderDelegate implementation

- (void)adLoader:(GADAdLoader *)adLoader didReceiveUnifiedNativeAd:(GADUnifiedNativeAd *)nativeAd {
  NSLog(@"Received unified native ad: %@", nativeAd);
  self.refreshButton.enabled = YES;

  // Create and place ad in view hierarchy.
  GADUnifiedNativeAdView *nativeAdView =
      [[NSBundle mainBundle] loadNibNamed:@"UnifiedNativeAdView" owner:nil options:nil].firstObject;
  [self setAdView:nativeAdView];

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  nativeAdView.nativeAd = nativeAd;

  // Set the mediaContent on the GADMediaView to populate it with available
  // video/image asset.
  nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

  // Populate the native ad view with the native ad assets.
  // The headline is guaranteed to be present in every native ad.
  ((UILabel *)nativeAdView.headlineView).text = nativeAd.headline;

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

GitHub レポジトリでは、ネイティブ アドバンス広告の完全な実装サンプルを、Swift と Objective-C の両方でご覧いただけます。

ネイティブ アドバンスのサンプルをダウンロード

GADMediaView

画像アセットと動画アセットは、GADMediaView を介してユーザーに表示されます。このビューは xib ファイルで定義されるか動的に構築される UIView であり、他のアセットビューの場合と同様に GADNativeAdView のビュー階層内に配置する必要があります。

他のすべてのアセットビューと同様に、メディアビューのコンテンツも設定する必要があります。コンテンツの設定は、GADMediaViewmediaContent プロパティを使って行います。GADUnifiedNativeAdmediaContent プロパティには、GADMediaView に渡すことのできるメディア コンテンツが含まれています。

ネイティブ アドバンスのサンプルのスニペットを次に示します(Swift の場合 | Objective-C の場合)。このスニペットは、GADUnifiedNativeAdGADMediaContent を使って GADMediaView にネイティブ広告アセットを設定する方法を示しています。

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

ネイティブ広告ビューのインターフェース ビルダー ファイルで、そのビューのカスタムクラスが GADMediaView に設定され、mediaView アウトレットに関連付けられているようにしてください。

画像コンテンツ モードの変更

GADMediaView クラスでは、画像を表示する際に UIViewcontentMode プロパティが考慮されます。GADMediaView で表示する画像のスケーリングを変更したい場合は、GADMediaViewcontentMode プロパティで対応する UIViewContentMode を設定します。

たとえば、画像を GADMediaView のビューいっぱいに表示するには、次のように設定します(広告に動画がない場合)。

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

GADMediaContent クラスは、GADMediaView クラスを使用して表示されるネイティブ広告のメディア コンテンツに関連するデータを保持します。GADMediaView mediaContent プロパティに設定すると、次の操作が行われます。

  • 動画アセットがある場合は、その動画アセットがバッファリングされ、GADMediaView 内で再生されます。動画アセットの有無は、hasVideoContent で確認できます。

  • 広告に動画アセットが含まれていない場合は、最初の画像アセットがダウンロードされて GADMediaView 内に配置されます。

メディア コンテンツ クラスには、以下のプロパティがあります。

aspectRatio
動画または画像のアスペクト比(幅 / 高さ)を表します。利用可能なメディア コンテンツがない場合は 0(ゼロ)になります。
mainImage
デフォルトでは、mainImage は最初にダウンロードされる画像アセットです。disableImageLoading が使用されている場合、mainImagenil になるため、手動でダウンロードした画像をこのプロパティに設定する必要があります。この画像が使用されるのは、使用できる動画アセットがない場合に限られます。

ネイティブ動画

一部のネイティブ広告には、画像、文字、数値のほか動画アセットが含まれています。含まれている場合でも、必ずしもアプリに動画を表示しなくてもかまいません。

GADVideoController

GADVideoController クラスは、動画の再生をコントロールし、動画再生のコールバックを取得するために使用します。

GADUnifiedNativeAd には、各広告の GADVideoController を表示する videoController プロパティがあります。

Swift

let videoController = myUnifiedNativeAd.videoController

Objective-C

GADVideoController *videoController = myUnifiedNativeAd.videoController

広告に動画アセットが含まれていなくても、このプロパティが nil になることはありません。

GADVideoControllerGADVideoControllerDelegate を設定して、動画アセットのライフサイクルで生じたイベントが通知されるようにすることもできます。GADVideoControllerDelegate には、動画の再生が完了したときに送信されるオプションのメッセージ videoControllerDidEndVideoPlayback が 1 つ用意されています。

次の例は、GADVideoControllerDelegate を使って、再生が終了したタイミングを知る方法を示しています。

Swift

class ViewController: UIViewController, GADUnifiedNativeAdLoaderDelegate,
    GADVideoControllerDelegate {

  func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd:
                GADUnifiedNativeAd) {
    ...
    nativeAd.mediaContent.videoController.delegate = self
    ...
  }
  ...
  func videoControllerDidEndVideoPlayback(_ videoController: Any!) {
    // Here apps can take action knowing video playback is finished.
    // This is handy for things like unmuting audio, and so on.
  }
}

Objective-C

@interface ViewController () <GADUnifiedNativeAdLoaderDelegate,
        GADVideoControllerDelegate>

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveNativeAd:(GADUnifiedNativeAd) *)nativeAd {
  ...
  nativeAd.mediaContent.videoController.delegate = self;
  ...
}
...

- (void)videoControllerDidEndVideoPlayback:(GADVideoController *)videoController {
  // Here apps can take action knowing video playback is finished.
  // This is handy for things like unmuting audio, and so on.
}

@end

ネイティブ広告の表示に関する詳しいガイドラインについては、ネイティブ広告のポリシーとガイドラインをご確認ください。

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。