Baner

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:

ca-app-pub-3940256099942544/6300978111

ca-app-pub-3940256099942544/2934735716

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> {
  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.

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 BannerAdListener 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> {
  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(). 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 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 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 BannerAdListener.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.

Uzupełnij przykład na GitHubie

Baner