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 pewnym czasie.
Z tego przewodnika dowiesz się, jak zintegrować banery reklamowe z AdMob z aplikacją Flutter. Oprócz fragmentów kodu i instrukcji zawiera też informacje o prawidłowym rozmiarze banerów.
Zawsze testuj za pomocą reklam testowych
Podczas tworzenia i testowania aplikacji używaj reklam testowych, a nie aktywnych wersji produkcyjnej. Jeśli tego nie zrobisz, Twoje konto może zostać zawieszone.
Najłatwiejszym sposobem wczytywania reklam testowych jest użycie naszego dedykowanego testowego identyfikatora jednostki reklamowej na banerach:
/6499/example/banner
Testowe jednostki reklamowe są tak skonfigurowane, aby zwracać reklamy testowe w odpowiedzi na każde żądanie. Możesz ich swobodnie używać w swoich aplikacjach podczas kodowania, testowania i debugowania. Pamiętaj, aby przed opublikowaniem aplikacji zastąpić je własnymi identyfikatorami jednostek reklamowych.
Wczytywanie reklamy
Ten przykład tworzy instancję banera reklamowego:
class BannerExampleState extends State<BannerExample> { AdManagerBannerAd? _bannerAd; bool _isLoaded = false; // TODO: replace this test ad unit with your own ad unit. final adUnitId = '/6499/example/banner'; /// Loads a banner ad. void loadAd() { _bannerAd = AdManagerBannerAd( adUnitId: adUnitId, request: const AdManagerAdRequest(), size: AdSize.banner, listener: AdManagerBannerAdListener( // 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('AdManagerBannerAd 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. x wys.) | Opis | Stała AdSize |
---|---|---|
320x50 | Standardowy baner | banner
|
320 x 100 | Duży baner | largeBanner
|
320 × 250 | Średni prostokąt | mediumRectangle
|
468 x 60 | Baner pełnowymiarowy | fullBanner
|
728 x 90 | Tabela wyników | leaderboard
|
Podana szerokość x adaptacyjna wysokość | Baner adaptacyjny | Nie dotyczy |
Aby zdefiniować niestandardowy rozmiar banera, ustaw preferowany rozmiar banera AdSize
:
final AdSize adSize = AdSize(300, 50);
Zdarzenia dotyczące banerów reklamowych
Za pomocą interfejsu AdManagerBannerAdListener
możesz nasłuchiwać zdarzeń cyklu życia, np. podczas wczytywania reklamy. W tym przykładzie implementujemy każdą metodę i rejestrujemy komunikat w konsoli:
class BannerExampleState extends State<BannerExample> { AdManagerBannerAd? _bannerAd; bool _isLoaded = false; // TODO: replace this test ad unit with your own ad unit. final adUnitId = '/6499/example/banner'; /// Loads a banner ad. void loadAd() { _bannerAd = AdManagerBannerAd( adUnitId: adUnitId, request: const AdManagerAdRequest(), size: AdSize.banner, listener: AdManagerBannerAdListener( // 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('AdManagerBannerAd 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ć AdManagerBannerAd
jako widżet, musisz utworzyć instancję AdWidget
z obsługiwaną reklamą po wywołaniu 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 widżetu Flutter i można go używać 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świetlać. Element AdManagerBannerAd
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 zutylizować, gdy dostęp do niej nie jest już potrzebny. Sprawdzoną metodą wywołania dispose()
jest usunięcie elementu AdWidget
z drzewa widżetów lub wywołanie zwrotne AdManagerBannerAdListener.onAdFailedToLoad()
.
Znakomicie. W Twojej aplikacji są już gotowe 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ść przy wyświetlaniu wbudowanych banerów reklamowych w widokach przewijanych. Zalecamy korzystanie tylko z tych typów banerów na Androidzie 10 i nowszych. Nie wpływa to na banery o stałej pozycji, np. banery zakotwiczone. Można ich używać z optymalną skutecznością na wszystkich poziomach interfejsu API Androida.