Konfigurowanie banerów reklamowych

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 na wczytanie reklam testowych jest użycie naszego specjalnego identyfikatora jednostki reklamowej do testowania banerów:

/21775744923/example/adaptive-banner

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

Aby poprosić o baner reklamowy o prawidłowym rozmiarze, wykonaj te czynności:

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ść.
Aby uzyskać obiekt AdSize, użyj odpowiedniej metody statycznej w klasie AdSize. Aby na przykład uzyskać rozmiar reklamy dla 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(),
);main.dart

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 AdManagerAdRequest(),
      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(),
  );
}banner_ad_snippets.dart

Zastąp _adUnitId własnym identyfikatorem jednostki reklamowej.

Zdarzenia banerów reklamowych

Za pomocą AdManagerBannerAdListener 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.");
},main.dart

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 uwzględnia każdą częstotliwość odświeżania określoną w interfejsie Ad Managera. 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 Częstotliwość odświeżania reklam w aplikacjach mobilnych.

Wyświetlanie banera reklamowego

Aby wyświetlić AdManagerBannerAd 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. Na 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ć. AdManagerBannerAd 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!),
      ),
    ),
  ),main.dart

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 AdManagerBannerAdListener.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 przewijanych. 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.

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 przewijanej, 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.