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, których nie trzeba przewijać. 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ć kolejnej prośby o reklamę, 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 zostało 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 w 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.