Banery reklamowe to prostokątne reklamy, które zajmują część układu aplikacji. Pozostają na ekranie, gdy użytkownicy wchodzą w interakcję z aplikacją – są zakotwiczone u góry lub u dołu ekranu albo pozostają w tekście podczas przewijania strony. Banery reklamowe mogą być automatycznie odświeżane po upływie określonego czasu. Więcej informacji znajdziesz w artykule Omówienie banerów reklamowych.
Z tego przewodnika dowiesz się, jak zacząć korzystać z zakotwiczonego banera adaptacyjnego, który maksymalizuje skuteczność dzięki optymalizacji rozmiaru reklamy na każdym urządzeniu za pomocą określonej przez Ciebie szerokości.
Zakotwiczony baner adaptacyjny
Zakotwiczone banery adaptacyjne to reklamy o stałych proporcjach, a nie zwykłe reklamy o stałym rozmiarze. Format obrazu jest podobny do standardu branżowego 320 x 50. Po określeniu pełnej dostępnej szerokości zwraca reklamę o optymalnej wysokości dla tej szerokości. Optymalna wysokość nie zmienia się w przypadku żądań z tego samego urządzenia, a widoki otaczające reklamę nie muszą się przesuwać podczas jej odświeżania.
Wymagania wstępne
- Zapoznaj się z przewodnikiem dla początkujących.
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łatwiej wczytać reklamy testowe, używając dedykowanego identyfikatora testowej jednostki reklamowej na banery na iOS:
ca-app-pub-3940256099942544/2435281174
Jest on specjalnie skonfigurowany tak, aby zwracać reklamy testowe w przypadku każdego żądania. Możesz go używać w swoich aplikacjach podczas kodowania, testowania i debugowania. Pamiętaj tylko, aby przed opublikowaniem aplikacji zastąpić go własnym identyfikatorem jednostki reklamowej.
Więcej informacji o działaniu testowych reklam w pakiecie SDK do reklam mobilnych znajdziesz w artykule Testowe reklamy.
Tworzenie widoku GADBannerView
Banery reklamowe wyświetlają się w obiektach GADBannerView, więc pierwszym krokiem w integracji banerów reklamowych jest uwzględnienie obiektu GADBannerView w hierarchii widoku. Zwykle odbywa się to programowo lub za pomocą Interface Builder.
Automatycznie
Obiekt GADBannerView można też utworzyć bezpośrednio.
W tym przykładzie tworzymy GADBannerView:
Swift
// Initialize the BannerView.
bannerView = BannerView()
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
// Align the banner's bottom edge with the safe area's bottom edge
bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
// Center the banner horizontally in the view
bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
SwiftUI
Aby użyć BannerView, utwórz UIViewRepresentable:
private struct BannerViewContainer: UIViewRepresentable {
typealias UIViewType = BannerView
let adSize: AdSize
init(_ adSize: AdSize) {
self.adSize = adSize
}
func makeUIView(context: Context) -> BannerView {
let banner = BannerView(adSize: adSize)
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
banner.delegate = context.coordinator
return banner
}
func updateUIView(_ uiView: BannerView, context: Context) {}
func makeCoordinator() -> BannerCoordinator {
return BannerCoordinator(self)
}
Dodaj element UIViewRepresentable do hierarchii widoku, podając wartości height i width:
var body: some View {
Spacer()
// Request an anchored adaptive banner with a width of 375.
let adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
BannerViewContainer(adSize)
.frame(width: adSize.size.width, height: adSize.size.height)
}
Objective-C
// Initialize the GADBannerView.
self.bannerView = [[GADBannerView alloc] init];
self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.bannerView];
// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
// Align the banner's bottom edge with the safe area's bottom edge
[self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
// Center the banner horizontally in the view
[self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
Interface Builder
Do storyboardu lub pliku xib możesz dodać GADBannerView. Jeśli używasz tej metody, pamiętaj, aby dodać ograniczenia pozycji tylko dla banera. Jeśli na przykład wyświetlasz baner adaptacyjny na dole ekranu, ustaw dolną krawędź widoku banera na równą górnej krawędzi przewodnika po układzie dołu, a ograniczenie centerX na równe centerX widoku superwidoku.
Rozmiar reklamy banerowej jest nadal ustawiany programowo:
Swift
// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
Objective-C
// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
Wczytywanie reklamy
Gdy GADBannerView jest już gotowa i jej właściwości, takie jak adUnitID, są skonfigurowane, możesz wczytać reklamy. Aby to zrobić, wywołaj funkcję loadRequest: obiektu GADRequest:
Swift
bannerView.load(Request())
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
Objective-C
[self.bannerView loadRequest:[GADRequest request]];
Obiekty GADRequest reprezentują pojedyncze żądanie reklamy i zawierają właściwości, takie jak informacje o kierowaniu.
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 ustawioną w interfejsie AdMob. 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 Używanie opcji automatycznego odświeżania w przypadku banerów reklamowych.
Zdarzenia reklamowe
Za pomocą GADBannerViewDelegate możesz nasłuchiwać zdarzeń cyklu życia, takich jak zamknięcie reklamy lub opuszczenie aplikacji przez użytkownika.
Rejestrowanie zdarzeń banera
Aby rejestrować zdarzenia reklamy w banerze, ustaw w obiekcie GADBannerView właściwość delegate na obiekt, który implementuje protokół GADBannerViewDelegate. Zazwyczaj klasa, która implementuje reklamy typu banner, działa też jako klasa zastępcza. W takim przypadku właściwość delegate może mieć wartość self.
Swift
bannerView.delegate = self
SwiftUI
banner.delegate = context.coordinator
Objective-C
self.bannerView.delegate = self;
Implementowanie zdarzeń banera
Wszystkie metody w GADBannerViewDelegate są oznaczone jako opcjonalne, więc wystarczy zaimplementować tylko te, których potrzebujesz. Ten przykład implementuje każdą metodę i zapisują wiadomość do konsoli:
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
print(#function)
}
func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
print(#function + ": " + error.localizedDescription)
}
func bannerViewDidRecordClick(_ bannerView: BannerView) {
print(#function)
}
func bannerViewDidRecordImpression(_ bannerView: BannerView) {
print(#function)
}
func bannerViewWillPresentScreen(_ bannerView: BannerView) {
print(#function)
}
func bannerViewWillDismissScreen(_ bannerView: BannerView) {
print(#function)
}
func bannerViewDidDismissScreen(_ bannerView: BannerView) {
print(#function)
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidReceiveAd");
}
- (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
NSLog(@"bannerView:didFailToReceiveAdWithError: %@", [error localizedDescription]);
}
- (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidRecordImpression");
}
- (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewWillPresentScreen");
}
- (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewWillDismissScreen");
}
- (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidDismissScreen");
}
Przykład implementacji metod delegowanych banera w aplikacji demonstracyjnej interfejsu API na iOS znajdziesz w pliku Ad Delegate.
Przypadki użycia
Oto kilka przykładowych zastosowań tych metod zdarzeń reklamy.
Dodawanie banera do hierarchii widoku po otrzymaniu reklamy
Możesz odłożyć dodanie elementu GADBannerView do hierarchii widoku do czasu otrzymania reklamy. Aby to zrobić, nasłuchuj zdarzenie bannerViewDidReceiveAd::
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
// Add banner to view and add constraints.
addBannerViewToView(bannerView)
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
// Add bannerView to view and add constraints as above.
[self addBannerViewToView:self.bannerView];
}
Animowanie banera reklamowego
Możesz też użyć zdarzenia bannerViewDidReceiveAd:, aby animować baner reklamowy po jego zwrocie, jak w tym przykładzie:
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
bannerView.alpha = 0
UIView.animate(withDuration: 1, animations: {
bannerView.alpha = 1
})
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
bannerView.alpha = 0;
[UIView animateWithDuration:1.0 animations:^{
bannerView.alpha = 1;
}];
}
Wstrzymywanie i wznawianie aplikacji
Protokół GADBannerViewDelegate zawiera metody, które powiadamią o wystąpieniu zdarzeń, np. gdy kliknięcie powoduje wyświetlenie lub ukrycie nakładki. Jeśli chcesz dowiedzieć się, czy te zdarzenia były spowodowane reklamami, zarejestruj te metody GADBannerViewDelegate.
Aby wykrywać wszystkie typy prezentowania nakładek lub wywołań zewnętrznych przeglądarek, a nie tylko te, które pochodzą z kliknięć reklam, aplikacja powinna nasłuchiwać odpowiednich metod w metodach UIViewController lub UIApplication. Oto tabela pokazująca równoważne metody iOS, które są wywoływane w tym samym czasie co metody GADBannerViewDelegate:
| Metoda GADBannerViewDelegate | Metoda iOS |
|---|---|
bannerViewWillPresentScreen: |
viewWillDisappear: w UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: w UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: w UIViewController |
Dodatkowe materiały
Przykłady w GitHub
- Przykład zakotwiczonego banera adaptacyjnego: Swift | SwiftUI | Objective-C
- Demonstracja funkcji zaawansowanych: Swift | Objective-C
Dalsze kroki
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. Możesz go użyć, aby jeszcze bardziej zoptymalizować skuteczność. Więcej informacji znajdziesz w artykule Zwijane banery reklamowe.
Wbudowane banery adaptacyjne
Wbudowane banery adaptacyjne są większe i wyższe od zakotwiczonych banerów adaptacyjnych. Mają zmienną wysokość i mogą zajmować całą wysokość ekranu. W przypadku aplikacji, które umieszczają banery reklamowe w treściach, które można przewijać, zalecamy stosowanie banerów śródtekstowych zamiast zakotwiczonych banerów adaptacyjnych. Więcej informacji znajdziesz w sekcji wbudowane elastyczne banery.