Szablony natywne to widoki pełnego kodu reklam natywnych, zaprojektowane z myślą o szybkości implementacji i łatwej modyfikacji. W przypadku szablonów natywnych wtyczka zapewnia gotowych układów na Androida i iOS. Możesz też dostosować styl zasobów natywnych za pomocą interfejsu Dart API.
Ten przewodnik pokazuje, jak za pomocą interfejsu Dart API stylizować wyświetlenia platformy i renderowanie reklamy.
Wymagania wstępne
- Flutter w wersji 2.4.0 lub nowszej.
- Zapoznaj się z przewodnikiem dla początkujących.
- Zapoznaj się z opcjami reklam natywnych.
Zawsze korzystaj z reklam testowych
Podczas tworzenia i testowania aplikacji używaj reklam testowych, a nie reklam, aktywne reklamy. Najłatwiejszym sposobem wczytywania reklam testowych jest użycie naszego specjalnego identyfikator testowej jednostki reklamowej dla reklam natywnych:
/6499/example/native
Testowe jednostki reklamowe są skonfigurowane tak, aby zwracać reklamy testowe dla każdego żądania, możesz używać ich we własnych aplikacjach podczas kodowania, testowania i debugowania – pamiętaj tylko, aby zastąpić je własnymi identyfikatorami jednostek reklamowych publikowanie aplikacji.
Wczytaj reklamę
Ten przykład wczytuje reklamę natywną przy użyciu formatu natywnego o rozmiarze medium
szablon:
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();
}
}
Zobacz
NativeTemplateStyle
oraz
NativeTemplateTextStyle
, aby poznać dostępne opcje stylizacji.
Dostosuj reklamę
Podczas dostosowywania reklamy natywnej za pomocą szablonów natywnych konfiguracja interfejsu reklamy
będzie działać w klasie NativeTemplateStyle
, co pozwoli Ci określić styl całego
reklama natywna w Dart Code.
Rozmiary szablonów
Szablony reklam natywnych Flutter są dostępne w 2 typach: TemplateType.small
oraz
TemplateType.medium
Mały szablon jest idealny dla TableView
lub
GridView
w przypadku reklam In-Feed lub tam, gdzie potrzebujesz wąskiego prostokątnego widoku reklamy.
średni szablon to wyświetlenie strony
od połowy do trzech czwartych długości,
idealnie sprawdza się w przypadku stron docelowych i powitalnych.
Mały | |
---|---|
![]() Android |
![]() iOS |
Średni | |
![]() Android |
![]() iOS |
Zdarzenia reklamy natywnej
Aby otrzymywać powiadomienia o zdarzeniach związanych z interakcjami z reklamą natywną, skorzystaj z funkcji
listener
właściwości 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 load()
. Widżet możesz utworzyć przed
wywołuję load()
, ale trzeba wywołać funkcję load()
przed dodaniem jej do widżetu
drzewo.
Pole AdWidget
dziedziczy z klasy Widget
Flutter i może być używana jak każda inna
widżet. W iOS umieść widżet w kontenerze o określonej
szerokości i wysokości. W przeciwnym razie reklama może się nie wyświetlić.
// 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ę
O
NativeAd
można je usunąć, gdy dostęp do nich nie jest już potrzebny. Sprawdzone metody
czas wywołania funkcji dispose()
po AdWidget
powiązanym z reklamą natywną
zostanie usunięty z drzewa widżetów i w narzędziu AdListener.onAdFailedToLoad()
.
oddzwanianie.