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 z AdMob z aplikacją Flutter. Oprócz fragmentów kodu i instrukcji znajdziesz w nim też informacje o prawidłowym dobieraniu rozmiaru banerów.
Zawsze korzystaj z reklam testowych
Podczas tworzenia i testowania aplikacji używaj reklam testowych, a nie produkcyjnych reklam. Jeśli tego nie zrobisz, możemy zawiesić Twoje konto.
Najłatwiejszym sposobem wczytywania reklam testowych jest użycie naszego dedykowanego testowego identyfikatora jednostki reklamowej dla banerów:
Android
ca-app-pub-3940256099942544/6300978111
iOS
ca-app-pub-3940256099942544/2934735716
Testowe jednostki reklamowe są skonfigurowane tak, aby zwracać reklamy testowe w przypadku każdego żądania. Możesz ich używać we własnych aplikacjach podczas kodowania, testowania i debugowania. Pamiętaj tylko, aby przed opublikowaniem aplikacji zastąpić je własnymi identyfikatorami jednostek reklamowych.
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
BannerAdListener
umożliwia nasłuchiwanie zdarzeń cyklu życia, np. wczytywania reklamy. Ten przykład implementuje każdą metodę i rejestruje komunikat w 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 po wywołaniu load()
utworzyć instancję AdWidget
z obsługiwaną reklamą. Możesz utworzyć widżet przed wywołaniem funkcji load()
, ale przed dodaniem go do drzewa widżetów trzeba wywołać funkcję load()
.
Komponent AdWidget
dziedziczy z klasy widżetu Flutter i może być używany jak każdego innego widżetu. W iOS umieść widżet w widżecie o określonej szerokości i wysokości. W przeciwnym razie reklama może się nie wyświetlić. Element 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. Najlepiej wywoływać metodę dispose()
po usunięciu elementu AdWidget
z drzewa widżetów lub w wywołaniu zwrotnym BannerAdListener.onAdFailedToLoad()
.
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 starszym mogą mieć nieoptymalną skuteczność podczas wyświetlania wbudowanych banerów reklamowych w widokach przewijania. Zalecamy używanie takich banerów tylko na Androidzie 10 lub nowszym. Nie ma to wpływu na banery ze stałą pozycją, takie jak banery zakotwiczone, i można ich używać z optymalną wydajnością na wszystkich poziomach interfejsu API Androida.