このページは Cloud Translation API によって翻訳されました。

ネイティブアドバンス

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

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

GADNativeAdView

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

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

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

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

AdChoices オーバーレイ

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

ネイティブ広告のプログラマティック配信による広告の帰属表示

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

サンプルコード

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

UIView のレイアウト

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

画像の右上にある [Custom Class] 値に注目してください。次に設定されている。

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

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

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

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

アウトレットパネルで、GADNativeAdView のアウトレットがインターフェースビルダーでレイアウトされた 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 内に配置されます。

次のステップ

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

ネイティブ アドバンス

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

GADNativeAdView

AdChoices オーバーレイ

ネイティブ広告のプログラマティック配信による広告の帰属表示

サンプルコード

UIView のレイアウト

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

広告の表示

Swift

Objective-C

GADMediaView

Swift

Objective-C

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

Swift

Objective-C

GADMediaContent

次のステップ

ネイティブアドバンス

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