Szablony natywne to widoki pełnego kodu reklam natywnych zaprojektowane z myślą o szybkim wdrożeniu i łatwym modyfikowaniu ich. Dzięki szablonom natywnym wtyczka udostępnia gotowe układy na Androida i iOS oraz pozwala dostosować styl zasobów natywnych za pomocą interfejsu Dart API.
W tym przewodniku pokazujemy, jak za pomocą interfejsu Dart API stylizować widoki platformy i renderować reklamę.
Wymagania wstępne
- Flutter w wersji 2.4.0 lub nowszej.
- Wykonaj czynności opisane w przewodniku dla początkujących.
- Zapoznaj się z opcjami reklam natywnych.
Zawsze testuj za pomocą reklam testowych
Podczas tworzenia i testowania aplikacji używaj reklam testowych, a nie aktywnych wersji produkcyjnej. Najłatwiejszym sposobem wczytywania reklam testowych jest użycie naszego dedykowanego identyfikatora testowej jednostki reklamowej na potrzeby reklam natywnych:
Android
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
Testowe jednostki reklamowe są tak skonfigurowane, aby zwracać reklamy testowe w przypadku każdego żądania, więc możesz ich używać w swoich aplikacjach podczas kodowania, testowania i debugowania. Pamiętaj tylko, aby przed opublikowaniem aplikacji zastąpić je własnymi identyfikatorami jednostek reklamowych.
Wczytaj reklamę
Ten przykład pokazuje, jak wczytać reklamę natywną przy użyciu szablonu natywnego o rozmiarze medium:
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();
}
}
Dostępne opcje stylu znajdziesz w sekcjach NativeTemplateStyle i NativeTemplateTextStyle.
Dostosuj reklamę
Podczas dostosowywania reklamy natywnej za pomocą szablonów natywnych konfiguracja jej interfejsu użytkownika będzie dostępna w klasie NativeTemplateStyle, co pozwoli Ci określić styl całej reklamy natywnej w kodzie Dart.
Rozmiary szablonów
Szablony reklam natywnych Flutter są dostępne w 2 typach: TemplateType.small i TemplateType.medium. Mały szablon doskonale sprawdzi się w przypadku TableView lub GridView, w przypadku reklam In-Feed i wszędzie tam, gdzie potrzebujesz wąskiego prostokątnego widoku reklamy. Szablon typu medium służy do wyświetlania stron w oknie od połowy do trzech czwartych, co idealnie sprawdza się w przypadku stron docelowych lub stron powitalnych.
| Mały | |
|---|---|
 Android |
 iOS |
| Medium | |
 Android |
 iOS |
Zdarzenia reklam natywnych
Aby otrzymywać powiadomienia o zdarzeniach związanych z interakcjami z reklamami natywnymi, używaj właściwości listener tej reklamy. Następnie zaimplementuj NativeAdListener, aby otrzymywać wywołania zwrotne zdarzeń reklamowych.
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();
}
}
Reklama displayowa
Aby wyświetlić NativeAd jako widżet, musisz utworzyć instancję AdWidget z obsługiwaną reklamą po wywołaniu parametru load(). Możesz utworzyć widżet przed wywołaniem funkcji load(), ale przed dodaniem go do drzewa widżetów trzeba wywołać metodę load().
AdWidget dziedziczy z klasy Widget Flutter i można go używać jak każdego innego widżetu. W iOS umieść widżet w kontenerze o określonej szerokości i wysokości. W przeciwnym razie reklama może się nie wyświetlać.
// 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!),
);
Usuń reklamę
NativeAd należy zutylizować, gdy dostęp do niego nie jest już potrzebny. Sprawdzoną metodą wywołania dispose() jest usunięcie elementu AdWidget powiązanego z reklamą natywną z drzewa widżetów i z wywołania zwrotnego AdListener.onAdFailedToLoad().
Dalsze kroki
- Więcej informacji o reklamach natywnych znajdziesz w naszym przewodniku po reklamach natywnych.
- Zobacz zasady i wskazówki dotyczące reklam natywnych.
- Oto kilka historii sukcesu klientów: studium przypadku 1, studium przypadku 2.