Ta strona została przetłumaczona przez Cloud Translation API.

Zakotwiczone banery adaptacyjne

Banery adaptacyjne to nowa generacja reklam elastycznych, które maksymalizują skuteczność dzięki optymalizacji rozmiaru reklamy pod kątem każdego urządzenia. W przypadku banerów inteligentnych, które obsługiwały tylko stałe wysokości, można teraz określić szerokość reklamy i na tej podstawie określić jej optymalny rozmiar.

Aby wybrać najlepszy rozmiar reklamy, banery adaptacyjne korzystają ze stałych współczynników proporcji zamiast stałej wysokości. Dzięki temu banery reklamowe zajmują bardziej spójną część ekranu na różnych urządzeniach i pozwalają poprawić skuteczność.

Korzystając z banerów adaptacyjnych, pamiętaj, że zawsze zwracają stały rozmiar dla danego urządzenia i danej szerokości. Po przetestowaniu układu na danym urządzeniu możesz mieć pewność, że rozmiar reklamy się nie zmieni. Jednak rozmiar kreacji banerowej może się zmieniać w zależności od urządzenia. Dlatego zalecamy, aby układ uwzględniał różnice w wysokości reklam. W rzadkich przypadkach pełny rozmiar adaptacyjny może nie zostać wypełniony i zamiast niego zostanie wyśrodkowana kreacja o standardowym rozmiarze.

Wymagania wstępne

Wykonaj instrukcje importowania wtyczki do reklam mobilnych Flutter, które znajdziesz w przewodniku dla początkujących.

Kiedy używać banerów adaptacyjnych

Banery adaptacyjne zostały zaprojektowane jako zamiennik zarówno standardowego rozmiaru banera 320 x 50, jak i formatu inteligentnego, który je zastępują.

Te rozmiary są zwykle używane jako zakotwiczone banery, które są zazwyczaj zablokowane u góry lub u dołu ekranu.

W przypadku takich zakotwiczonych banerów format obrazu podczas korzystania z banerów adaptacyjnych będzie podobny do formatu standardowej reklamy 320 x 50, jak widać w 3 przykładach poniżej:

Baner 320 x 50

Baner adaptacyjny

Baner inteligentny

Baner adaptacyjny w większym stopniu wykorzystuje dostępny rozmiar ekranu. Poza tym baner adaptacyjny jest lepszym wyborem niż baner inteligentny, ponieważ:

Wykorzystuje dowolną podaną przez Ciebie szerokość, zamiast wymuszać korzystanie z pełnego ekranu. Pozwala to uwzględnić bezpieczny obszar na urządzeniach z iOS, a w Androidzie – wycięcia w ekranie.
Dobiera optymalną wysokość dla danego urządzenia i nie ma stałej wysokości na urządzeniach o różnych rozmiarach. Ma to na celu łagodzenie skutków fragmentacji danych na urządzeniach.

Uwagi o implementacji

Wdrażając banery adaptacyjne w swojej aplikacji, pamiętaj o tych kwestiach:

Musisz określić szerokość miejsca, w którym znajdzie się reklama, przy czym należy uwzględnić szerokość urządzenia oraz wszelkie bezpieczne obszary i wycięcia, które mają zastosowanie.
Zadbaj o nieprzezroczyste tło widoku reklamy, aby zapewnić zgodność z zasadami AdMob w przypadku mniejszych reklam, które nie wypełniają boksu reklamowego.
Upewnij się, że używasz najnowszej wersji wtyczki Google Mobile Ads Flutter.
Rozmiary banerów adaptacyjnych najlepiej sprawdzają się przy pełnej dostępnej szerokości. W większości przypadków będzie to pełna szerokość ekranu używanego urządzenia. Pamiętaj, aby wziąć pod uwagę odpowiednie bezpieczne obszary.
Jeśli korzystasz z adaptacyjnych interfejsów AdSize, pakiet SDK do reklam mobilnych Google dopasuje rozmiar banera do wysokości reklamy zoptymalizowanej pod kątem danej szerokości.
Istnieją 2 sposoby uzyskania rozmiaru reklamy adaptacyjnej: AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) żądanie konkretnej orientacji lub AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) dla bieżącej orientacji w momencie wykonywania.
Rozmiar zwrócony dla danej szerokości na danym urządzeniu będzie zawsze taki sam, więc po przetestowaniu układu na danym urządzeniu możesz mieć pewność, że rozmiar reklamy się nie zmieni.
Wysokość zakotwiczonego banera nigdy nie jest większa niż mniejsza niż 15% wysokości urządzenia lub 90 pikseli niezależnych od gęstości i nigdy nie jest mniejsza niż 50 pikseli niezależnych od gęstości.

Krótkie wprowadzenie

Aby wdrożyć prosty zakotwiczony baner adaptacyjny, wykonaj podane niżej czynności.

Wybierz rozmiar banera adaptacyjnego. Pobrany rozmiar zostanie użyty do przesłania żądania banera adaptacyjnego. Aby uzyskać rozmiar reklamy adaptacyjnej, musisz:
1. Pobierz szerokość używanego urządzenia w pikselach niezależnych od gęstości lub ustaw własną szerokość, jeśli nie chcesz korzystać z pełnej szerokości ekranu. Aby określić szerokość ekranu, możesz użyć parametru MediaQuery.of(context).
2. Użyj odpowiednich metod statycznych w klasie rozmiaru reklamy, np. AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width), aby uzyskać adaptacyjny obiekt AdSize na potrzeby bieżącej orientacji.
Utwórz obiekt BannerAd z identyfikatorem jednostki reklamowej, rozmiarem reklamy adaptacyjnej i obiektem żądania reklamy.
Wczytaj reklamę jak zwykły baner reklamowy i wyświetlaj ją z poziomu reklamy AdWidget tak jak przy normalnym wyświetleniu reklamy.

Przykładowy kod

Oto przykładowy widżet, który wczytuje zakotwiczony baner adaptacyjny w celu dopasowania go do szerokości ekranu:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

/// This example demonstrates anchored adaptive banner ads.
class AnchoredAdaptiveExample extends StatefulWidget {
  @override
  _AnchoredAdaptiveExampleState createState() =>
      _AnchoredAdaptiveExampleState();
}

class _AnchoredAdaptiveExampleState extends State<AnchoredAdaptiveExample> {
  BannerAd? _anchoredAdaptiveAd;
  bool _isLoaded = false;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _loadAd();
  }

  Future<void> _loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final AnchoredAdaptiveBannerAdSize? size =
        await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
            MediaQuery.of(context).size.width.truncate());

    if (size == null) {
      print('Unable to get height of anchored banner.');
      return;
    }

    _anchoredAdaptiveAd = BannerAd(
      // TODO: replace these test ad units with your own ad unit.
      adUnitId: Platform.isAndroid
          ? 'ca-app-pub-3940256099942544/6300978111'
          : 'ca-app-pub-3940256099942544/2934735716',
      size: size,
      request: AdRequest(),
      listener: BannerAdListener(
        onAdLoaded: (Ad ad) {
          print('$ad loaded: ${ad.responseInfo}');
          setState(() {
            // When the ad is loaded, get the ad size and use it to set
            // the height of the ad container.
            _anchoredAdaptiveAd = ad as BannerAd;
            _isLoaded = true;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('Anchored adaptive banner failedToLoad: $error');
          ad.dispose();
        },
      ),
    );
    return _anchoredAdaptiveAd!.load();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('Anchored adaptive banner example'),
        ),
        body: Center(
          child: Stack(
            alignment: AlignmentDirectional.bottomCenter,
            children: <Widget>[
              ListView.separated(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  itemBuilder: (context, index) {
                    return Text(
                      'Placeholder text',
                      style: TextStyle(fontSize: 24),
                    );
                  },
                  separatorBuilder: (context, index) {
                    return Container(height: 40);
                  },
                  itemCount: 20),
              if (_anchoredAdaptiveAd != null && _isLoaded)
                Container(
                  color: Colors.green,
                  width: _anchoredAdaptiveAd!.size.width.toDouble(),
                  height: _anchoredAdaptiveAd!.size.height.toDouble(),
                  child: AdWidget(ad: _anchoredAdaptiveAd!),
                )
            ],
          ),
        ),
      );

  @override
  void dispose() {
    super.dispose();
    _anchoredAdaptiveAd?.dispose();
  }
}

W tym przypadku funkcja AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize służy do określenia rozmiaru banera w pozycji zakotwiczonej w bieżącej orientacji interfejsu. Aby wstępnie wczytać zakotwiczony baner w danej orientacji, użyj polecenia AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) i przekaż odpowiednią orientację.

Kompletny przykład w GitHubie

Pełny przykład znajdziesz w repozytorium GitHub Banner Example.