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, używając określonej przez Ciebie szerokości reklamy.

Zakotwiczone banery adaptacyjne mają stałe proporcje, a nie stały rozmiar. 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ść otaczająca reklamę pozostaje 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. Jeśli tego nie zrobisz, 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 mają 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 prawidłowym rozmiarze, wykonaj te czynności:

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

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

// 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;
  }

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

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świetlać. 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 na 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 śródtekstowych w widokach z przewijaniem. Zalecamy używanie tych typów banerów tylko na 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 na GitHubie

Pełny przykład integracji banerów 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 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ści 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 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 zwijane.