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

ネイティブ テンプレートは、コードを補完したネイティブ広告用のビューで、手間がかからないように設計されています 簡単に変更できますネイティブテンプレートでは あらかじめ用意されている Android および iOS レイアウトにしてください。また、 Dart API を使ってネイティブアセットを 作成できます

このガイドでは、Dart API を使用して基盤となる 広告のレンダリングが行われます

前提条件

  • Flutter 2.4.0 以降。

必ずテスト広告でテストする

アプリを作成、テストする際は、テスト広告ではなく、 配信します。テスト広告を読み込むには、専用の ネイティブ広告のテスト広告ユニット ID:

Android

ca-app-pub-3940256099942544/2247696110

iOS

ca-app-pub-3940256099942544/3986624511

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

広告を読み込む

次の例では、medium サイズのネイティブ広告を使用してネイティブ広告を読み込みます template:

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

 // TODO: replace this test ad unit with your own ad unit.
 final String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// 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 AdRequest(),
        // 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();
  }
}

詳しくは、 NativeTemplateStyle および NativeTemplateTextStyle をご覧ください。

広告のカスタマイズ

ネイティブ テンプレートを使用してネイティブ広告をカスタマイズする場合は、広告の UI 設定 NativeTemplateStyle クラスに配置され、 追加することをおすすめします

テンプレートのサイズ

Flutter ネイティブ広告のテンプレートには、TemplateType.small と TemplateType.medium。小さなテンプレートは、TableView や GridView: インフィード広告、または細長い長方形の広告ビューが必要な場合。「 中程度のページビューから 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 String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// 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 AdRequest(),
        // 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 をウィジェットとして表示するには、 AdWidget load() を呼び出した後で、サポートされている広告を表示します。ウィジェットは作成する前に 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 アクセスする必要がなくなったら、破棄する必要があります。P-MAX は dispose() を呼び出すタイミングは、ネイティブ広告に関連付けられた AdWidget より後である ウィジェット ツリーと AdListener.onAdFailedToLoad() から削除されます。 呼び出すことができます。

次のステップ

GitHub 上のサンプル全体

ネイティブ テンプレート