Banery reklamowe zajmują miejsce w układzie 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 na temat zakotwiczonego banera reklamowego adaptacyjnego. 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 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, możemy zawiesić Twoje konto.
Najłatwiejszym sposobem wczytania reklam testowych jest użycie dedykowanego identyfikatora testowej jednostki reklamowej dla 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. 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:
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ść.Aby uzyskać obiekt
AdSize, użyj odpowiedniej metody statycznej klasyAdSize. Na przykład użyjAdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width), aby 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>{
AdManagerBannerAd? _bannerAd;
bool _isLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final adUnitId = '/21775744923/example/adaptive-banner';
/// 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 = AdManagerBannerAd(
adUnitId: adUnitId,
request: const AdManagerAdRequest(),
size: size,
listener: AdManagerBannerAdListener(
// 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('AdManagerBannerAd failed to load: $error');
// Dispose the ad here to free resources.
ad.dispose();
},
),
)..load();
}
}
Zdarzenia banerów reklamowych
Dzięki AdManagerBannerAdListener możesz nasłuchiwać zdarzeń cyklu życia, takich jak wczytywanie reklamy. Ten przykład implementuje każdą metodę i zapisują wiadomość do konsoli:
class BannerExampleState extends State<BannerExample> {
AdManagerBannerAd? _bannerAd;
bool _isLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final adUnitId = '/21775744923/example/adaptive-banner';
/// 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 = AdManagerBannerAd(
adUnitId: adUnitId,
request: const AdManagerAdRequest(),
size: size,
listener: AdManagerBannerAdListener(
// 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('AdManagerBannerAd 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 żądać 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 Ad Managera. Jeśli nie włączysz odświeżania, wyślij nowe żądanie. Więcej informacji o odświeżaniu jednostek reklamowych, np. o ustalaniu 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, 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 widget. 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ć. AdManagerBannerAdmoż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 dostęp do niej nie jest już potrzebny. Sprawdzoną metodą wywołania funkcji dispose() jest wywołanie jej po usunięciu elementu AdWidget z drzewa widżetów lub w funkcji wywołania zwrotnego AdManagerBannerAdListener.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śniejszym skuteczność wyświetlania reklam banerowych w inlinie może być niezadowalająca podczas przewijania treści. Zalecamy używanie tych typów banerów tylko na urządzeniach z Androidem w wersji 10 lub nowszej. Nie dotyczy to banerów w stałych pozycjach, takich jak banery zakotwiczone, które mogą być używane z optymalną skutecznością na wszystkich poziomach interfejsu API Androida.
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 od zakotwiczonych banerów adaptacyjnych. 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 Zwijane banery reklamowe.