Dart のネイティブ テンプレート

ネイティブ テンプレートはネイティブ広告の完全なコードビューです。テンプレートは実装が簡単で、変更も簡単です。このプラグインはネイティブ テンプレートに対応しており、Android および iOS 用のレイアウトがあらかじめ用意されています。Dart API を使用してネイティブ アセットのスタイルをカスタマイズすることも可能です。

このガイドでは、Dart API を使用して基盤となるプラットフォーム ビューをスタイル化し、広告をレンダリングする方法について説明します。

Prerequisites

  • Flutter 2.4.0 以降。

常にテスト広告でテストする

アプリを作成してテストする際は、実際の本番環境広告ではなく、テスト広告を使用してください。テスト広告を読み込む際は、次に示す専用のネイティブ広告 ID を使うと簡単です。

  • /6499/example/native

テスト広告ユニットは、リクエストごとにテスト広告を返すように構成されているため、コーディング、テスト、デバッグの際にご自身のアプリでテスト広告を使用できます。アプリを公開する前に、ご自身の広告ユニット ID に置き換えてください。

広告の読み込み

次の例では、medium サイズのネイティブ テンプレートを使用してネイティブ広告を読み込みます。

class NativeExampleState extends State<NativeExample> {
  NativeAd? nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final _adUnitId = '/6499/example/native';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            debugPrint('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            debugPrint('$NativeAd failed to load: $error');
            ad.dispose();
          },
        ),
        request: const AdManagerAdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

使用可能なスタイル オプションについては、NativeTemplateStyleNativeTemplateTextStyle をご覧ください。

広告のカスタマイズ

ネイティブ テンプレートを使用してネイティブ広告をカスタマイズする場合、広告の UI 構成が NativeTemplateStyle クラスで記述されるため、Dart コード内でネイティブ広告全体のスタイルを設定できます。

テンプレート サイズ

Flutter ネイティブ広告テンプレートには、TemplateType.smallTemplateType.medium の 2 種類があります。小さいテンプレートは、TableViewGridView のほか、インフィード広告や、細長い長方形の広告ビューが必要な場所に適しています。中程度のテンプレートで、半分から 3/4 のページビューが想定されており、ランディング ページまたはスプラッシュ ページに最適です。


Android

iOS
普通

Android

iOS

ネイティブ広告イベント

ネイティブ広告のインタラクションに関連するイベント通知を受け取るには、広告の listener プロパティを使用します。次に、広告イベントのコールバックを受け取るために、NativeAdListener を実装します。

class NativeExampleState extends State<NativeExample> {
  NativeAd? _nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final _adUnitId = '/6499/example/native';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            print('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            print('$NativeAd failedToLoad: $error');
            ad.dispose();
          },
          // Called when a click is recorded for a NativeAd.
          onAdClicked: (ad) {},
          // Called when an impression occurs on the ad.
          onAdImpression: (ad) {},
          // Called when an ad removes an overlay that covers the screen.
          onAdClosed: (ad) {},
          // Called when an ad opens an overlay that covers the screen.
          onAdOpened: (ad) {},
          // For iOS only. Called before dismissing a full screen view
          onAdWillDismissScreen: (ad) {},
          // Called when an ad receives revenue value.
          onPaidEvent: (ad, valueMicros, precision, currencyCode) {},
        ),
        request: const AdManagerAdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

表示広告

NativeAd をウィジェットとして表示するには、load() を呼び出した後、サポートされている広告を使用して AdWidget をインスタンス化する必要があります。ウィジェットは load() を呼び出す前に作成できますが、ウィジェット ツリーに追加する前に load() を呼び出す必要があります。

AdWidget は Flutter の Widget クラスから継承されており、他のウィジェットと同様に使用できます。iOS では、ウィジェットを指定された幅と高さのコンテナ内に配置します。そうしないと、広告が表示されないことがあります。

// Small template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 90, // minimum recommended height
    maxWidth: 400,
    maxHeight: 200,
  ),
  child: AdWidget(ad: _nativeAd!),
);

// Medium template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 320, // minimum recommended height
    maxWidth: 400,
    maxHeight: 400,
  ),
  child: AdWidget(ad: _nativeAd!),
);

広告を破棄

NativeAd へのアクセスが不要になった場合は、破棄する必要があります。dispose() を呼び出すときのベスト プラクティスは、ネイティブ広告に関連付けられた AdWidget をウィジェット ツリーから削除し、AdListener.onAdFailedToLoad() コールバックで削除することです。