ネイティブ アドバンス

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

ネイティブ広告が読み込まれると、アプリは GADAdLoaderDelegate プロトコル メッセージのいずれかを介してネイティブ広告オブジェクトを受け取ります。その後、アプリが広告を表示する役割を担います（ただし、すぐに表示しなければならないわけではありません）。システム定義の広告フォーマットを簡単に表示できるようにするため、SDK には便利なリソースがいくつか用意されています。

GADNativeAdView

GADNativeAd には、対応する「広告ビュー」クラス GADNativeAdView があります。この広告ビュークラスは、パブリッシャーが広告を表示するために使用する UIView です。たとえば、1 つの GADNativeAdView で、GADNativeAd の 1 つのインスタンスを表示できます。その広告のアセットを表示するために使用される各 UIView オブジェクトは、その GADNativeAdView オブジェクトのサブビューである必要があります。

たとえば、UITableView 内に広告を表示する場合、セルの 1 つのビュー階層は次のようになります。

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

  • クリックを記録しています。
  • インプレッションの記録（画面に最初のピクセルが表示されたとき）。
  • AdChoices オーバーレイの表示。

AdChoices オーバーレイ

間接販売のネイティブ広告（バックフィル、または Ad Exchange や AdSense を通じて配信）の場合、 Ad Manager SDK によって AdChoices オーバーレイが追加されます。 AdChoices ロゴが自動的に挿入されるため、ネイティブ広告ビューのご希望の隅にスペースを空けておいてください。また、AdChoices オーバーレイは、アイコンが見やすいコンテンツに配置してください。オーバーレイのデザインと機能について詳しくは、プログラマティック ネイティブ広告の実装ガイドラインをご覧ください。

プログラマティック ネイティブ広告の帰属表示

プログラマティック ネイティブ広告を表示する場合は、広告の帰属表示を表示して、ビューが広告であることを示す必要があります。 ポリシー ガイドラインについては、こちらのページをご覧ください。

サンプルコード

xib ファイルから動的に読み込まれるビューを使ってネイティブ広告を表示する方法を見ていきましょう。これは、複数の形式をリクエストするように構成された GADAdLoaders を使用する場合に非常に便利なアプローチです。

UIView のレイアウト

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

画像の右上にある [Custom Class] の値を確認します。次のように設定します。

GADNativeAdView。これは、GADNativeAd の表示に使用される広告ビュークラスです。

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

アウトレットをビューにリンクする

ビューが配置され、適切な広告ビュークラスをレイアウトに割り当てたら、広告ビューのアセット アウトレットを、作成した UIViews にリンクします。広告ビューのアセット アウトレットを、広告用に作成された UIViews にリンクする方法は次のとおりです。

アウトレット パネルでは、GADNativeAdView のアウトレットが Interface Builder に配置された UIViews にリンクされています。これにより、どの UIView がどのアセットを表示するかが SDK に通知されます。 これらのアウトレットは、広告内でクリック可能なビューを表していることも重要です。

広告を表示する

レイアウトが完了し、アウトレットがリンクされたら、最後のステップとして、読み込まれた広告を表示するコードをアプリに追加します。上で定義したビューに広告を表示する方法を以下に示します。

Swift

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

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

  // 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 heightConstraint = NSLayoutConstraint(
      item: mediaView,
      attribute: .height,
      relatedBy: .equal,
      toItem: mediaView,
      attribute: .width,
      multiplier: CGFloat(1 / nativeAd.mediaContent.aspectRatio),
      constant: 0)
    heightConstraint.isActive = true
  }

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

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

Objective-C

#pragma mark GADNativeAdLoaderDelegate implementation

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

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

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

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

GitHub リポジトリには、Swift と Objective-C の両方で書かれたネイティブ カスタム レンダリング広告 の完全な実装例が掲載されています。

Google アド マネージャーのカスタム レンダリングのサンプルをダウンロード

GADMediaView

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

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

カスタム レンダリングの例 （Swift | Objective-C） GADNativeAd の GADMediaContent を使用して GADMediaView にネイティブ広告アセットを実装する方法のスニペットを次に示します。

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

ネイティブ広告ビューのインターフェース ビルダー ファイルで、ビューのカスタムクラスが GADMediaView に設定され、mediaView アウトレットに接続されていることを確認します。

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

GADMediaView クラスは、画像を表示する際に UIView contentMode プロパティに従います。GADMediaView で画像のスケーリング方法を変更する場合は、対応する UIViewContentMode を GADMediaView の contentMode プロパティに設定します。

たとえば、画像が表示されている（広告に動画がない）ときに GADMediaView を埋めるには、次のようにします。

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

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

  • 動画アセットが利用可能な場合は、バッファリングされ、GADMediaView 内で再生が開始されます。動画アセットが利用可能かどうかは、hasVideoContent で確認できます。

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

次のステップ

詳しくは、ユーザーのプライバシーをご覧ください。