Konfigurowanie banerów reklamowych

Wybierz platformę: Android iOS Unity Flutter Android (starsza wersja)

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 zacząć korzystać z zakotwiczonych banerów adaptacyjnych. Zakotwiczone banery adaptacyjne optymalizują rozmiar reklamy na każdym urządzeniu, korzystając z określonej szerokości reklamy.

Zakotwiczone banery adaptacyjne to reklamy o stałych proporcjach, a nie reklamy o stałym rozmiarze. Format obrazu jest podobny do 320x50. Gdy określisz pełną dostępną szerokość, Google Mobile Ads Flutter Pluginzwró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. Zanim opublikujesz aplikację, zastąp je identyfikatorami swoich jednostek reklamowych.

Pobieranie rozmiaru reklamy

Duże banery adaptacyjne to większy format przeznaczony do układów, w których nie trzeba przewijać treści. W porównaniu ze standardowymi zakotwiczonymi banerami adaptacyjnymi te banery mają większą maksymalną wysokość (do 20% wysokości ekranu, od 50 do 150 dp). Ta większa przestrzeń jest zoptymalizowana pod kątem treści wideo.

Aby poprosić o baner reklamowy 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. Możesz na przykład użyć AdSize.getLargeAnchoredAdaptiveBannerAdSize(int width), aby uzyskać rozmiar reklamy w bieżącej orientacji.

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

Wczytywanie reklamy

Poniższy przykład wczytuje baner reklamowy:

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

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

  unawaited(
    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(),
  );
}

Zastąp _adUnitId identyfikatorem swojej jednostki reklamowej.

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

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 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.');
},

Odświeżanie reklamy

Jeśli jednostka reklamowa jest skonfigurowana do odświeżania, nie musisz wysyłać kolejnego żądania reklamy, gdy nie uda się jej wczytać. Google Mobile Ads Flutter Plugin respektuje każdą częstotliwość odświeżania określoną w interfejsie AdMob. Jeśli odświeżanie nie jest włączone, 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 load(). Widżet możesz utworzyć przed wywołaniem funkcji load(), ale przed dodaniem go do drzewa widżetów musisz wywołać funkcję load().

AdWidget dziedziczy po klasie Widget platformy Flutter i może być używany jak każdy inny widżet. 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ć. BannerAd może być umieszczona 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 usunąć, gdy nie jest już potrzebna. 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().

To wszystko. Aplikacja jest już gotowa do wyświetlania reklam banerowych.

Ograniczenie przewijania na urządzeniach z Androidem 9 i starszymi wersjami

Wiemy, że niektóre starsze lub mniej wydajne urządzenia z Androidem 9 lub starszym mogą mieć nieoptymalną wydajność podczas wyświetlania banerów wbudowanych w widokach przewijanych. Zalecamy używanie tych typów banerów tylko na urządzeniach z Androidem 10 lub nowszym. Nie ma to wpływu na banery o stałej pozycji, takie jak banery kotwiczone, które można wyświetlać z optymalną skutecznością na wszystkich poziomach API Androida.

Pełny przykład na GitHubie

Pełny przykład znajdziesz w wersji demonstracyjnej interfejsu API.

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 od zakotwiczonych banerów adaptacyjnych. W przypadku aplikacji, w których reklamy banerowe są umieszczane w przewijanych treściach, zalecane są śródtekstowe banery adaptacyjne zamiast zakotwiczonych banerów adaptacyjnych. Więcej informacji znajdziesz w artykule o banerach adaptacyjnych w treści.

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 banery zwijane.