ネイティブ スタイル

ネイティブ スタイルの設定を使用すると、Google アド マネージャーでは商品内に指定したネイティブ スタイルに沿ってネイティブ広告のレンダリングを処理できます。まず、サイズとターゲティングを指定します。 レスポンシブ ディスプレイ広告を定義し、HTML、CSS、JavaScript を追加します。これにより、あらゆる画面で質の高い広告を表示できます。レンダリングを行う必要はありません。アド マネージャーによって、デスティネーションに適切なネイティブ スタイルが自動的に適用されます。ネイティブ スタイルは、バナー広告と同様に、GAMBannerView を使って実装します。事前に決定された固定サイズの広告サイズ、またはランタイム時に決定された Fluid 広告サイズで使用できます。

Prerequisites

• Google Mobile Ads SDK バージョン 7.14.0 以降

このガイドは、Google Mobile Ads SDK に関する実用的な知識があることを前提としています。まだ行っていない場合は、スタートガイドの手順を行うことをおすすめします。

固定サイズ

サイズが固定されているネイティブ スタイルでは、ネイティブ広告の幅と高さを制御できます。固定サイズを設定する手順は次のとおりです。

1. アド マネージャーの管理画面で広告申込情報を作成し、[Size] フィールドのプルダウンから事前定義されたサイズのいずれかを選択します。

2. Interface Builder で、GAMBannerView の幅と高さを、手順 1 で選択した事前定義済みサイズに合わせて設定します。サイズのリストとそれに対応する GADAdSize 定数については、バナーのサイズのセクションをご覧ください。

固定サイズのネイティブ スタイルの実装は、最初のバナー リクエストの手順に沿って行うのと同じくらい簡単ですが、柔軟性があり、HTML、CSS、JavaScript を制御できるため、ネイティブ広告をアプリに自然に溶け込むことができます。

液量

場合によっては、固定サイズを使用できないこともあります。たとえば、広告の幅をアプリのコンテンツと一致させるが、広告の高さに合わせて広告の幅を動的に調整する場合です。こうしたケースに対応するには、アド マネージャーの管理画面で広告サイズとして Fluid を指定します。広告サイズは、アプリで実行時に決まるよう指定します。SDK では特別な GADAdSize 定数 kGADAdSizeFluid が用意されており、このケースに対応します。Fluid 広告サイズの高さは、パブリッシャーが定義した幅に基づいて動的に決定されるため、GAMBannerView では高さをクリエイティブの高さに合わせて調整できます。

Fluid リクエスト

他の広告フォーマットとは異なり、kGADAdSizeFluid 広告サイズには幅が事前に定義されていないため、コードまたはインターフェース ビルダーでバナーのフレーム幅を明示的に設定してください。幅が指定されていない場合、SDK はデフォルトで、デバイスの全幅に基づいてバナーの高さを設定します。

kGADAdSizeFluid を含むマルチサイズ リクエストを行うと、返された広告は常に Fluid コンテナ内に配置され、Fluid 広告と同じように動作します。この Fluid コンテナで非 Fluid クリエイティブが返される場合、SDK ではコンテナ内の広告の中心に配置されるため、新しい広告が返されるたびに幅の制約を変更する必要がありません。

単一サイズと複数サイズの Fluid リクエストの実装の実装はよく似ています。唯一の違いは、マルチサイズ リクエストです。validAdSizes プロパティを設定して、広告リクエストに対して有効な広告サイズを指定します。

bannerView.validAdSizes = [NSValueFromGADAdSize(kGADAdSizeFluid),
                           NSValueFromGADAdSize(kGADAdSizeBanner)]

_bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
                              NSValueFromGADAdSize(kGADAdSizeBanner) ];

コード全体の実装は次のようになります。

var bannerView: GAMBannerView!

override func viewDidLoad() {
  super.viewDidLoad()
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  bannerView = GAMBannerView(adSize: kGADAdSizeFluid)
  var frameRect = bannerView.frame
  frameRect.size.width = view.bounds.width
  bannerView.frame = frameRect

  // Uncomment this code for a multisize fluid request.
  // bannerView.validAdSizes = [NSValueFromGADAdSize(kGADAdSizeFluid),
  //                            NSValueFromGADAdSize(kGADAdSizeBanner)]

  bannerView.adUnitID = "YOUR_AD_UNIT_ID"
  bannerView.rootViewController = self

  // Make the ad request.
  bannerView.load(GAMRequest())
}

GAMBannerView *_bannerView;

- (void)viewDidLoad {
  [super viewDidLoad];
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  _bannerView = [[GAMBannerView alloc] initWithAdSize:kGADAdSizeFluid];
  CGRect frameRect = _bannerView.frame;
  frameRect.size.width = CGRectGetWidth(self.view.bounds);
  _bannerView.frame = frameRect;

  // Uncomment this code for a multisize fluid request.
  // _bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
  //                               NSValueFromGADAdSize(kGADAdSizeBanner) ];

  _bannerView.adUnitID = @"YOUR_AD_UNIT_ID";
  _bannerView.rootViewController = self;

  // Make the ad request.
  [_bannerView loadRequest:[GAMRequest request]];
}

アド マネージャーの Fluid 広告サイズの実装例を確認するには、Swift または Objective-C で iOS API デモアプリをダウンロードします。

API デモをダウンロード

GADAdSizeDelegate プロトコル

広告サイズは、バナーが変化する前に高さを確認することをおすすめします。 adView:willChangeAdSizeTo: コールバックは、バナービューが新しい GADAdSize に変更される前に、デリゲートに通知します。バナービューが新しい広告サイズに変更される前に通知されるようにするには、クラスを GADAdSizeDelegate プロトコルに準拠している必要があります。

バナーの新しい幅と高さを取得する方法を示す adView:willChangeAdSizeTo: コールバックの実装サンプルを次に示します。

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
bannerView.adSizeDelegate = self

// MARK: - GADAdSizeDelegate

func adView(_ bannerView: GADBannerView, willChangeAdSizeTo adSize: GADAdSize) {
  let height = adSize.size.height
  let width = adSize.size.width
}

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
_bannerView.adSizeDelegate = self;

#pragma mark - GADAdSizeDelegate

- (void)adView:(GADBannerView *)bannerView willChangeAdSizeTo:(GADAdSize)adSize {
  CGFloat height = adSize.size.height;
  CGFloat width = adSize.size.width;
}