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 korzystają z aplikacji, i mogą się automatycznie odświeżać po określonym czasie.

Z tego przewodnika dowiesz się, jak zacząć korzystać z zakotwiczonych banerów adaptacyjnych. Zakotwiczone banery adaptacyjne optymalizują rozmiar reklamy na każdym urządzeniu, używając określonej przez Ciebie szerokości reklamy.

Zakotwiczone banery adaptacyjne to reklamy o stałych proporcjach, a nie o stałym rozmiarze reklamy. Proporcje są podobne do 320 x 50. Gdy określisz pełną dostępną szerokość, Google Mobile Ads Flutter Plugin 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 się odświeża.

Zawsze testuj za pomocą reklam testowych

Podczas tworzenia i testowania aplikacji używaj reklam testowych, a nie reklam aktywnych. W przeciwnym razie Twoje konto może zostać zawieszone.

Najłatwiejszym sposobem wczytywania reklam testowych jest użycie naszego specjalnego identyfikatora jednostki reklamowej do testowania banerów:

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

Jednostki reklamowe do testowania 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

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

Aby poprosić o baner reklamowy o odpowiednim rozmiarze, wykonaj te czynności:

  1. Użyj MediaQuery.of(context), aby uzyskać szerokość ekranu urządzenia w pikselach niezależnych od gęstości (dp). 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.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 własnym identyfikatorem jednostki reklamowej.

Za pomocą BannerAdListener możesz nasłuchiwać zdarzeń cyklu życia, np. gdy reklama zostanie wczytana. 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 prosić o kolejną reklamę, gdy nie uda się jej wczytać. Google Mobile Ads Flutter Plugin uwzględnia każdą częstotliwość odświeżania określoną w interfejsie AdMob. Jeśli odświeżanie nie jest włączone, wyślij nowe żądanie. 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(). Możesz utworzyć widżet przed wywołaniem load(), ale load() musi zostać wywołane przed dodaniem go do drzewa widżetów.

AdWidget dziedziczy po klasie Widget Fluttera 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świetlić. 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!),
      ),
    ),
  ),

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

To wszystko. Twoja aplikacja jest teraz gotowa do wyświetlania banerów reklamowych.

Ograniczenie przewijania w Androidzie 9 i starszych wersjach

Wiemy, że niektóre starsze lub mniej wydajne urządzenia z Androidem 9 lub starszym mogą działać nieoptymalnie podczas wyświetlania banerów reklamowych w widokach z przewijaniem. Zalecamy używanie tych typów banerów tylko w Androidzie 10 lub nowszym. Banery o stałej pozycji, takie jak banery zakotwiczone, nie są objęte tym problemem i mogą być używane z optymalną wydajnością na wszystkich poziomach interfejsu API Androida.

Pełny przykład w GitHubie

Aby zobaczyć pełny przykład, zapoznaj się z prezentacją interfejsu API.

Więcej informacji o innych typach banerów

Zapoznaj się z innymi typami banerów zdefiniowanymi w tej sekcji na potrzeby 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, które umieszczają banery reklamowe w treściach z możliwością przewijania, zalecamy używanie wbudowanych banerów adaptacyjnych zamiast zakotwiczonych banerów adaptacyjnych. Więcej informacji znajdziesz w artykule Wbudowane banery adaptacyjne.

Banery zwijane

Banery reklamowe zwijane to banery reklamowe, 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 reklamowe zwijane.