Z tego przewodnika dowiesz się, jak wczytać zakotwiczony baner adaptacyjny w aplikacji na iOS.
Wymagania wstępne
Zanim przejdziesz dalej, skonfiguruj Google Mobile Ads SDK.
Zawsze testuj za pomocą reklam testowych
Podczas tworzenia i testowania aplikacji używaj reklam testowych zamiast reklam produkcyjnych. Jeśli tego nie zrobisz, Twoje konto może zostać zawieszone.
Najłatwiejszym sposobem wczytywania reklam testowych jest użycie specjalnego identyfikatora testowej jednostki reklamowej na banery w iOS:
ca-app-pub-3940256099942544/2435281174
Został 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 identyfikatorem swojej jednostki reklamowej.
Więcej informacji o działaniu Google Mobile Ads SDK reklam testowych znajdziesz w artykule Reklamy testowe.
Tworzenie obiektu GADBannerView
Banery reklamowe są wyświetlane w GADBannerView obiektach, więc pierwszym krokiem w integracji banerów reklamowych jest umieszczenie elementu GADBannerView w hierarchii widoków. Zwykle odbywa się to programowo lub za pomocą narzędzia Interface Builder.
automatycznie,
GADBannerView można też utworzyć bezpośrednio.
W tym przykładzie tworzymy GADBannerView:
Swift
// Initialize the banner view.
bannerView = BannerView()
bannerView.delegate = self
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 UIViewRepresentable do hierarchii widoków, określając wartości height i width:
var body: some View {
Spacer()
// Request an anchored adaptive banner with a width of 375.
let adSize = largeAnchoredAdaptiveBanner(width: 375)
BannerViewContainer(adSize)
.frame(width: adSize.size.width, height: adSize.size.height)
}
Objective-C
// Initialize the banner view.
GADBannerView *bannerView = [[GADBannerView alloc] init];
bannerView.delegate = self;
UIView *view = self.view;
bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[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 activateConstraints:@[
// Align the banner's bottom edge with the safe area's bottom edge
[bannerView.bottomAnchor
constraintEqualToAnchor:view.safeAreaLayoutGuide.bottomAnchor],
// Center the banner horizontally in the view
[bannerView.centerXAnchor constraintEqualToAnchor:view.centerXAnchor],
]];
self.bannerView = bannerView;
Interface Builder
Możesz dodać GADBannerView do pliku storyboard lub xib. Jeśli używasz tej metody, pamiętaj, aby dodawać ograniczenia pozycji tylko w przypadku banera. Na przykład podczas wyświetlania adaptacyjnego banera u dołu ekranu ustaw dolną krawędź widoku banera na górną krawędź dolnego układu pomocniczego, a centerX
ograniczenie ustaw na centerX widoku nadrzędnego.
Ustawianie rozmiaru reklamy
Poniższy przykład pobiera rozmiar dużego zakotwiczonego banera adaptacyjnego:
Swift
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
Objective-C
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
Wczytywanie reklamy
Gdy GADBannerView jest już na miejscu i ma skonfigurowane właściwości, takie jak adUnitID, czas wczytać reklamę. Aby to zrobić, wywołaj loadRequest: na obiekcie GADRequest:
Swift
func loadBannerAd(bannerView: BannerView) {
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
bannerView.load(Request())
}
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
Objective-C
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
[self.bannerView loadRequest:[GADRequest request]];
GADRequest reprezentują pojedyncze żądanie reklamy i zawierają właściwości dotyczące m.in. informacji o kierowaniu.
Odświeżanie reklamy
Jeśli jednostka reklamowa jest skonfigurowana do odświeżania, nie musisz wysyłać kolejnej prośby o reklamę, gdy nie uda się jej wczytać. Google Mobile Ads SDK respektuje każdą częstotliwość odświeżania określoną w interfejsie AdMob. Jeśli nie masz włączonego odświeżania, wyślij nową prośbę. Więcej informacji o odświeżaniu jednostek reklamowych, np. o ustawianiu częstotliwości odświeżania, znajdziesz w artykule Używanie opcji automatycznego odświeżania w przypadku banerów reklamowych.
Obsługa zmian orientacji
Gdy orientacja ekranu aplikacji się zmieni, np. z portrait na poziomą, dostępna szerokość banera często też się zmienia. Aby wyświetlać reklamy o odpowiednim rozmiarze w nowym układzie, wyślij żądanie dotyczące nowego banera. Jeśli szerokość banera jest stała lub ograniczenia układu mogą obsłużyć zmianę rozmiaru, pomiń ten krok.
Swift
override func viewWillTransition(
to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
coordinator.animate(alongsideTransition: { _ in
// Load a new ad for the new orientation.
})
}
Objective-C
- (void)viewWillTransitionToSize:(CGSize)size
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
// Load a new ad for the new orientation.
} completion:nil];
}
Zdarzenia reklamowe
Za pomocą GADBannerViewDelegate możesz nasłuchiwać zdarzeń cyklu życia, takich jak zamknięcie reklamy lub opuszczenie aplikacji przez użytkownika.
Rejestrowanie wydarzeń związanych z banerami
Aby zarejestrować zdarzenia związane z reklamami banerowymi, ustaw właściwość delegate w GADBannerView na obiekt, który implementuje protokół GADBannerViewDelegate. Zwykle klasa, która implementuje reklamy banerowe, pełni też funkcję klasy delegata. W takim przypadku właściwość delegate można ustawić na self.
Swift
bannerView.delegate = self
SwiftUI
banner.delegate = context.coordinator
Objective-C
bannerView.delegate = self;
Implementowanie zdarzeń banera
Każda z metod w GADBannerViewDelegate jest oznaczona jako opcjonalna, więc musisz zaimplementować tylko te metody, które chcesz. W tym przykładzie zaimplementowano każdą metodę i zapisano komunikat w konsoli:
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
print("Banner ad loaded.")
}
func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
print("Banner ad failed to load: \(error.localizedDescription)")
}
func bannerViewDidRecordImpression(_ bannerView: BannerView) {
print("Banner ad recorded an impression.")
}
func bannerViewDidRecordClick(_ bannerView: BannerView) {
print("Banner ad recorded a click.")
}
func bannerViewWillPresentScreen(_ bannerView: BannerView) {
print("Banner ad will present screen.")
}
func bannerViewWillDismissScreen(_ bannerView: BannerView) {
print("Banner ad will dismiss screen.")
}
func bannerViewDidDismissScreen(_ bannerView: BannerView) {
print("Banner ad did dismiss screen.")
}
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 delegata reklamy znajdziesz w aplikacji demonstracyjnej interfejsu iOS API.
Przypadki użycia
Oto kilka przykładowych zastosowań tych metod zdarzeń związanych z reklamami.
Dodawanie banera do hierarchii widoków po otrzymaniu reklamy
Możesz 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: 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 zwróceniu, jak pokazano 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 ma metody powiadamiania o zdarzeniach, np. gdy kliknięcie powoduje wyświetlenie lub zamknięcie nakładki. Jeśli chcesz śledzić, czy te zdarzenia były spowodowane przez reklamy, zarejestruj się w tych metodach:GADBannerViewDelegate
Aby wykrywać wszystkie typy prezentacji nakładkowych lub wywołań zewnętrznych przeglądarek, a nie tylko te, które pochodzą z kliknięć reklam, aplikacja powinna nasłuchiwać odpowiednich metod w UIViewController lub UIApplication. W tabeli poniżej znajdziesz odpowiedniki metod iOS, które są wywoływane w tym samym czasie co metody GADBannerViewDelegate:
| Metoda GADBannerViewDelegate | Metoda iOS |
|---|---|
bannerViewWillPresentScreen: |
viewWillDisappear: w klasie UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: w klasie UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: w klasie UIViewController |
Dodatkowe materiały
Przykłady w GitHubie
- Przykład zakotwiczonych adaptacyjnych banerów reklamowych: Swift | SwiftUI | Objective-C
- Demonstracja funkcji zaawansowanych: Swift | Objective-C
Dalsze kroki
Banery zwijane
Banery zwijane to reklamy banerowe, które początkowo wyświetlają się jako większa nakładka z przyciskiem umożliwiającym zwinięcie reklamy do mniejszego rozmiaru. Możesz go użyć, aby jeszcze bardziej zoptymalizować skuteczność. Więcej informacji znajdziesz w sekcji 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 urządzenia. W przypadku aplikacji, w których banery reklamowe są umieszczane w treściach, które można przewijać, zalecane są adaptacyjne banery śródtekstowe zamiast zakotwiczonych adaptacyjnych banerów reklamowych. Więcej informacji znajdziesz w sekcji banery adaptacyjne w tekście.