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 w tekście podczas przewijania. Banery reklamowe mogą być automatycznie odświeżane po upływie określonego czasu. Aby dowiedzieć się więcej, zapoznaj się z artykułem Omówienie banerów reklamowych.
Z tego przewodnika dowiesz się, jak zacząć korzystać z zakotwiczonych banerów adaptacyjnych, które pozwolą Ci zmaksymalizować skuteczność dzięki optymalizacji rozmiaru reklamy dla każdego urządzenia z wykorzystaniem określonej szerokości reklamy.
Zakotwiczony baner adaptacyjny
Zakotwiczone banery adaptacyjne to reklamy o stałym współczynniku proporcji, a nie reklamy o stałym rozmiarze. Format obrazu jest podobny do standardu branżowego 320 x 50. Gdy podasz pełną dostępną szerokość, wyświetli Ci się reklama o optymalnej wysokości dla tej szerokości. Optymalna wysokość nie zmienia się w zależności od żądania wysyłanego z tego samego urządzenia, a okoliczne widoki nie muszą się zmieniać przy odświeżaniu reklamy.
Wymagania wstępne
- Wykonaj czynności opisane w przewodniku dla początkujących.
Zawsze korzystaj z reklam testowych
Podczas tworzenia i testowania aplikacji używaj reklam testowych, a nie aktywnych reklam produkcyjnych. Jeśli tego nie zrobisz, Twoje konto może zostać zawieszone.
Najprostszym sposobem wczytywania reklam testowych jest użycie naszego dedykowanego identyfikatora testowej jednostki reklamowej na banery na iOS:
ca-app-pub-3940256099942544/2435281174
Został on specjalnie skonfigurowany tak, aby zwracał reklamy testowe w odpowiedzi na każde żądanie. Możesz go używać we własnych aplikacjach podczas kodowania, testowania i debugowania. Pamiętaj, by przed opublikowaniem aplikacji zastąpić go własnym identyfikatorem jednostki reklamowej.
Więcej informacji o działaniu reklam testowych z pakietu SDK do reklam mobilnych znajdziesz w artykule Reklamy testowe.
Utwórz GADBannerView
Banery reklamowe są wyświetlane w obiektach GADBannerView
, więc pierwszym krokiem w kierunku integracji banerów reklamowych jest dodanie GADBannerView
do hierarchii widoków. Zwykle odbywa się to automatycznie
lub za pomocą kreatora interfejsów.
Automatycznie
Instancja GADBannerView
można też utworzyć bezpośrednio.
Oto przykład tworzenia elementu GADBannerView
wyrównanego do dolnej środkowej części bezpiecznego obszaru na ekranie:
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController { var bannerView: GADBannerView! override func viewDidLoad() { super.viewDidLoad() let viewWidth = view.frame.inset(by: view.safeAreaInsets).width // Here the current interface orientation is used. Use // GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or // GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a // particular orientation, let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth) bannerView = GADBannerView(adSize: adaptiveSize) addBannerViewToView(bannerView) } func addBannerViewToView(_ bannerView: GADBannerView) { bannerView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(bannerView) view.addConstraints( [NSLayoutConstraint(item: bannerView, attribute: .bottom, relatedBy: .equal, toItem: view.safeAreaLayoutGuide, attribute: .bottom, multiplier: 1, constant: 0), NSLayoutConstraint(item: bannerView, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0) ]) } }
Objective-C
@import GoogleMobileAds; @interface ViewController () @property(nonatomic, strong) GADBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Here safe area is taken into account, hence the view frame is used after the // view has been laid out. CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets); CGFloat viewWidth = frame.size.width; // Here the current interface orientation is used. If the ad is being preloaded // for a future orientation change or different orientation, the function for the // relevant orientation should be used. GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth); // In this case, we instantiate the banner with desired ad size. self.bannerView = [[GADBannerView alloc] initWithAdSize:adaptiveSize]; [self addBannerViewToView:self.bannerView]; } - (void)addBannerViewToView:(UIView *)bannerView { bannerView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:bannerView]; [self.view addConstraints:@[ [NSLayoutConstraint constraintWithItem:bannerView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view.safeAreaLayoutGuide attribute:NSLayoutAttributeBottom multiplier:1 constant:0], [NSLayoutConstraint constraintWithItem:bannerView attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0] ]]; } @end
Pamiętaj, że w tym przypadku nie stosujemy ograniczeń szerokości ani wysokości, ponieważ podany rozmiar reklamy nadaje banerowi wewnętrzny rozmiar treści odpowiadający rozmiarowi widoku.
Kreator interfejsów
Element GADBannerView
można dodać do pliku scenorysu lub xib. Korzystając z tej metody, pamiętaj, by dodać ograniczenia pozycji tylko do banera. Gdy na przykład wyświetlasz baner adaptacyjny u dołu ekranu, dolną część widoku banera ustaw tak samo jak górną część dolnego przewodnika po układzie, a środkową część banera (X) ustaw na poziomie środkowym (X).
Rozmiar reklamy banera jest nadal ustawiany automatycznie:
Swift
bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
Objective-C
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
Wczytaj reklamę
Po skonfigurowaniu elementu GADBannerView
i skonfigurowaniu jego właściwości przychodzi czas na wczytanie reklamy. Aby to zrobić, wywołujesz loadRequest:
w obiekcie GADRequest
:
Swift
override func viewDidLoad() { super.viewDidLoad() ... // Set the ad unit ID and view controller that contains the GADBannerView. bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174" bannerView.rootViewController = self bannerView.load(GADRequest()) }
Objective-C
- (void)viewDidLoad { [super viewDidLoad]; ... // Set the ad unit ID and view controller that contains the GADBannerView. self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174"; self.bannerView.rootViewController = self; [self.bannerView loadRequest:[GADRequest request]]; }
GADRequest reprezentują pojedyncze żądanie reklamy i zawierają właściwości takie jak informacje o kierowaniu.
Jeśli reklama się nie wczytuje, nie musisz wysyłać wyraźnie prośby o kolejną, o ile jednostka reklamowa jest skonfigurowana tak, aby się odświeżała. Pakiet SDK do reklam mobilnych Google respektuje częstotliwość odświeżania określoną w interfejsie AdMob. Jeśli nie masz włączonego odświeżania, musisz wysłać nową prośbę.
Zdarzenia reklamowe
Korzystając z GADBannerViewDelegate
, możesz wykrywać zdarzenia cyklu życia, np. gdy reklama zostanie zamknięta lub użytkownik wyjdzie z aplikacji.
Rejestracja w wydarzeniach związanych z banerami
Aby zarejestrować zdarzenia banerów reklamowych, ustaw właściwość delegate
w GADBannerView
na obiekt implementujący protokół GADBannerViewDelegate
. Ogólnie klasa implementująca banery reklamowe działa też jako klasa przedstawicieli. W takim przypadku właściwość delegate
można ustawić na self
.
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController, GADBannerViewDelegate { var bannerView: GADBannerView! override func viewDidLoad() { super.viewDidLoad() ... bannerView.delegate = self } }
Objective-C
@import GoogleMobileAds; @interface ViewController () <GADBannerViewDelegate> @property(nonatomic, strong) GADBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.delegate = self; }
Implementacja zdarzeń banerów
Każda metoda w obiekcie GADBannerViewDelegate
jest oznaczona jako opcjonalna, więc musisz tylko zaimplementować te metody, które chcesz. Ten przykład implementuje każdą metodę i rejestruje komunikat w konsoli:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { print("bannerViewDidReceiveAd") } func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) { print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)") } func bannerViewDidRecordImpression(_ bannerView: GADBannerView) { print("bannerViewDidRecordImpression") } func bannerViewWillPresentScreen(_ bannerView: GADBannerView) { print("bannerViewWillPresentScreen") } func bannerViewWillDismissScreen(_ bannerView: GADBannerView) { print("bannerViewWillDIsmissScreen") } func bannerViewDidDismissScreen(_ bannerView: GADBannerView) { print("bannerViewDidDismissScreen") }
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"); }
Zapoznaj się z przykładem wdrożenia metod przekazywania dostępu do banerów w aplikacji demonstracyjnej iOS API.
Przykłady zastosowań
Oto kilka przykładów użycia tych metod dotyczących zdarzeń reklamowych.
Dodawanie banera do hierarchii widoków po otrzymaniu reklamy
Warto opóźnić dodanie elementu GADBannerView
do hierarchii widoków do momentu otrzymania reklamy. Możesz to zrobić, nasłuchując zdarzenia bannerViewDidReceiveAd:
:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { // Add banner to view and add constraints as above. addBannerViewToView(bannerView) }
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView { // Add bannerView to view and add constraints as above. [self addBannerViewToView:self.bannerView]; }
Animowanie banera reklamowego
Za pomocą zdarzenia bannerViewDidReceiveAd:
możesz też animować zwrócony baner reklamowy, jak w tym przykładzie:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { 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
udostępnia metody powiadamiania o zdarzeniach, np. gdy kliknięcie powoduje wyświetlenie lub zamknięcie nakładki. Jeśli chcesz śledzić, czy te zdarzenia są związane z reklamami, zarejestruj się, by korzystać z tych metod GADBannerViewDelegate
.
Aby wychwytywać wszystkie typy nakładek i wywołań przeglądarki zewnętrznej, a nie tylko te pochodzące z kliknięć reklam, lepiej jest nasłuchiwać metod równoważnych w UIViewController
lub UIApplication
. W tej tabeli znajdziesz odpowiadające im metody iOS, które są wywoływane w tym samym czasie co metody GADBannerViewDelegate
:
Metoda GADBannerViewDelegate | Metoda na iOS |
---|---|
bannerViewWillPresentScreen: |
Interfejs viewWillDisappear: kontrolera UIViewController |
bannerViewWillDismissScreen: |
Interfejs viewWillAppear: kontrolera UIViewController |
bannerViewDidDismissScreen: |
Interfejs viewDidAppear: kontrolera UIViewController |
Dodatkowe materiały
Przykłady w GitHubie
- Przykład zakotwiczonych banerów adaptacyjnych: Swift | Objective-C
- Prezentacja funkcji zaawansowanych: Swift | Objective-C
Dalsze kroki
Banery zwijane
Zwijane banery reklamowe to banery reklamowe, które są początkowo wyświetlane jako większa nakładka z przyciskiem umożliwiającym zwijanie reklamy do mniejszego rozmiaru. Możesz użyć ich do dalszej optymalizacji skuteczności. Więcej informacji znajdziesz w artykule o zwijanych banerach reklamowych.
Wbudowane banery adaptacyjne
Wbudowane banery adaptacyjne są większe i wyższe w porównaniu do zakotwiczonych banerów adaptacyjnych. Mają zmienną wysokość, a ich wysokość może sięgać ekranu urządzenia. W przypadku aplikacji, które umieszczają banery reklamowe w przewijanych treściach, zalecamy stosowanie wbudowanych banerów adaptacyjnych zamiast zakotwiczonych banerów adaptacyjnych. Więcej informacji znajdziesz w sekcji Wbudowane banery adaptacyjne.