ネイティブ広告(詳細)

この機能は現在、ベータ版の限定リリースとして提供しています。ベータ版への参加をご希望の方は、アカウント マネージャーにお問い合わせください。この機能は、ベータ版提供の終了時にすべてのパブリッシャーにご利用いただけるようになる予定です。

このガイドでは、Google Mobile Ads SDK を使用して iOS アプリで AdMob のネイティブ アドバンス広告を実装する方法と、その過程で考慮すべき重要なことをいくつか説明します。

事前準備

このガイドでは、Google Mobile Ads SDK の実践的知識があることを前提としています。 予備知識がない場合は、スタートガイドをご覧ください。

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

ネイティブ アドバンス広告は、プラットフォーム ネイティブの UI コンポーネントを使用して広告アセットを表示するフォーマットです。 この広告は、ストーリーボードで既に使用しているものと同じクラスを使用して表示され、アプリのビジュアル デザインに一致するようにフォーマットできます。 広告が読み込まれると、アプリはその広告のアセットを格納するオブジェクトを受け取り、(SDK ではなく)自らがそれを表示する役割を担います。

ネイティブ広告のシステム定義のフォーマットは 2 種類あります。アプリ インストールとコンテンツです。 アプリ インストール広告は GADNativeAppInstallAd で表され、コンテンツ広告は GADNativeContentAd で表されます。 クラスのインスタンスには、ネイティブ広告のアセットが格納されます。

広告を読み込む

ネイティブ アドバンス広告は、GADAdLoader オブジェクトを介して読み込まれます。このオブジェクトは、GADAdLoaderDelegate プロトコルに従ってメッセージをデリゲートに送信します。

GADAdLoader の初期化

次のコードは、アプリ インストール広告用に GADAdLoader を初期化する方法を示します。

Objective-C

self.adLoader = [[GADAdLoader alloc]
      initWithAdUnitID:@"ca-app-pub-3940256099942544/3986624511"
    rootViewController:rootViewController
               adTypes:@[ ... ad type constants ... ]
               options:@[ ... ad loader options objects ... ]];
self.adLoader.delegate = self;

Swift

adLoader = GADAdLoader(adUnitID: "ca-app-pub-3940256099942544/3986624511",
    rootViewController: self,
    adTypes: [ ... ad type constants ... ],
    options: [ ... ad loader options objects ... ])
adLoader.delegate = self

adTypes 配列パラメータを使用すると、アプリで、リクエストするネイティブ フォーマットを指定する定数を渡すことができます。 この配列は、以下いずれかまたは両方の定数を格納している必要があります。

  • kGADAdLoaderAdTypeNativeAppInstall
  • kGADAdLoaderAdTypeNativeContent

広告のリクエスト

GADAdLoader が初期化されたら、以下のように、その loadRequest: メソッドを呼び出して広告をリクエストします。

Objective-C

[self.adLoader loadRequest:[GADRequest request]];

Swift

adLoader.load(GADRequest())

loadRequest:GADAdLoader メソッドは、バナーやインタースティシャルと同じ GADRequest オブジェクトを受け入れます。 リクエスト オブジェクトを使用して、他の広告タイプの場合とまったく同じ方法でターゲット設定情報を追加できます。

1 つの GADAdLoader で複数のリクエストを行うことができますが、これは、一度に 1 つずつ行う場合に限られます。GADAdLoader を再利用する場合、各リクエストが完了するまで必ず待機してから、loadRequest: を再度呼び出して次のリクエストを開始してください。 複数の広告を並行してリクエストする必要がある場合はいつでも、複数の GADAdLoader オブジェクトを使用できます。

GADAdLoaderDelegate プロトコル

リクエストする広告フォーマットごとに、広告ローダーのデリゲートが、対応するプロトコルを実装する必要があります。

GADNativeAppInstallAdLoaderDelegate

このプロトコルでは、アプリ インストール広告が読み込まれたときにデリゲートに送信されるメッセージを含めます。

Objective-C

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveNativeAppInstallAd:(GADNativeAppInstallAd *)nativeAppInstallAd;

Swift

public func adLoader(_ adLoader: GADAdLoader,
    didReceive nativeAppInstallAd: GADNativeAppInstallAd)

GADNativeContentAdLoaderDelegate

このプロトコルは、コンテンツ広告が読み込まれたときに送信されるメッセージを定義します。

Objective-C

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveNativeContentAd:(GADNativeContentAd *)nativeContentAd;

Swift

public func adLoader(_ adLoader: GADAdLoader,
    didReceive nativeContentAd: GADNativeContentAd)

失敗したリクエストの処理

上記の 2 つのプロトコルは、(広告の読み込みに失敗したときに送信されるメッセージを定義する)GADAdLoaderDelegate プロトコルを拡張します。

Objective-C

- (void)adLoader:(GADAdLoader *)adLoader
    didFailToReceiveAdWithError:(GADRequestError *)error;

Swift

public func adLoader(_ adLoader: GADAdLoader,
    didFailToReceiveAdWithError error: GADRequestError)

GADRequestError オブジェクトを使用して、エラーの原因を特定できます。

広告のオプション

上記の GADAdLoader の作成で含まれる最後のパラメータは、以下のように、オブジェクトのオプション配列です。

Objective-C

self.adLoader = [[GADAdLoader alloc]
      initWithAdUnitID:@"/6499/example/native"
    rootViewController:rootViewController
               adTypes:@[ ... ad type constants ... ]
               options:@[ ... ad loader options objects ... ]];

Swift

adLoader =
    GADAdLoader(adUnitID: "/6499/example/native",
    rootViewController: self,
    adTypes: [ ... ad type constants ... ],
    options: [ ... ad loader options objects ... ])

GADNativeAdImageAdLoaderOptions には、ネイティブ アドバンス広告内の画像に関連するプロパティが含まれます。 アプリは、初期化中に GADNativeAdImageAdLoaderOptions オブジェクトを作成し、そのプロパティを設定し、渡すことで、GADAdLoader がネイティブ アドバンス広告の画像アセットを処理する方法を制御できます。

GADNativeAdImageAdLoaderOptions には、以下のプロパティがあります。

disableImageLoading - 広告の画像アセットは、GADNativeAdImage のインスタンス経由で返されます。GADNativeAdImage は、image プロパティと imageURL プロパティを格納します。disableImageLoading が false(デフォルト)に設定されている場合、SDK によって画像アセットが自動的にフェッチされ、imageimageURL の両方のプロパティが取り込まれます。true に設定すると、imageURL のみが取り込まれるため、実際の画像を自由にダウンロードできます。

preferredImageOrientation - クリエイティブの中には、さまざまな端末の方向に合わせて複数の画像を使用できるものがあります。 アプリでは、次の画像の向きの定数のいずれかにプロパティを設定して、特定の向きの画像をリクエストできます。

  • GADNativeAdImageAdLoaderOptionsOrientationAny
  • GADNativeAdImageAdLoaderOptionsOrientationLandscape
  • GADNativeAdImageAdLoaderOptionsOrientationPortrait

このメソッドが呼び出されない場合、デフォルト値 GADNativeAdImageAdLoaderOptionsOrientationAny が使用されます。

shouldRequestMultipleImages - 画像アセットの中には、1 つの画像ではなく複数の画像を含むものがあります。 この値を true に設定すると、アセットが複数の画像を含んでいる場合、すべての画像をアプリで表示する準備ができていることを示します。 アプリで false(デフォルト)を設定すると、複数の画像を含むアセットの場合に最初の画像のみを提供するよう SDK に指示します。

GADAdLoader の初期化時に GADAdLoaderOptions オブジェクトが渡されない場合、各オプションのデフォルト値が使用されます。

GADNativeAdViewOptions

GADNativeAdViewAdOptions には、preferredAdChoicesPosition プロパティが含まれます。パブリッシャーはこれを使用して、AdChoices アイコンの位置を指定できます。このアイコンは広告の任意の隅に表示することができ、デフォルト値は GADAdChoicesPositionTopRightCorner です。

以下は、広告の左上隅に AdChoices アイコンを配置する方法を示す例です。

Objective-C

GADNativeAdViewAdOptions *adViewOptions = [[GADNativeAdViewAdOptions alloc] init];
adViewOptions.preferredAdChoicesPosition = GADAdChoicesPositionTopLeftCorner;
self.adLoader = [[GADAdLoader alloc]
      initWithAdUnitID:@"ca-app-pub-3940256099942544/3986624511"
    rootViewController:self
               adTypes:@[ kGADAdLoaderAdTypeNativeAppInstall, kGADAdLoaderAdTypeNativeContent ]
               options:@[ adViewOptions ]];

Swift

let adViewOptions = GADNativeAdViewAdOptions()
adViewOptions.preferredAdChoicesPosition = .topLeftCorner
adLoader = GADAdLoader(adUnitID: "ca-app-pub-3940256099942544/3986624511",
    rootViewController: self,
    adTypes: [ kGADAdLoaderAdTypeNativeAppInstall, kGADAdLoaderAdTypeNativeContent],
    options: [ adViewOptions ])

いつ広告をリクエストするか

ネイティブ アドバンス広告を表示するアプリでは、広告を実際に表示する前に、広告を自由にリクエストできます。 多くの場合、そうすることがおすすめです。たとえば、広告が混在している状態でアイテムのリストを表示するアプリは、ユーザーがビューをスクロールしてはじめて表示されるものもあれば、まったく表示されないものもある可能性もあることを考慮しながら、リスト全部の広告を読み込むことができます。

広告のプリフェッチは便利な手法ですが、表示されない古い広告を長時間保持しないようにしてください。 1 時間以上表示しないで保持されているネイティブ広告オブジェクトを破棄し、新規リクエストによる新しい広告で置き換えるようにします。

広告の表示

広告が読み込まれると、アプリはいずれかの GADAdLoaderDelegate プロトコル メッセージを経由して広告オブジェクトを受け取ります。 この後、広告を表示するのはアプリの役割ですが、直ちに表示する必要があるわけではありません。 システム定義の広告フォーマットを表示しやすくするために、SDK では、有用なリソースをいくつか提供しています。

広告ビューのクラス

システム定義のフォーマットごとに、対応する「広告ビュー」のクラス(アプリ インストール広告用の GADNativeAppInstallAdView とコンテンツ広告用の GADNativeContentAdView)があります。 これらの広告ビューのクラスは、対応するフォーマットの広告を表示するために使用する必要がある UIViews です。 たとえば、1 つの GADNativeAppInstallAdView では、GADNativeAppInstallAd の 1 つのインスタンスを表示できます。 広告のアセットを表示するために使用する UIViews はそれぞれ、GADNativeAppInstallAdView オブジェクトの子である必要があります。

たとえば、UITableView にアプリ インストール広告を表示する場合、セルの 1 つのビュー階層は次のようになることがあります。

これらの広告ビューのクラスは、個別のアセットに使用されるビューを登録するために使われる IBOutlets と、GADNativeAd オブジェクト自体を登録するためのメソッドも提供しています。 このようにビューを登録すると、SDK で以下のようなタスクを自動的に処理できます。

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

AdChoices オーバーレイ

AdChoices オーバーレイは、SDK によって各広告ビューに追加されます。ネイティブ広告ビューの適切な場所に、自動挿入される AdChoices ロゴのためのスペースを残してください。また、AdChoices オーバーレイが見やすいことも重要です。このため、背景のカラーや画像を適切に選択してください。 オーバーレイの外観や機能の詳細については、ネイティブ バックフィルの実装に関するガイドラインをご覧ください。

サンプルコード

次に、xib ファイルから動的に読み込まれたビューを使用してネイティブ アドバンス広告を表示する方法を確認しましょう。 この手法は、複数のフォーマットをリクエストするよう設定された GADAdLoaders を使用するときに非常に役立つ可能性があります。

xib ファイルでの UIViews の配置

最初のステップは、ネイティブ広告アセットを表示するための UIViews を配置することです。 これは、他のあらゆる xib ファイルを作成する場合と同様、Interface Builder で行うことができます。 アプリ インストール広告のレイアウト例を、次に示します。

コンテンツ広告のレイアウト例を、次に示します。

両方の画像の右上にあるカスタムクラス値に注目してください。 GADNativeAppInstallAdViewGADNativeContentAdView に設定されています。これらは、GADNativeAppInstallAdGADNativeContentAd の表示に使用される広告のビュークラスです。システム定義のフォーマットの場合は、レイアウトを表示する広告フォーマットに一致する広告ビュークラスを使用します。

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

以下に、広告ビューのアセット アウトレットを、コンテンツ広告用に作成された UIViews にリンクする方法を示します。

アウトレット パネルでは、GADNativeAppInstallAdView および GADNativeContentAdView 内のアウトレットが、Interface Builder でレイアウトされた UIViews にリンクされています。 これにより、どの UIView がどのアセットを表示するかが SDK で認識されます。また、これらのアウトレットが、広告内でクリック可能なビューを表していることにも注意してください。

広告の表示

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

Objective-C

#pragma mark GADNativeAppInstallAdLoaderDelegate implementation

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveNativeAppInstallAd:(GADNativeAppInstallAd *)nativeAppInstallAd {
  // Create and place ad in view hierarchy.
  GADNativeAppInstallAdView *appInstallAdView =
      [[[NSBundle mainBundle] loadNibNamed:@"NativeAppInstallAdView"
                                     owner:nil
                                   options:nil] firstObject];
  // TODO: Make sure to add the GADNativeAppInstallAdView to the view hierarchy.

  // Associate the app install ad view with the app install ad object. This is required to make the
  // ad clickable.
  appInstallAdView.nativeAppInstallAd = nativeAppInstallAd;

  // Populate the app install ad view with the app install ad assets.
  // Some assets are guaranteed to be present in every app install ad.
  ((UILabel *)appInstallAdView.headlineView).text = nativeAppInstallAd.headline;
  ((UIImageView *)appInstallAdView.iconView).image = nativeAppInstallAd.icon.image;
  ((UILabel *)appInstallAdView.bodyView).text = nativeAppInstallAd.body;
  ((UIImageView *)appInstallAdView.imageView).image =
      ((GADNativeAdImage *)[nativeAppInstallAd.images firstObject]).image;
  [((UIButton *)appInstallAdView.callToActionView)setTitle:nativeAppInstallAd.callToAction
                                                  forState:UIControlStateNormal];

  // Other assets are not, however, and should be checked first.
  if (nativeAppInstallAd.starRating) {
    ((UIImageView *)appInstallAdView.starRatingView).image =
        [self imageForStars:nativeAppInstallAd.starRating];
    appInstallAdView.starRatingView.hidden = NO;
  } else {
    appInstallAdView.starRatingView.hidden = YES;
  }

  if (nativeAppInstallAd.store) {
    ((UILabel *)appInstallAdView.storeView).text = nativeAppInstallAd.store;
    appInstallAdView.storeView.hidden = NO;
  } else {
    appInstallAdView.storeView.hidden = YES;
  }

  if (nativeAppInstallAd.price) {
    ((UILabel *)appInstallAdView.priceView).text = nativeAppInstallAd.price;
    appInstallAdView.priceView.hidden = NO;
  } else {
    appInstallAdView.priceView.hidden = YES;
  }

  // In order for the SDK to process touch events properly, user interaction should be disabled on
  // all views associated with the GADNativeAppInstallAdView. Since UIButton has
  // userInteractionEnabled set to YES by default, views of this type must explicitly set
  // userInteractionEnabled to NO.
  appInstallAdView.callToActionView.userInteractionEnabled = NO;
}

Swift

// Mark: - GADNativeAppInstallAdLoaderDelegate

func adLoader(_ adLoader: GADAdLoader,
    didReceive nativeAppInstallAd: GADNativeAppInstallAd) {
  // Create and place the ad in the view hierarchy.
  let appInstallAdView = Bundle.main.loadNibNamed("NativeAppInstallAdView", owner: nil,
      options: nil)?.first as! GADNativeAppInstallAdView
  // TODO: Make sure to add the GADNativeAppInstallAdView to the view hierarchy.

  // Associate the app install ad view with the app install ad object. This is required to make
  // the ad clickable.
  appInstallAdView.nativeAppInstallAd = nativeAppInstallAd

  // Populate the app install ad view with the app install ad assets.
  // Some assets are guaranteed to be present in every app install ad.
  (appInstallAdView.headlineView as! UILabel).text = nativeAppInstallAd.headline
  (appInstallAdView.iconView as! UIImageView).image = nativeAppInstallAd.icon?.image
  (appInstallAdView.bodyView as! UILabel).text = nativeAppInstallAd.body
  (appInstallAdView.imageView as! UIImageView).image =
      (nativeAppInstallAd.images?.first as! GADNativeAdImage).image
  (appInstallAdView.callToActionView as! UIButton).setTitle(
      nativeAppInstallAd.callToAction, for: UIControlState.normal)

  // Other assets are not, however, and should be checked first.
  let starRatingView = appInstallAdView.starRatingView
  if let starRating = nativeAppInstallAd.starRating {
    (starRatingView as! UIImageView).image = imageOfStarsFromStarRating(starRating)
    starRatingView?.isHidden = false
  } else {
    starRatingView?.isHidden = true
  }

  let storeView = appInstallAdView.storeView
  if let store = nativeAppInstallAd.store {
    (storeView as! UILabel).text = store
    storeView?.isHidden = false
  } else {
    storeView?.isHidden = true
  }

  let priceView = appInstallAdView.priceView
  if let price = nativeAppInstallAd.price {
    (priceView as! UILabel).text = price
    priceView?.isHidden = false
  } else {
    priceView?.isHidden = true
  }

  // In order for the SDK to process touch events properly, user interaction should be disabled on
  // all views associated with the GADNativeAppInstallAdView. Since UIButton has
  // userInteractionEnabled set to true by default, views of this type must explicitly set
  // userInteractionEnabled to false.
  (appInstallAdView.callToActionView as! UIButton).isUserInteractionEnabled = false
}

上記で定義したビューにコンテンツ広告を表示するメソッドを、以下に示します。

Objective-C

#pragma mark GADNativeContentAdLoaderDelegate implementation

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveNativeContentAd:(GADNativeContentAd *)nativeContentAd {
  // Create and place ad in view hierarchy.
  GADNativeContentAdView *contentAdView =
      [[[NSBundle mainBundle] loadNibNamed:@"NativeContentAdView"
                                     owner:nil
                                   options:nil] firstObject];
  // TODO: Make sure to add the GADNativeContentAdView to the view hierarchy.

  // Associate the content ad view with the content ad object. This is required to make the ad
  // clickable.
  contentAdView.nativeContentAd = nativeContentAd;

  // Populate the content ad view with the content ad assets.
  // Some assets are guaranteed to be present in every content ad.
  ((UILabel *)contentAdView.headlineView).text = nativeContentAd.headline;
  ((UILabel *)contentAdView.bodyView).text = nativeContentAd.body;
  ((UIImageView *)contentAdView.imageView).image =
      ((GADNativeAdImage *)[nativeContentAd.images firstObject]).image;
  ((UILabel *)contentAdView.advertiserView).text = nativeContentAd.advertiser;
  [((UIButton *)contentAdView.callToActionView)setTitle:nativeContentAd.callToAction
                                               forState:UIControlStateNormal];

  // Other assets are not, however, and should be checked first.
  if (nativeContentAd.logo && nativeContentAd.logo.image) {
    ((UIImageView *)contentAdView.logoView).image = nativeContentAd.logo.image;
    contentAdView.logoView.hidden = NO;
  } else {
    contentAdView.logoView.hidden = YES;
  }

  // In order for the SDK to process touch events properly, user interaction should be disabled on
  // all views associated with the GADNativeContentAdView. Since UIButton has userInteractionEnabled
  // set to YES by default, views of this type must explicitly set userInteractionEnabled to NO.
  contentAdView.callToActionView.userInteractionEnabled = NO;
}

Swift

// Mark: - GADNativeContentAdLoaderDelegate

func adLoader(_ adLoader: GADAdLoader,
    didReceive nativeContentAd: GADNativeContentAd) {
  // Create and place the ad in the view hierarchy.
  let contentAdView = Bundle.main.loadNibNamed(
      "NativeContentAdView", owner: nil, options: nil)?.first as! GADNativeContentAdView
  // TODO: Make sure to add the GADNativeContentAdView to the view hierarchy.

  // Associate the content ad view with the content ad object. This is required to make the ad
  // clickable.
  contentAdView.nativeContentAd = nativeContentAd

  // Populate the content ad view with the content ad assets.
  // Some assets are guaranteed to be present in every content ad.
  (contentAdView.headlineView as! UILabel).text = nativeContentAd.headline
  (contentAdView.bodyView as! UILabel).text = nativeContentAd.body
  (contentAdView.imageView as! UIImageView).image =
      (nativeContentAd.images?.first as! GADNativeAdImage).image
  (contentAdView.advertiserView as! UILabel).text = nativeContentAd.advertiser
  (contentAdView.callToActionView as! UIButton).setTitle(
      nativeContentAd.callToAction, for: UIControlState.normal)

  // Other assets are not, however, and should be checked first.
  let logoView = contentAdView.logoView
  if let logoImage = nativeContentAd.logo?.image {
    (logoView as! UIImageView).image = logoImage
    logoView?.isHidden = false
  } else {
    logoView?.isHidden = true
  }

  // In order for the SDK to process touch events properly, user interaction should be disabled on
  // all views associated with the GADNativeContentAdView. Since UIButton has userInteractionEnabled
  // set to true by default, views of this type must explicitly set userInteractionEnabled to false.
  (contentAdView.callToActionView as! UIButton).isUserInteractionEnabled = false
}

上記のサンプルコードに示されているとおり、アクションの要求を表示する UIButton ボタンに対するユーザー接点が無効になっています。UIButton を使用してネイティブ広告アセットを表示する場合は、Google Mobile Ads SDK が UI イベントを適切に受け取って処理できるように、ユーザーの接点を無効にする必要もあります。このような追加ステップがあるため、多くの場合、UIButton の使用を完全に避けて代わりに UILabel と UIImageView を使用するのが適切です。

Google の GitHub レポジトリには、Swift と Objective-C の両方で記述された、ネイティブ アドバンス アプリのインストール広告およびコンテンツ広告のための実装全体があります。

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

コードのテスト

実装をテストしやすくするために、次の AdMob 広告ユニット ID が利用可能です。

ca-app-pub-3940256099942544/3986624511

この広告ユニットに対して行ったリクエストは「テスト」リクエストと見なされ、本稼働環境の統計情報にはカウントされません。

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