Baner

Banery reklamowe zajmują miejsce w układce aplikacji, na górze lub na dole 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.

W tym przewodniku znajdziesz informacje o zakotwiczonym banerze adaptacyjnym. 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 banery o stałych proporcjach, a nie o stałym rozmiarze. Format obrazu jest podobny do 320 x 50. Po określeniu pełnej dostępnej szerokości pakiet SDK do reklam mobilnych Google zwraca reklamę o optymalnej wysokości dla tej szerokości. Optymalna wysokość reklamy pozostaje stała w różnych żądaniach reklamy, a treści wokół reklamy pozostają na miejscu podczas jej odświeżania.

Zawsze testuj reklamy za pomocą reklam testowych

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

Najłatwiejszym sposobem wczytywania reklam testowych jest użycie dedykowanego identyfikatora testowej jednostki reklamowej dla banerów:

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

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. Zanim opublikujesz aplikację, pamiętaj, aby zastąpić je własnymi identyfikatorami jednostek reklamowych.

Pobieranie rozmiaru reklamy

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

  1. Użyj funkcji 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 klasy AdSize. Na przykład AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) pozwala uzyskać rozmiar reklamy dla bieżącej orientacji.

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

Wczytywanie reklamy

W tym przykładzie instancjonujemy baner reklamowy:

class BannerExampleState extends State<BannerExample>{
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';

  /// Loads a banner ad.
  void loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

Dzięki BannerAdListener możesz nasłuchiwać zdarzeń cyklu życia, np. wczytania reklamy. Ten przykład wdraża każdą metodę i zapisują wiadomość do konsoli:

class BannerExampleState extends State<BannerExample> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';


  /// Loads a banner ad.
  void loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
        // Called when an ad opens an overlay that covers the screen.
        onAdOpened: (Ad ad) {},
        // Called when an ad removes an overlay that covers the screen.
        onAdClosed: (Ad ad) {},
        // Called when an impression occurs on the ad.
        onAdImpression: (Ad ad) {},
      ),
    )..load();
  }
}

Odświeżanie reklamy

Jeśli jednostka reklamowa jest skonfigurowana tak, aby się odświeżać, nie musisz prosić o wyświetlenie kolejnej reklamy, gdy nie uda się jej załadować. Pakiet SDK do reklam mobilnych Google uwzględnia częstotliwość odświeżania określoną w interfejsie AdMob. Jeśli nie masz włączonego odświeżania, prześlij nowe żądanie. Więcej informacji o odświeżaniu jednostek reklamowych, np. o ustalaniu 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 funkcji load() musisz utworzyć instancję obiektu AdWidget z obsługiwaną reklamą. Możesz utworzyć widget przed wywołaniem funkcji load(), ale musisz wywołać funkcję load() przed dodaniem widgetu do drzewa widgetów.

AdWidget dziedziczy po klasie Widget w Flutterze i może być używany jak każdy inny widżet. Na iOS upewnij się, że widżet jest umieszczony w widżecie o określonej szerokości i wysokości. W przeciwnym razie reklama może się nie wyświetlać. BannerAdmożna umieścić w kontenerze o odpowiednim rozmiarze:

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!),
      ),
    ),
  )
}

Reklamę należy usunąć, gdy nie jest już potrzebna. Sprawdzoną metodą wywołania funkcji dispose() jest wywołanie jej po usunięciu elementu AdWidget z drzewa widżetów lub w funkcji zwracającej wartość BannerAdListener.onAdFailedToLoad().

Znakomicie. Twoja aplikacja jest teraz gotowa do wyświetlania reklam typu baner.

Ograniczenie przewijania na Androidzie 9 i starszych

Wiemy, że na niektórych starszych lub słabszych urządzeniach z Androidem 9 lub wcześniejszą wersją wydajność może być niewystarczająca podczas wyświetlania reklam banerowych w linii w widokach przewijania. Zalecamy używanie tych typów banerów tylko na urządzeniach z Androidem w wersji 10 lub nowszej. Nie dotyczy to banerów o stałym położeniu, takich jak banery zakotwiczone, które mogą być używane z optymalną skutecznością na wszystkich poziomach interfejsu API Androida.

Pełny przykład w GitHub

Pełny przykład integracji banera omówiony 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 w przypadku aplikacji Flutter.

Wbudowane banery adaptacyjne

Wbudowane banery adaptacyjne mają zmienną wysokość i są większe i wyższe niż zakotwiczone banery adaptacyjne. W przypadku aplikacji, 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 Inline adaptive banners (w języku angielskim).

Banery zwijane

Banery zwijane to banery reklamowe, które początkowo wyświetlają się jako większe nakładki z przyciskiem umożliwiającym zwijanie reklamy do mniejszego rozmiaru. Aby jeszcze bardziej zoptymalizować skuteczność, możesz użyć tego banera. Więcej informacji znajdziesz w artykule o zwijanych reklamach banerowych.