ネイティブ広告とカスタム レンダリング

この機能は現在、ベータ版での公開となっております。ベータテストへの参加をご希望の場合は、アカウント マネージャーにお問い合わせください。ベータテストが完了しましたら、すべてのパブリッシャー様がこの機能をご利用いただけるようになります。

このガイドでは、Google Mobile Ads SDK を使用して、iOS アプリに DFP ネイティブ広告を実装する方法と、その過程で注意すべき事項を説明します。

前提条件

このガイドは、Google Mobile Ads SDK についてある程度の知識をお持ちの方を対象としています。Google Mobile Ads SDK についてあまりご存じでない場合は、スタートガイドをお読みください。

ネイティブ広告とは

ネイティブ広告とは、プラットフォームに由来する UI コンポーネントを通じてユーザーに表示される広告のことです。ストーリーボードですでに使用しているのと同じクラスで表示され、アプリの視覚デザインに溶け込むようフォーマットされます。ネイティブ広告の読み込み時に、アプリが広告のアセットを含むネイティブ広告オブジェクトを受け取ります。そして(SDK ではなく)アプリで広告表示の処理が行われます。

システム定義のネイティブ広告フォーマット

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

カスタムのネイティブ広告フォーマット

DFP をご利用のパブリッシャー様は、システム定義のネイティブ広告フォーマットの作成だけでなく、アセットのカスタムリストを定義することで、ご自身のネイティブ広告フォーマットも作成できます。これはカスタムのネイティブ広告フォーマットと呼ばれ、直接販売のネイティブ広告で使用できます。カスタムのネイティブ広告フォーマットを使用すると、任意の構造のデータをアプリに渡すことができます。カスタムのネイティブ広告は GADNativeCustomTemplateAd クラスで表されます。

カスタムのネイティブ広告フォーマットはカスタム テンプレート広告とも呼ばれます。これは、カスタムのネイティブ広告フォーマットに、パブリッシャー様がご自身の「テンプレート」(アセットの名前とタイプのリスト)を定義するためです。この点についてはガイドを読み進めればご理解いただけますが、今のところは「カスタム テンプレート広告」と「カスタムのネイティブ広告フォーマット」がどちらも同じ種類の広告を指していることだけご理解ください。

システム定義のネイティブ広告フォーマットの読み込み

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

GADAdLoader の初期化

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

Objective-C

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

Swift

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

adTypes 配列パラメータにより、アプリがどのネイティブ広告フォーマットをリクエストするかを示す定数を渡すことができます。この配列には、次の定数のうち 1 つ以上を格納する必要があります。

  • kGADAdLoaderAdTypeNativeAppInstall
  • kGADAdLoaderAdTypeNativeContent
  • kGADAdLoaderAdTypeNativeCustomTemplate

ネイティブ広告のリクエスト

GADAdLoader を初期化したら、その loadRequest: メソッドを呼び出して広告をリクエストします。

Objective-C

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

Swift

adLoader.loadRequest(DFPRequest())

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

1 つの GADAdLoader で複数の広告をリクエストできますが、1 回に 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!)

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

上記のプロトコルは、広告の読み込みが失敗したときに送信するメッセージを定義する 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 にはネイティブ広告の画像に関するプロパティが含まれています。GADAdLoaderGADNativeAdImageAdLoaderOptions オブジェクトを作成し、そのプロパティを設定し、初期化中に渡すことで、ネイティブ広告の画像アセットを処理する方法をアプリで管理できます。

GADNativeAdImageAdLoaderOptions には次のパラメータがあります。

disableImageLoading image プロパティと imageURL プロパティを格納する GADNativeAdImage のインスタンスから、ネイティブ広告の画像アセットが返されます。disableImageLoading をデフォルトの false に設定した場合、SDK で自動的に画像アセットが取得され、imageimageURL の両方のプロパティが設定されます。ただし、このオプションを true に設定した場合、SDK で 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:@"/6499/example/native"
    rootViewController:self
               adTypes:@[ kGADAdLoaderAdTypeNativeAppInstall, kGADAdLoaderAdTypeNativeContent ]
               options:@[ adViewOptions ]];

Swift

let adViewOptions = GADNativeAdViewAdOptions()
adViewOptions.preferredAdChoicesPosition = .TopLeftCorner
adLoader = GADAdLoader(adUnitID: "/6499/example/native",
    rootViewController: self,
    adTypes: [ kGADAdLoaderAdTypeNativeAppInstall, kGADAdLoaderAdTypeNativeContent],
    options: [ adViewOptions ])

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

ネイティブ広告を表示するアプリでは、実際に表示する前に広告をリクエストできます。通常はこの方法がおすすめです。たとえば、ネイティブ広告を含んだ項目のリストを表示するアプリでは、リスト全体に対してネイティブ広告を読み込むことができます。ユーザーが画面をスクロールした後にのみ表示される広告や、まったく表示されない可能性がある広告があってもかまいません。

あらかじめ広告を取得しておくことはよい方法ですが、表示されない古い広告をいつまでも放置しないことが重要です。1 時間以上表示されないまま保持されているネイティブ広告オブジェクトは破棄し、新しいリクエストを行って、新しい広告に置き換える必要があります。

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

ネイティブ広告が読み込まれると、アプリは GADAdLoaderDelegate プロトコル メッセージのうち 1 つを通じてネイティブ広告オブジェクトを受け取ります。次にアプリが広告を表示することになりますが、必ずしもすぐに表示する必要はありません。システム定義の広告フォーマットの表示を容易にするために、SDK には便利なリソースが用意されています。

広告ビュークラス

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

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

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

  • クリックの記録
  • インプレッションの記録(画面に最初のピクセルが表示されたとき)
  • ネイティブ広告のバックフィル クリエイティブに対する AdChoices オーバーレイの表示

AdChoices オーバーレイ

間接販売のネイティブ広告(DFP バックフィル経由か、Ad Exchange や AdSense から配信されます)の場合は、SDK によって AdChoices オーバーレイが追加されます。AdChoices ロゴが自動的に挿入されるため、ネイティブ広告ビュー内の位置を設定してスペースを確保します。また、AdChoices オーバーレイがコンテンツの上に表示されたとき、アイコンが見やすいかどうかも確認します。オーバーレイの表示や機能について、詳しくはネイティブ広告のバックフィル実装のガイドラインをご覧ください。

コード例

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

xib ファイルでの UIViews のレイアウト

最初の手順は、ネイティブ広告アセットを表示する UIViews のレイアウトの指定です。これは、他の xib ファイルの作成時と同様に、インターフェース ビルダーで行います。次に示すのは、アプリ インストール広告のレイアウトの外観です。

また、コンテンツ広告のレイアウトの外観は次のとおりです。

上の 2 枚の画像の右上にある Custom Class の値をご覧ください。それぞれ GADNativeAppInstallAdViewGADNativeContentAdView に設定されています。これらは、GADNativeAppInstallAdGADNativeContentAd の表示に使用する広告ビュークラスです。システム定義フォーマットでは、レイアウトを表示する広告フォーマットに適した広告ビュークラスを使用する必要があります。

アウトレットからビューへのリンク

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

また、コンテンツ広告用に作成した UIViews に広告ビューのアセットのアウトレットをリンクする方法は次のとおりです。

アウトレット パネルで、GADNativeAppInstallAdViewGADNativeContentAdView のアウトレットが、インターフェース ビルダーに配置されている 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 を使用してネイティブ広告アセット表示する場合も、UIButton のユーザー操作を無効にして、Google Mobile Ads SDK で UI イベントを適切に受け取り、処理できるようにする必要があります。このように追加で操作する必要があるため、多くの場合、UIButton の代わりに UILabel や UIImageView を使用することをおすすめします。

GitHub レポジトリでは、アプリ インストール広告やコンテンツ広告のネイティブ カスタム レンダリングの完全な実装サンプルを、Swift と Objective-C の両方でご覧いただけます。

DFP のカスタム レンダリングのサンプルをダウンロードする

カスタムのネイティブ広告フォーマットの読み込み

システム定義のネイティブ広告フォーマットと同様に、カスタムのネイティブ広告フォーマットは GADAdLoader オブジェクトを使用して読み込みます。GADAdLoader の初期化時に adTypes 配列に kGADAdLoaderAdTypeNativeCustomTemplate 定数を含めると、広告の読み込み時にカスタム ネイティブ フォーマットをリクエストするように設定されます。

GADNativeCustomTemplateAdLoaderDelegate

カスタム テンプレートを読み込むためのプロトコルには、2 つのメソッドがあります。1 つ目は、リクエストが必要なテンプレート ID の特定のために GADAdLoader で使用されます。

Objective-C

- (NSArray *)nativeCustomTemplateIDsForAdLoader:(GADAdLoader *)adLoader;

Swift

public func nativeCustomTemplateIDsForAdLoader(adLoader: GADAdLoader!) -> [AnyObject]!

すべてのカスタムのネイティブ広告フォーマットには、それぞれ個別に対応するテンプレート ID があります。このメソッドを呼び出すと、表示する準備が整ったフォーマットのテンプレート ID を含む配列が、アプリによって返されます。

2 つ目は、システム定義フォーマットの場合と同様に、カスタム テンプレート広告が読み込まれたときに送信されます。

Objective-C

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveNativeCustomTemplateAd:(GADNativeCustomTemplateAd *)nativeCustomTemplateAd;

Swift

public func adLoader(adLoader: GADAdLoader!,
    didReceiveNativeCustomTemplateAd nativeCustomTemplateAd: GADNativeCustomTemplateAd!)

テンプレート ID

カスタムのネイティブ広告フォーマットを一意に参照するために使用するテンプレート ID は、DFP UI に表示されます([配信] タブの [クリエイティブ] から [ネイティブ広告フォーマット] を選択)。

カスタムの各ネイティブ広告フォーマットのテンプレート ID は、名前の下に表示されます。名前をクリックすると詳細画面が開き、テンプレートのフィールドに関する情報が表示されます。

ここで、各フィールドの追加、編集、削除を行うことができます。右側の [変数 ID] 列にご注意ください。変数 ID は、個々のアセットへのアクセスに使用します。詳しくは、次のセクションで説明します。

カスタムのネイティブ広告フォーマットの表示

カスタムのネイティブ広告フォーマットがシステム定義のネイティブ広告フォーマットと異なるのは、パブリッシャー様がご自身の「テンプレート」、つまり広告を構成するアセットのリストを定義できる点です。そのため、カスタムのネイティブ広告フォーマットを表示するプロセスは、システム定義のフォーマットの場合とは次の点が異なります。

  1. 作成したカスタムのネイティブ広告フォーマットがすべて処理されるため、GADNativeCustomTemplateAd にはアセットに対する名前付きのアクセサがありません。代わりに、テンプレート フィールドの変数 ID をパラメータとする imageForKey:stringForKey: などのメソッドが用意されています。
  2. GADNativeCustomTemplateAd で使用するための GADNativeContentAdView のような専用広告ビュークラスはありません。ユーザー エクスペリエンスに合う任意のインターフェースを自由に使用できます。
  3. 専用広告ビュークラスがないので、広告のアセットの表示に使用するビューを登録する必要はありません。

次に示すのは、シンプルな GADNativeCustomTemplateAd を表示できるクラスの例です。

MySimpleNativeAdView.h

Objective-C

@import UIKit;
@import GoogleMobileAds;

/// View representing a custom native ad format with template ID 10063170.
@interface MySimpleNativeAdView : UIView

// Weak references to this ad's asset views.
@property(weak, nonatomic) IBOutlet UILabel *headlineView;
@property(weak, nonatomic) IBOutlet UIImageView *mainImageView;
@property(weak, nonatomic) IBOutlet UILabel *captionView;

/// Populates the ad view with the custom native ad object.
- (void)populateWithCustomNativeAd:(GADNativeCustomTemplateAd *)customNativeAd;

@end

Swift

import UIKit
import GoogleMobileAds

/// Custom native ad view class with template ID 10063170.
class MySimpleNativeAdView: UIView {

  /// Weak references to this ad's asset views.
  @IBOutlet weak var headlineView: UILabel!
  @IBOutlet weak var mainImageView: UIImageView!
  @IBOutlet weak var captionView: UILabel!

  ...

  /// Populates the ad view with the custom native ad object.
  func populateWithCustomNativeAd(customNativeAd: GADNativeCustomTemplateAd) {
    ...
  }
}

MySimpleNativeAdView.m(抜粋)

Objective-C

...
- (void)populateWithCustomNativeAd:(GADNativeCustomTemplateAd *)customNativeAd {
  self.customNativeAd = customNativeAd;

  // Populate the custom native ad assets.
  self.headlineView.text = [customNativeAd stringForKey:@"Headline"];
  self.mainImageView.image = [customNativeAd imageForKey:@"MainImage"].image;
  self.captionView.text = [customNativeAd stringForKey:@"Caption"];
}
...

Swift

...
func populateWithCustomNativeAd(customNativeAd: GADNativeCustomTemplateAd) {
  self.customNativeAd = customNativeAd

  // Populate the custom native ad assets.
  headlineView.text = self.customNativeAd.stringForKey("Headline")
  mainImageView.image = self.customNativeAd.imageForKey("MainImage")?.image
  captionView.text = self.customNativeAd.stringForKey("Caption")
}
...

カスタムのネイティブ広告フォーマットのクリックとインプレッションの処理

カスタムのネイティブ広告フォーマットでは、アプリによって SDK にインプレッションが記録され、クリックがレポートされます。

インプレッションの記録

カスタム テンプレート広告のインプレッションを記録するには、対応する GADNativeCustomTemplateAdrecordImpression メソッドを呼び出します。

Objective-C

[myCustomTemplateAd recordImpression];

Swift

myCustomTemplateAd.recordImpression()

アプリが同じ広告に対し誤ってメソッドを何度も呼び出しても、SDK が 1 回のリクエストで重複しているインプレッションの記録を防止します。

クリックの記録

アセットビューでクリックが発生したことを SDK にレポートするには、対応する GADNativeCustomTemplateAdperformClickOnAssetWithKey:customClickHandler: メソッドを呼び出し、クリックされたアセットの名前を渡します。たとえば、カスタム テンプレートに「MainImage」という名前のアセットがあり、そのアセットに対応するビューのクリックをレポートする場合、コードは次のようになります。

Objective-C

[myCustomTemplateAd performClickOnAssetWithKey:@"MainImage"
                            customClickHandler:^{ /* an optional block */ }];

Swift

myCustomTemplateAd.performClickOnAssetWithKey(
    assetKey: "MainImage", customClickHandler: { /* an optional closure */ })

このメソッドは、広告に関連付けられているすべてのビューに呼び出す必要はありません。「Caption」という名前の別のアセットがあり、表示されてもユーザーのクリックやタップには反応しない場合、そのアセットのビューにアプリで performClickOnAssetWithKey:customClickHandler: を呼び出す必要はありません。

カスタム広告のクリック操作へのレスポンス

カスタム テンプレート広告がクリックされると、SDK が 3 つのレスポンスを次の順番で試行します。

  1. Objective-C の customClickHandler ブロックや Swift のクロージャが渡された場合は、それを呼び出す。
  2. 広告のディープリンク URL を走査し、一致するアプリが特定された最初の URL を開く。
  3. ブラウザを開き、広告の従来のリンク先 URL に移動する。

performClickOnAssetWithKey:customClickHandler: メソッドでは、2 つ目のパラメータとして Objective-C のブロックや Swift のクロージャが受け入れられます。ブロックやクロージャを渡すと、SDK がそれを実行します。他の操作は行われません。ただし、nil 値を渡した場合、SDK は広告に登録されているディープリンクやリンク先 URL にフォールバックします。

カスタム クリック ハンドラを使用すると、アプリ単体でクリックへのレスポンスとして最適なアクションを決定できます(UI の更新、別のビュー コントローラの表示、クリックの記録のみなど)。次に示すのは、アラートを表示する例です。

Objective-C

[self.customTemplateAd
    performClickOnAssetWithKey:@"MainImage"
            customClickHandler:^{
              [[[UIAlertView alloc] initWithTitle:@"Custom Click"
                                          message:@"You just clicked on the image!"
                                         delegate:self
                                cancelButtonTitle:@"OK"
                                otherButtonTitles:nil] show];
            }
];

Swift

customTemplateAd.performClickOnAssetWithKey(
    assetKey: "MainImage",
    customClickHandler: {
      let alertView = UIAlertView(title: "Custom Click",
          message: "You just clicked on the image!",
          delegate: self,
          cancelButtonTitle: "OK")
      alertView.alertViewStyle = .Default
      alertView.show()
    }
)

ネイティブ広告コードのテスト

直接販売のネイティブ広告

直接販売のネイティブ広告をテストするには、次の DFP 広告ユニット ID を使用します。

/6499/example/native

これは、アプリ インストール広告やコンテンツ広告のサンプルに加え、次のアセットを含むカスタムのネイティブ広告フォーマットでも利用できるように設定されています。

  • 広告見出し(テキスト)
  • MainImage(画像)
  • 説明(テキスト)

カスタムのネイティブ広告フォーマットのテンプレート ID は 10063170 です。現時点では、testDevices プロパティをネイティブ広告リクエストで使用しないでください。testDevices プロパティでデバイスを登録せずに、上記の広告ユニット ID を使用してテストすることをおすすめします。

ネイティブ バックフィル広告

ネイティブ バックフィル広告の動作をテストするには、次の DFP 広告ユニットを使用します。

/6499/example/native-backfill

これは、AdChoices オーバーレイを含むアプリ インストール広告やコンテンツ広告のサンプルで利用できます。

広告の配信を開始する前に、実際の広告ユニットとテンプレート ID が参照されるよう、コードを更新してください。

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

ご不明な点がありましたら、Google のサポートページをご覧ください。