Banery reklamowe zajmują miejsce w układzie aplikacji – u góry lub u dołu ekranu urządzenia. Pozostają na ekranie, gdy użytkownicy wchodzą w interakcję z aplikacją, i mogą odświeżać się automatycznie po upływie określonego czasu.
Z tego przewodnika dowiesz się, jak zintegrować banery reklamowe AdMob z Aplikacja Flutter. Oprócz fragmentów kodu i instrukcji znajdziesz też na temat prawidłowego dobierania rozmiaru banerów.
Zawsze korzystaj z reklam testowych
Podczas tworzenia i testowania aplikacji używaj reklam testowych, a nie reklam, aktywne reklamy. Jeśli tego nie zrobisz, możemy zawiesić Twoje konto.
Najłatwiejszym sposobem wczytania reklam testowych jest użycie specjalnego identyfikatora testowego banery:
Android
ca-app-pub-3940256099942544/6300978111
iOS
ca-app-pub-3940256099942544/2934735716
testowe jednostki reklamowe są tak skonfigurowane, aby zwracać reklamy testowe w przypadku 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 przed opublikowaniem .
Wczytywanie reklamy
Ten przykład tworzy wystąpienie banera reklamowego:
class BannerExampleState extends State<BannerExample> { BannerAd? _bannerAd; bool _isLoaded = false; // TODO: replace this test ad unit with your own ad unit. final adUnitId = Platform.isAndroid ? 'ca-app-pub-3940256099942544/6300978111' : 'ca-app-pub-3940256099942544/2934735716'; /// Loads a banner ad. void loadAd() { _bannerAd = BannerAd( adUnitId: adUnitId, request: const AdRequest(), size: AdSize.banner, listener: BannerAdListener( // Called when an ad is successfully received. onAdLoaded: (ad) { debugPrint('$ad loaded.'); setState(() { _isLoaded = true; }); }, // Called when an ad request failed. onAdFailedToLoad: (ad, err) { debugPrint('BannerAd failed to load: $error'); // Dispose the ad here to free resources. ad.dispose(); }, ), )..load(); } }
Rozmiary banerów
W tabeli poniżej znajdziesz standardowe rozmiary banerów.
Rozmiar w dp (szer.xwys.) | Opis | Stała rozmiar reklamy |
---|---|---|
320 x 50 | Standardowy baner | banner
|
320 x 100 | Duży baner | largeBanner
|
320 × 250 | Średni prostokąt | mediumRectangle
|
468 x 60 | Baner w pełnym rozmiarze | fullBanner
|
728 x 90 | Tabela wyników | leaderboard
|
Podana szerokość x Wysokość adaptacyjna | Baner adaptacyjny | Nie dotyczy |
Aby zdefiniować niestandardowy rozmiar banera, ustaw preferowany AdSize
:
final AdSize adSize = AdSize(300, 50);
Zdarzenia dotyczące banerów reklamowych
Dzięki interfejsowi BannerAdListener
możesz nasłuchiwać zdarzeń cyklu życia, takich jak
tak jak przy wczytywaniu reklamy. Ten przykład implementuje każdą metodę i rejestruje komunikat
do konsoli:
class BannerExampleState extends State<BannerExample> { BannerAd? _bannerAd; bool _isLoaded = false; // TODO: replace this test ad unit with your own ad unit. final adUnitId = Platform.isAndroid ? 'ca-app-pub-3940256099942544/6300978111' : 'ca-app-pub-3940256099942544/2934735716'; /// Loads a banner ad. void loadAd() { _bannerAd = BannerAd( adUnitId: adUnitId, request: const AdRequest(), size: AdSize.banner, listener: BannerAdListener( // Called when an ad is successfully received. onAdLoaded: (ad) { debugPrint('$ad loaded.'); setState(() { _isLoaded = true; }); }, // Called when an ad request failed. onAdFailedToLoad: (ad, err) { debugPrint('BannerAd failed to load: $error'); // Dispose the ad here to free resources. ad.dispose(); }, // Called when an ad opens an overlay that covers the screen. onAdOpened: (Ad ad) {}, // Called when an ad removes an overlay that covers the screen. onAdClosed: (Ad ad) {}, // Called when an impression occurs on the ad. onAdImpression: (Ad ad) {}, ), )..load(); } }
Wyświetlanie banera reklamowego
Aby wyświetlić BannerAd
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.
Komponent AdWidget
dziedziczy dane z klasy widżetu Flutter i można go używać jak każdej innej
widżet. W iOS umieść widżet w widżecie o określonym
szerokości i wysokości. W przeciwnym razie reklama może się nie wyświetlić. BannerAd
można umieścić w kontenerze o rozmiarze pasującym do reklamy:
... if (_bannerAd != null) { Align( alignment: Alignment.bottomCenter, child: SafeArea( child: SizedBox( width: _bannerAd!.size.width.toDouble(), height: _bannerAd!.size.height.toDouble(), child: AdWidget(ad: _bannerAd!), ), ), ) } ...
Reklamę należy wyrzucić, gdy dostęp do niej nie jest już potrzebny. Sprawdzona metoda
aby określić, kiedy należy wywołać funkcję dispose()
po usunięciu elementu AdWidget
z
drzewo widżetów lub w narzędziu BannerAdListener.onAdFailedToLoad()
oddzwanianie.
Znakomicie. Twoja aplikacja jest już gotowa do wyświetlania banerów reklamowych.
Ograniczenie przewijania w Androidzie 9 i starszych
Zdajemy sobie sprawę, że niektóre starsze lub mniej wydajne urządzenia z Androidem 9 lub wcześniejsze wyniki mogą mieć nieoptymalną skuteczność. podczas wyświetlania banerów reklamowych w obrębie przewijanych widoków. Zalecamy tylko za pomocą tego typu banerów w Androidzie 10 lub nowszym. Banery o stałej pozycji, takie jak , ponieważ nie wpływa to na zakotwiczone banery i można ich używać z optymalną wydajnością wszystkich poziomów API na Androida.