ネイティブ テンプレートは、コードを補完したネイティブ広告用のビューで、手間がかからないように設計されています 簡単に変更できますネイティブテンプレートでは あらかじめ用意されている Android および iOS レイアウトにしてください。また、 Dart API を使ってネイティブアセットを 作成する方法を学びました
このガイドでは、Dart API を使用して基盤となる 広告のレンダリングが行われます
前提条件
- Flutter 2.4.0 以降。
- スタートガイドを完了している。
- ネイティブ広告のオプションを十分に理解します。
必ずテスト広告でテストする
アプリを作成、テストする際は、テスト広告ではなく、 配信します。テスト広告を読み込むには、専用の ネイティブ広告のテスト広告ユニット ID:
/6499/example/native
テスト広告ユニットは、リクエストごとにテスト広告を返すように構成されているため、 開発する際は、ご自身のアプリでコーディング、テスト、 使用する前に、必ずご自身の広告ユニット 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 _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();
}
}
詳しくは、
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 _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
をウィジェットとして表示するには、
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()
から削除されます。
呼び出すことができます。