Banery adaptacyjne to nowa generacja reklam elastycznych, które maksymalizują skuteczność dzięki optymalizacji rozmiaru reklamy pod kątem każdego urządzenia. To ulepszona wersja banerów inteligentnych, które obsługiwały jedynie ustalone wysokości. Banery adaptacyjne pozwalają natomiast określić szerokość reklamy i wykorzystują te dane do wyznaczenia optymalnego rozmiaru reklamy.
Aby wybrać najlepszy rozmiar reklamy, banery adaptacyjne korzystają ze stałych współczynników proporcji zamiast stałej wysokości. Sprawia to, że banery reklamowe zajmują bardziej spójną część ekranu na różnych urządzeniach i umożliwiają poprawę skuteczności.
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. Rozmiar kreacji banera może się jednak zmieniać w zależności od urządzenia. Dlatego zalecamy, aby układ uwzględniał różnice w wysokości reklamy. 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 z przewodnika dla początkujących poświęcone importowaniu wtyczki do reklam mobilnych Flutter.
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 banerów są często używane jako banery zakotwiczone, które są zwykle zablokowane u góry lub u dołu ekranu.
W przypadku takich zakotwiczonych banerów współczynnik proporcji przy użyciu banerów adaptacyjnych będzie podobny do współczynnika standardowej reklamy 320 x 50, jak widać na tych 3 przykładach:
 Baner 320 x 50 |
 Baner adaptacyjny |
 Baner inteligentny |
Baner adaptacyjny lepiej wykorzystuje dostępny rozmiar ekranu. Dodatkowo w porównaniu z banerem inteligentnym baner adaptacyjny jest lepszym wyborem, ponieważ:
Używa ona dowolnej podanej przez Ciebie szerokości, zamiast wymuszać szerokość pełnego ekranu, co umożliwia uwzględnienie bezpiecznego obszaru na iOS i wyświetlanie wycięć na Androidzie.
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.
- Aby zachować zgodność z zasadami AdMob, gdy wyświetlane są mniejsze rozmiary reklam, które nie wypełniają boksu reklamowego, upewnij się, że tło widoku reklamy jest nieprzezroczyste.
- Upewnij się, że używasz najnowszej wersji wtyczki Google Mobile Ads w Flutterze.
- Rozmiary banerów adaptacyjnych są zaprojektowane tak, aby najlepiej sprawdzały się przy użyciu pełnej dostępnej szerokości. W większości przypadków będzie to pełna szerokość ekranu urządzenia. Pamiętaj o odpowiednich bezpiecznych obszarach.
- Pakiet SDK do reklam mobilnych Google ustawi rozmiar banera z optymalną wysokością reklamy dla danej szerokości, gdy korzystasz z adaptacyjnych interfejsów AdSize API.
- Istnieją 2 metody określania rozmiaru reklamy adaptacyjnej:
AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width)do żądania określonej orientacji iAdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)do bieżącej orientacji w momencie wykonania. - 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ść zadokowanego banera nigdy nie przekracza 15% wysokości urządzenia lub 90 pikseli niezależnie od gęstości pikseli. Nie może być też mniejsza niż 50 pikseli niezależnie od gęstości pikseli.
Krótkie wprowadzenie
Aby wdrożyć prosty zakotwiczony baner adaptacyjny, wykonaj podane niżej czynności.
- Uzyskaj rozmiar banera adaptacyjnego. Pobrany rozmiar zostanie użyty do przesłania
żądania banera adaptacyjnego. Aby uzyskać rozmiar reklamy adaptacyjnej, musisz:
- Uzyskaj szerokość używanego urządzenia w pikselach niezależnych od gęstości lub ustaw własną szerokość, jeśli nie chcesz używać pełnej szerokości ekranu.
Aby uzyskać szerokość ekranu, możesz użyć
MediaQuery.of(context). - Użyj odpowiednich metod statycznych klasy rozmiaru reklamy, takich jak
AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width), aby uzyskać obiektAdSizedostosowujący się do bieżącej orientacji.
- Uzyskaj szerokość używanego urządzenia w pikselach niezależnych od gęstości lub ustaw własną szerokość, jeśli nie chcesz używać pełnej szerokości ekranu.
Aby uzyskać szerokość ekranu, możesz użyć
- Utwórz obiekt
BannerAdz identyfikatorem jednostki reklamowej, rozmiarem reklamy adaptacyjnej i obiektem żądania reklamy. - Załaduj reklamę tak jak zwykły baner reklamowy i wyświetlaj ją z poziomu
AdWidgettak jak zwykły widok reklamy.
Przykładowy kod
Oto przykład widżetu, który wczytuje zakotwiczony baner adaptacyjny, aby dopasować 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 uzyskania rozmiaru banera w zakotwiczonej pozycji dla 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ę.
Pełny przykład w GitHub
Pełny przykład znajdziesz w repozytorium GitHub Przykład banera.