Baner

Wybierz platformę: Android iOS Unity Flutter

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.

Ten przewodnik pomoże Ci 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 reklamy o stałym rozmiarze. Format obrazu jest podobny do formatu 320x50. Gdy określisz pełną dostępną szerokość, pakiet SDK do reklam mobilnych Google 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 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:

/21775744923/example/adaptive-banner

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. Pamiętaj tylko, aby przed opublikowaniem aplikacji zastąpić je własnymi identyfikatorami jednostek reklamowych.

Pobieranie rozmiaru reklamy

Aby wysłać żądanie dotyczące banera reklamowego 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. Na przykład użyj AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width), aby uzyskać rozmiar reklamy w bieżącej orientacji.

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
  MediaQuery.sizeOf(context).width.truncate(),
);
main.dart

Wczytywanie reklamy

Poniższy przykład pokazuje wczytywanie banera reklamowego:

void _loadAd() async {
  // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
  final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
    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 identyfikatorem swojej jednostki reklamowej.

Za pomocą AdManagerBannerAdListener możesz nasłuchiwać zdarzeń związanych z cyklem ż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 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ć kolejnej prośby o reklamę, gdy nie uda się jej wczytać. Pakiet SDK do reklam mobilnych Google uwzględnia każdą częstotliwość odświeżania określoną w interfejsie Ad Managera. 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 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 funkcji load(). Widżet możesz utworzyć przed wywołaniem funkcji load(), ale funkcja load() musi zostać wywołana przed dodaniem widżetu do drzewa widżetów.

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ć. AdManagerBannerAdmoże być umieszczony 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

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 AdManagerBannerAdListener.onAdFailedToLoad().

Znakomicie. Aplikacja jest teraz gotowa do wyświetlania reklam banerowych.

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ć nieoptymalną wydajność podczas wyświetlania reklam banerowych w tekście w widokach przewijanych. Zalecamy używanie tych typów 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 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, w których banery reklamowe są umieszczane w treściach, które można przewijać, zalecane są śródtekstowe banery adaptacyjne zamiast zakotwiczonych banerów adaptacyjnych. Więcej informacji znajdziesz w artykule o banerach adaptacyjnych wstawianych w tekście.

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