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

Zakotwiczone banery adaptacyjne to reklamy o stałych proporcjach, a nie o stałym rozmiarze. Format obrazu jest podobny 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ę nie zmieniają położenia podczas jej odświeżania.

Zawsze przeprowadzaj testy z użyciem reklam testowych

Podczas tworzenia i testowania aplikacji używaj reklam testowych, a nie aktywnych reklam produkcyjnych. Jeśli tego nie zrobisz, Twoje konto może zostać zawieszone.

Najłatwiejszym sposobem wczytywania reklam testowych jest użycie naszego dedykowanego identyfikatora testowej jednostki reklamowej na banery:

ca-app-pub-3940256099942544/9214589741

ca-app-pub-3940256099942544/2435281174

Testowe jednostki reklamowe są skonfigurowane tak, aby zwracały reklamy testowe w przypadku każdego żądania. Możesz ich używać we własnych aplikacjach podczas kodowania, testowania i debugowania. Pamiętaj, aby przed opublikowaniem aplikacji zastąpić je własnymi identyfikatorami jednostek reklamowych.

Uzyskiwanie rozmiaru reklamy

Duże banery adaptacyjne to 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 większa przestrzeń jest zoptymalizowana pod kątem treści wideo.

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

1. Uzyskaj 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. 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 dla bieżącej orientacji.

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(
  MediaQuery.sizeOf(context).width.truncate(),
);
banner_ad_snippets.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 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(),
  );
}
banner_ad_snippets.dart

Zastąp ciąg _adUnitId identyfikatorem swojej jednostki reklamowej.

Zdarzenia banerów reklamowych

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.');
},
banner_ad_snippets.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 częstotliwość odświeżania określoną w interfejsie AdMob. Jeśli nie masz włączonego odświeżania, 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, po wywołaniu load() musisz utworzyć instancję AdWidget z obsługiwaną reklamą. 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 we Flutterze 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świetlać. Reklamę BannerAd można umieścić w kontenerze o rozmiarze odpowiadającym reklamie:

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!),
      ),
    ),
  ),
banner_ad_snippets.dart

Reklamę należy usunąć, gdy dostęp do niej nie jest już potrzebny. Zgodnie ze sprawdzonymi metodami wywołanie dispose() powinno nastąpić po usunięciu AdWidget z drzewa widżetów lub w wywołaniu zwrotnym BannerAdListener.onAdFailedToLoad().

To wszystko. 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ą mieć problemy z wydajnością podczas wyświetlania banerów reklamowych w widokach przewijanych. Zalecamy używanie tego typu banerów tylko na urządzeniach z Androidem 10 lub nowszym. Nie dotyczy to banerów o stałej pozycji, takich jak banery zakotwiczone, które można stosować z optymalną skutecznością na wszystkich poziomach interfejsu API Androida.

Kompletny 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

Banery adaptacyjne śródtekstowe mają zmienną wysokość i są większe oraz wyższe niż zakotwiczone banery adaptacyjne. W aplikacjach, które umieszczają banery reklamowe w przewijanych treściach, zalecamy stosowanie śródtekstowych banerów adaptacyjnych zamiast zakotwiczonych banerów adaptacyjnych. Więcej informacji znajdziesz w artykule o banerach adaptacyjnych inline.

Banery zwijane

Zwijane banery reklamowe to banery, które początkowo wyświetlają się jako większa nakładka z przyciskiem umożliwiającym zmniejszenie reklamy. Rozważ użycie tego banera, aby jeszcze bardziej zoptymalizować skuteczność. Więcej informacji znajdziesz w artykule Zwijane banery reklamowe.