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:
/6499/example/native
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 _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();
}
}
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 _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();
}
}
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()
.