Baner

Wybierz platformę: Android iOS Unity Flutter

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.

Ten przewodnik pomoże Ci zacząć korzystać z zakotwiczonych banerów adaptacyjnych. Zakotwiczone banery adaptacyjne optymalizują rozmiar reklamy na każdym urządzeniu, korzystając z określonej przez Ciebie szerokości reklamy.

Zakotwiczone banery adaptacyjne to reklamy o stałych proporcjach, a nie reklamy o stałym rozmiarze. Format obrazu jest podobny do formatu 320x50. Gdy określisz pełną dostępną szerokość, pakiet SDK do reklam mobilnych Google zwróci reklamę o optymalnej wysokości dla tej szerokości. Optymalna wysokość reklamy pozostaje stała w przypadku różnych żądań reklamy, a treści otaczające reklamę pozostają na swoim miejscu, gdy reklama jest odświeżana.

Zawsze testuj za pomocą reklam testowych

Podczas tworzenia i testowania aplikacji używaj reklam testowych zamiast reklam produkcyjnych. Jeśli tego nie zrobisz, Twoje konto może zostać zawieszone.

Najłatwiejszym sposobem wczytywania reklam testowych jest użycie specjalnego identyfikatora testowej jednostki reklamowej w przypadku banerów:

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

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. Pamiętaj tylko, aby przed opublikowaniem aplikacji zastąpić je własnymi identyfikatorami jednostek reklamowych.

Pobieranie rozmiaru reklamy

Aby wysłać żądanie dotyczące banera reklamowego o odpowiednim rozmiarze, wykonaj te czynności:

  1. Pobierz szerokość ekranu urządzenia w pikselach niezależnych od gęstości (dp) za pomocą funkcji MediaQuery.of(context). Jeśli nie chcesz używać pełnej szerokości ekranu, możesz ustawić własną szerokość.

  2. Aby uzyskać obiekt AdSize, użyj odpowiedniej metody statycznej w klasie AdSize. Na przykład użyj AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width), aby uzyskać rozmiar reklamy w bieżącej orientacji.

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
  MediaQuery.sizeOf(context).width.truncate(),
);
main.dart

Wczytywanie reklamy

Poniższy przykład pokazuje wczytywanie banera reklamowego:

void _loadAd() async {
  // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
  final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
    MediaQuery.sizeOf(context).width.truncate(),
  );

  if (size == null) {
    // Unable to get width of anchored banner.
    return;
  }

  BannerAd(
    adUnitId: _adUnitId,
    request: const AdRequest(),
    size: size,
    listener: BannerAdListener(
      onAdLoaded: (ad) {
        // Called when an ad is successfully received.
        debugPrint("Ad was loaded.");
        setState(() {
          _bannerAd = ad as BannerAd;
        });
      },
      onAdFailedToLoad: (ad, err) {
        // Called when an ad request failed.
        debugPrint("Ad failed to load with error: $err");
        ad.dispose();
      },
    ),
  ).load();
}
main.dart

Za pomocą BannerAdListener możesz nasłuchiwać zdarzeń związanych z cyklem życia, takich jak wczytanie reklamy. Ten przykład implementuje każdą metodę i rejestruje w konsoli komunikat:

onAdOpened: (Ad ad) {
  // Called when an ad opens an overlay that covers the screen.
  debugPrint("Ad was opened.");
},
onAdClosed: (Ad ad) {
  // Called when an ad removes an overlay that covers the screen.
  debugPrint("Ad was closed.");
},
onAdImpression: (Ad ad) {
  // Called when an impression occurs on the ad.
  debugPrint("Ad recorded an impression.");
},
onAdClicked: (Ad ad) {
  // Called when an a click event occurs on the ad.
  debugPrint("Ad was clicked.");
},
onAdWillDismissScreen: (Ad ad) {
  // iOS only. Called before dismissing a full screen view.
  debugPrint("Ad will be dismissed.");
},
main.dart

Odświeżanie reklamy

Jeśli jednostka reklamowa jest skonfigurowana do odświeżania, nie musisz wysyłać kolejnej prośby o reklamę, gdy nie uda się jej wczytać. Pakiet SDK do reklam mobilnych Google uwzględnia każdą częstotliwość odświeżania określoną w interfejsie AdMob. Jeśli nie masz włączonego odświeżania, wyślij nową prośbę. Więcej informacji o odświeżaniu jednostek reklamowych, np. o ustawianiu częstotliwości odświeżania, znajdziesz w artykule Używanie opcji automatycznego odświeżania w przypadku banerów reklamowych.

Wyświetlanie banera reklamowego

Aby wyświetlić BannerAd jako widżet, musisz utworzyć instancję AdWidget z obsługiwaną reklamą po wywołaniu funkcji load(). Widżet możesz utworzyć przed wywołaniem funkcji load(), ale funkcja load() musi zostać wywołana przed dodaniem widżetu do drzewa widżetów.

AdWidget dziedziczy po klasie Widget w Flutterze i może być używany jak każdy inny widżet. W systemie 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ć. BannerAdmoże być umieszczony 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!),
      ),
    ),
  ),
main.dart

Reklamę należy usunąć, gdy dostęp do niej nie jest już potrzebny. Najlepszym rozwiązaniem jest wywołanie funkcji dispose() po usunięciu elementu AdWidget z drzewa widżetów lub w wywołaniu zwrotnym BannerAdListener.onAdFailedToLoad().

Znakomicie. Aplikacja jest teraz gotowa do wyświetlania reklam banerowych.

Ograniczenie przewijania na Androidzie 9 i starszych wersjach

Wiemy, że niektóre starsze lub mniej wydajne urządzenia z Androidem 9 lub starszym mogą mieć nieoptymalną wydajność podczas wyświetlania reklam banerowych w treści w widokach przewijanych. Zalecamy używanie tych typów banerów tylko na urządzeniach z Androidem 10 lub nowszym. Nie dotyczy to banerów o stałej pozycji, takich jak banery zakotwiczone. Można ich używać z optymalną skutecznością na wszystkich poziomach API Androida.

Pełny przykład w GitHubie

Pełny przykład integracji banera opisanej na tej stronie znajdziesz w pliku banner_example.

Więcej informacji o innych typach banerów

Zapoznaj się z innymi typami banerów zdefiniowanymi w tej sekcji dla aplikacji Flutter.

Wbudowane banery adaptacyjne

Wbudowane banery adaptacyjne mają zmienną wysokość i są większe i wyższe od zakotwiczonych banerów adaptacyjnych. W przypadku aplikacji, w których banery reklamowe są umieszczane w treściach, które można przewijać, zalecane są śródtekstowe banery adaptacyjne zamiast zakotwiczonych banerów adaptacyjnych. Więcej informacji znajdziesz w artykule Banery adaptacyjne w tekście.

Banery zwijane

Banery zwijane to reklamy banerowe, które początkowo wyświetlają się jako większa nakładka z przyciskiem umożliwiającym zwinięcie reklamy do mniejszego rozmiaru. Rozważ użycie tego banera, aby jeszcze bardziej zoptymalizować skuteczność. Więcej informacji znajdziesz w artykule zwijane banery reklamowe.