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ą być automatycznie odświeżane 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 testuj reklamy za pomocą 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ą skonfigurowane tak, aby zwracać reklamy testowe w przypadku każdego żądania. Możesz ich używać w swoich aplikacjach podczas kodowania, testowania i debugowania. Zanim opublikujesz aplikację, pamiętaj, aby 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. x wys.) | 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 związane z banerami reklamowymi
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 funkcji load()
. Możesz utworzyć widget przed wywołaniem funkcji load()
, ale musisz wywołać funkcję load()
przed dodaniem widgetu do drzewa widgetów.
AdWidget
dziedziczy po klasie Widget w Flutterze i może być używany jak każdy inny 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świetlać. BannerAd
można umieścić w kontenerze o odpowiednim rozmiarze:
... 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
Wiemy, że niektóre starsze lub mniej wydajne urządzenia z Androidem 9 lub wcześniejszą wersją mogą mieć niedostateczną wydajność podczas wyświetlania reklam banerowych w in-line w widokach przewijania. Zalecamy używanie tych typów banerów tylko na urządzeniach z Androidem w wersji 10 lub nowszej. Nie dotyczy to banerów o stałym położeniu, takich jak banery zakotwiczone, które mogą być używane z optymalną skutecznością na wszystkich poziomach interfejsu API Androida.