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 upływie określonego czasu.

Z tego przewodnika dowiesz się, jak zintegrować banery reklamowe z Ad Managera w 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:

/21775744923/example/adaptive-banner

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

W tym przykładzie instancjonujemy baner reklamowy:

class BannerExampleState extends State<BannerExample> {
  AdManagerBannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/21775744923/example/adaptive-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.

Aby zdefiniować niestandardowy rozmiar banera, ustaw preferowany AdSize:

final AdSize adSize = AdSize(300, 50);

Zdarzenia związane z banerami reklamowymi

Dzięki interfejsowi AdManagerBannerAdListener 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> {
  AdManagerBannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/21775744923/example/adaptive-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ć widget przed wywołaniem funkcji load(), ale musisz wywołać funkcję load() przed dodaniem widgetu do drzewa widgetów.

Komponent AdWidget dziedziczy dane z klasy widżetu Flutter i może być używana jak każda inna widżet. Na iOS upewnij się, że widżet jest umieszczony w widżecie o określonej szerokości i wysokości. W przeciwnym razie reklama może się nie wyświetlić. AdManagerBannerAdmoż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 AdManagerBannerAdListener.onAdFailedToLoad() oddzwanianie.

Znakomicie. Twoja aplikacja jest teraz gotowa do wyświetlania reklam typu baner.

Ograniczenie przewijania na 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.