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

ネイティブアドバンス

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

ネイティブ広告が読み込まれると、アプリは GADAdLoaderDelegate プロトコルメッセージ。この場合、アプリはユーザーの広告を表示する（必ずしもすぐに行う必要はありません）。システム定義の広告フォーマットを簡単に表示できるようにするため、SDK には便利ないくつかのツールが用意されています。説明します。

GADNativeAdView

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

たとえば、UITableView で広告を表示している場合、いずれかのセルのビュー階層は次のようになります。

GADNativeAdView クラスには、登録に使用する IBOutlets も用意されています。ビューと、そのアセットを登録するメソッドを 1 つ GADNativeAd 渡されます。この方法でビューを登録すると、SDK が自動的に次のようなタスクを処理します。

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

AdChoices オーバーレイ

間接的なネイティブ広告（AdMob を通じて配信）の場合バックフィル、Ad Exchange、AdSense など）を使用している場合、AdChoices オーバーレイは説明します。希望するスペースにスペースを残す角自動的に挿入される AdChoices ロゴのネイティブ広告ビューの視認性の高さです。また、 AdChoices オーバーレイがコンテンツ上に配置され、アイコンを表示できることを確認します。見やすくします。オーバーレイの外観と機能について詳しくは、プログラマティックネイティブ広告の実装ガイドラインをご覧ください。

広告の帰属表示

プログラマティックネイティブ広告を表示する際には、広告の帰属表示をその視聴が広告であることを示す。

サンプルコード

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

UIViews をレイアウトする

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

画像の右上にあるカスタムクラス値に注目してください。設定:

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

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

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

ビューを設定し、適切な広告ビュークラスを広告ビューのアセットアウトレットを、作成した UIViews にリンクします。ここでは、広告ビューのアセットアウトレットを、作成された UIViews にリンクする方法を示します。 :

アウトレットパネルで GADNativeAdView のコンセントがリンクされていますインターフェースビルダーに設定された UIViews。これにより、 SDK はどの UIView がどのアセットを表示するかを判断します。また、これらのアウトレットは広告クリック可能なものを指定します

広告を表示する

レイアウトが完了し、コンセントをリンクしたら、次のコードを追加します。追加すると、広告が読み込まれた後に広告を表示します。

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

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

SwiftUI

ビューモデルを作成する

ネイティブ広告を読み込み、ネイティブ広告データを公開するビューモデルを作成する変更点:

import GoogleMobileAds

class NativeAdViewModel: NSObject, ObservableObject, GADNativeAdLoaderDelegate {
  @Published var nativeAd: GADNativeAd?
  private var adLoader: GADAdLoader!

  func refreshAd() {
    adLoader = GADAdLoader(
      adUnitID: "ca-app-pub-3940256099942544/3986624511",
      // The UIViewController parameter is optional.
      rootViewController: nil,
      adTypes: [.native], options: nil)
    adLoader.delegate = self
    adLoader.load(GADRequest())
  }

  func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) {
    // Native ad data changes are published to its subscribers.
    self.nativeAd = nativeAd
    nativeAd.delegate = self
  }

  func adLoader(_ adLoader: GADAdLoader, didFailToReceiveAdWithError error: Error) {
    print("\(adLoader) failed with error: \(error.localizedDescription)")
  }
}NativeAdViewModel.swift

UIViewRepresentable を作成する

作成: UIViewRepresentable GADNativeView について学び、ViewModel でデータの変更にサブスクライブします。クラス:

private struct NativeAdView: UIViewRepresentable {
  typealias UIViewType = GADNativeAdView

  // Observer to update the UIView when the native ad value changes.
  @ObservedObject var nativeViewModel: NativeAdViewModel

  func makeUIView(context: Context) -> GADNativeAdView {
    return
      Bundle.main.loadNibNamed(
        "NativeAdView",
        owner: nil,
        options: nil)?.first as! GADNativeAdView
  }

  func updateUIView(_ nativeAdView: GADNativeAdView, context: Context) {
    guard let nativeAd = nativeViewModel.nativeAd else { return }

    // Each UI property is configurable using your native ad.
    (nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline

    nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

    (nativeAdView.bodyView as? UILabel)?.text = nativeAd.body

    (nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image

    (nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars(from: nativeAd.starRating)

    (nativeAdView.storeView as? UILabel)?.text = nativeAd.store

    (nativeAdView.priceView as? UILabel)?.text = nativeAd.price

    (nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser

    (nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal)

    // 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
  }NativeContentView.swift

ビューをビュー階層に追加する

次のコードは、UIViewRepresentable をビューに追加する方法を示しています。階層:

struct NativeContentView: View {
  // Single source of truth for the native ad data.
  @StateObject private var nativeViewModel = NativeAdViewModel()

  var body: some View {
    ScrollView {
      VStack(spacing: 20) {
        NativeAdView(nativeViewModel: nativeViewModel)  // Updates when the native ad data changes.
          .frame(minHeight: 300)  // minHeight determined from xib.NativeContentView.swift

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 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、SwiftUI、およびそれぞれの GitHub リンクに従って Objective-C を選択しましょう。

Swift ネイティブアドバンスの例 SwiftUI のネイティブ広告の例 Objective-C ネイティブアドバンスの例

GADMediaView

画像アセットと動画アセットは、 GADMediaView。これは、xib ファイルで定義することも、動的に構築することもできる UIView です。これは、GADNativeAdView のビュー階層内に配置する必要があります。アセットビューにのみ影響します。

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

これはネイティブアドバンスの例（Swift | Objective-C）ネイティブ広告のアセットを GADMediaView に入力する方法を、 GADNativeAd から GADMediaContent:

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 オーバーレイ

広告の帰属表示

サンプルコード

UIViews をレイアウトする

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

広告を表示する

Swift

SwiftUI

ビューモデルを作成する

UIViewRepresentable を作成する

ビューをビュー階層に追加する

Objective-C

GitHub 上のサンプル全体

GADMediaView

Swift

Objective-C

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

Swift

Objective-C

GADMediaContent

次のステップ

ネイティブアドバンス