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

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

このガイドでは、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.loadRequest(GADRequest())

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

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

GADAdLoaderDelegate プロトコル

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

GADNativeAppInstallAdLoaderDelegate

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

Objective-C

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

Swift

public func adLoader(adLoader: GADAdLoader!,
    didReceiveNativeAppInstallAd nativeAppInstallAd: GADNativeAppInstallAd!)

GADNativeContentAdLoaderDelegate

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

Objective-C

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

Swift

public func adLoader(adLoader: GADAdLoader!,
    didReceiveNativeContentAd 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 により、画像アセットが自動的にフェッチされ、image プロパティと imageURL プロパティにデータが入力されます。 true に設定されている場合、SDK により、imageURL プロパティへのデータの入力のみが行われ、自分の裁量で実際の画像をダウンロードできます。

preferredImageOrientation - 端末のさまざまな画面の向きと一致するように、利用できる画像が複数あるクリエイティブもあります。 アプリでは、次の画像の向きの定数のいずれかにプロパティを設定して、特定の向きの画像をリクエストできます。

  • GADNativeAdImageAdLoaderOptionsOrientationAny
  • GADNativeAdImageAdLoaderOptionsOrientationLandscape
  • GADNativeAdImageAdLoaderOptionsOrientationPortrait

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

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

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

広告をリクエストするタイミング

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

広告のプリフェッチは便利な手法ですが、表示されない古い広告を長期間保持しないようにしてください。 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!,
    didReceiveNativeAppInstallAd nativeAppInstallAd: GADNativeAppInstallAd!) {
  // Create and place the ad in the view hierarchy.
  let appInstallAdView = NSBundle.mainBundle().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, forState: 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.hidden = false
  } else {
    starRatingView.hidden = true
  }

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

  let priceView = appInstallAdView.priceView
  if let price = nativeAppInstallAd.price {
    (priceView as! UILabel).text = price
    priceView.hidden = false
  } else {
    priceView.hidden = 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).userInteractionEnabled = 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!,
    didReceiveNativeContentAd nativeContentAd: GADNativeContentAd!) {
  // Create and place the ad in the view hierarchy.
  let contentAdView = NSBundle.mainBundle().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, forState: 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.hidden = false
  } else {
    logoView.hidden = 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).userInteractionEnabled = false
}

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

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

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

コードをテストする

実装をテストしやすくするために、次の AdMob 広告ユニット ID が利用できるようになっています。

ca-app-pub-3940256099942544/3986624511

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

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