このページは Cloud Translation API によって翻訳されました。

インラインアダプティブバナー

アダプティブバナーは次世代のレスポンシブ広告であり、デバイスごとに広告サイズを最適化して成果を最大化します。アダプティブバナーでは、高さが固定されている固定サイズのバナーから、デベロッパーが広告の幅を指定し、それに基づいて最適な広告サイズを決定できます。

最適な広告サイズを選択するために、インラインアダプティブバナーでは、固定された高さではなく最大の高さが使用されます。その結果、パフォーマンスが向上します。

インラインアダプティブバナーを使用するタイミング

インラインアダプティブバナーは、アンカーアダプティブバナーに比べて大きく、高さがあります。高さは可変で、デバイスの画面と同じ高さにできます。

たとえば、次のようなスクロールコンテンツ内に配置されます。

前提条件

スタートガイドの手順に沿って、Mobile Ads Flutter プラグインをインポートする

始める前に

アプリにアダプティブバナーを実装する際は、次の点に注意してください。

Google Mobile Ads SDK の最新バージョンを使用していることを確認します。また、メディエーションを使用している場合は、最新バージョンのメディエーションアダプタを使用する必要があります。
インラインアダプティブバナーのサイズは、幅いっぱいに収めたときに最適に機能するように設計されています。ほとんどの場合、この値は使用中のデバイスの画面の横幅になります。該当する場合は、セーフエリアを考慮するようにしてください。
アダプティブバナーのサイズを使用する場合は、広告申込情報の更新または新規作成が必要になることがあります。詳細
広告サイズを取得するメソッドは次のとおりです。
- AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width)
- AdSize.getLandscapeInlineAdaptiveBannerAdSize(int width)
- AdSize.getPortraitInlineAdaptiveBannerAdSize(int width)
- AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight)
インラインアダプティブバナー API を使用している場合、Google Mobile Ads SDK は、指定された幅とインラインフラグが設定された AdSize を返します。高さは、使用している API に応じて、ゼロまたは maxHeight です。広告の実際の高さは、返されたときに取得できます。
インラインアダプティブバナーは、スクロール可能なコンテンツ内に配置されるように設計されています。バナーの高さは、API に応じてデバイスの画面と同じか、最大の高さに制限されます。

実装

シンプルなインラインアダプティブバナーを実装する手順は以下のとおりです。

インラインアダプティブバナー広告のサイズを取得する。取得したサイズはアダプティブバナーのリクエストに使用されます。アダプティブバナーの広告サイズを取得するには、以下をご確認ください。
1. 使用されるデバイスの幅を密度非依存ピクセルで取得します。画面の全幅を使用しない場合は独自の幅を設定します。MediaQuery.of(context) を使用して画面の幅を取得できます。
2. 現在の向きに対応するインラインアダプティブ AdSize オブジェクトを取得するには、広告サイズクラスの適切な静的メソッド（AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width) など）を使用します。
3. バナーの高さを制限する場合は、静的メソッド AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight) を使用します。
広告ユニット ID、アダプティブ広告サイズ、広告リクエストオブジェクトを指定した AdManagerBannerAd オブジェクトを作成します。
広告を読み込みます。
onAdLoaded コールバックで、AdManagerBannerAd.getPlatformAdSize() を使用して更新されたプラットフォームの広告サイズを取得し、AdWidget コンテナの高さを更新します。

サンプルコード

インセットを考慮して、画面の幅に合わせてインラインアダプティブバナーを読み込むウィジェットの例を次に示します。

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

/// This example demonstrates inline adaptive banner ads.
///
/// Loads and shows an inline adaptive banner ad in a scrolling view,
/// and reloads the ad when the orientation changes.
class InlineAdaptiveExample extends StatefulWidget {
  @override
  _InlineAdaptiveExampleState createState() => _InlineAdaptiveExampleState();
}

class _InlineAdaptiveExampleState extends State<InlineAdaptiveExample> {
  static const _insets = 16.0;
  AdManagerBannerAd? _inlineAdaptiveAd;
  bool _isLoaded = false;
  AdSize? _adSize;
  late Orientation _currentOrientation;

  double get _adWidth => MediaQuery.of(context).size.width - (2 * _insets);

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _currentOrientation = MediaQuery.of(context).orientation;
    _loadAd();
  }

  void _loadAd() async {
    await _inlineAdaptiveAd?.dispose();
    setState(() {
      _inlineAdaptiveAd = null;
      _isLoaded = false;
    });

    // Get an inline adaptive size for the current orientation.
    AdSize size = AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(
        _adWidth.truncate());

    _inlineAdaptiveAd = AdManagerBannerAd(
      // TODO: replace with your own ad unit.
      adUnitId: '<your-ad-unit>',
      size: size,
      request: AdManagerAdRequest(),
      listener: AdManagerBannerAdListener(
        onAdLoaded: (Ad ad) async {
          print('Inline adaptive banner loaded: ${ad.responseInfo}');

          // After the ad is loaded, get the platform ad size and use it to
          // update the height of the container. This is necessary because the
          // height can change after the ad is loaded.
          AdManagerBannerAd bannerAd = (ad as AdManagerBannerAd);
          final AdSize? size = await bannerAd.getPlatformAdSize();
          if (size == null) {
            print('Error: getPlatformAdSize() returned null for $bannerAd');
            return;
          }

          setState(() {
            _inlineAdaptiveAd = bannerAd;
            _isLoaded = true;
            _adSize = size;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('Inline adaptive banner failedToLoad: $error');
          ad.dispose();
        },
      ),
    );
    await _inlineAdaptiveAd!.load();
  }

  /// Gets a widget containing the ad, if one is loaded.
  ///
  /// Returns an empty container if no ad is loaded, or the orientation
  /// has changed. Also loads a new ad if the orientation changes.
  Widget _getAdWidget() {
    return OrientationBuilder(
      builder: (context, orientation) {
        if (_currentOrientation == orientation &&
            _inlineAdaptiveAd != null &&
            _isLoaded &&
            _adSize != null) {
          return Align(
              child: Container(
            width: _adWidth,
            height: _adSize!.height.toDouble(),
            child: AdWidget(
              ad: _inlineAdaptiveAd!,
            ),
          ));
        }
        // Reload the ad if the orientation changes.
        if (_currentOrientation != orientation) {
          _currentOrientation = orientation;
          _loadAd();
        }
        return Container();
      },
    );
  }

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(
        title: Text('Inline adaptive banner example'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: _insets),
          child: ListView.separated(
            itemCount: 20,
            separatorBuilder: (BuildContext context, int index) {
              return Container(
                height: 40,
              );
            },
            itemBuilder: (BuildContext context, int index) {
              if (index == 10) {
                return _getAdWidget();
              }
              return Text(
                'Placeholder text',
                style: TextStyle(fontSize: 24),
              );
            },
          ),
        ),
      ));

  @override
  void dispose() {
    super.dispose();
    _inlineAdaptiveAd?.dispose();
  }
}