ネイティブ スタイル

プラットフォームを選択: Android iOS Flutter

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

前提条件

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

このガイドは、Google Mobile Ads SDK に関する実践的な知識がある方を対象としています。まだ行っていない場合は、スタートガイドをご確認いただくことをおすすめします。

固定サイズ

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

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

  2. Interface Builder で、GAMBannerView の幅と高さを、ステップ 1 で選択した事前定義済みのサイズに設定します。サイズとその対応する GADAdSize 定数のリストは、[バナーサイズ] セクションで確認できます。

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

Fluid サイズ

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

Fluid リクエスト

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

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

単一サイズと複数サイズの Fluid リクエストを行う実装は非常に似ています。唯一の違いは、複数サイズのリクエストの場合、validAdSizes プロパティを設定して、広告リクエストで有効な広告サイズを指定することです。

Swift

bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

Objective-C

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

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

Swift

var bannerView: AdManagerBannerView!

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 = AdManagerBannerView(adSize: AdSizeFluid)
  var frameRect = bannerView.frame
  frameRect.size.width = view.bounds.width
  bannerView.frame = frameRect

  // Uncomment this code for a multisize fluid request.
  // bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

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

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

Objective-C

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]];
}

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

API デモをダウンロード

GADAdSizeDelegate プロトコル

広告サイズの変更前にバナーの高さを知りたい場合があります。adView:willChangeAdSizeTo: コールバックは、バナービューが新しい GADAdSize に変更される前にデリゲートに通知します。バナービューが新しい広告サイズに変更される前に通知を受け取るには、クラスが GADAdSizeDelegate プロトコルに準拠している必要があります。

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

Swift

// 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: BannerView, willChangeAdSizeTo adSize: AdSize) {
  let height = adSize.size.height
  let width = adSize.size.width
}

Objective-C

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