Konfigurowanie banerów reklamowych

Wybierz platformę: Android Nowy Android iOS Unity Flutter

Banery reklamowe to prostokątne reklamy, które zajmują część układu aplikacji. Zakotwiczone banery adaptacyjne zawsze wyświetlają się na ekranie, są zakotwiczone u góry lub na dole ekranu i mają maksymalną wysokość wynoszącą 20% rozmiaru ekranu, ale nie więcej niż 150 pikseli. Aby zoptymalizować rozmiar reklamy pod kątem każdego urządzenia, użyj banerów adaptacyjnych.

Z tego przewodnika dowiesz się, jak wczytać zakotwiczony baner reklamowy adaptacyjny do aplikacji na iOS.

Wymagania wstępne

Zanim przejdziesz dalej, skonfiguruj Google Mobile Ads SDK.

Zawsze testuj reklamy testowe

Podczas tworzenia i testowania aplikacji używaj reklam testowych, a nie reklam rzeczywistych. W przeciwnym razie Twoje konto może zostać zawieszone.

Najłatwiejszym sposobem na wczytanie reklam testowych jest użycie naszego specjalnego identyfikatora jednostki reklamowej na banery na iOS:

/21775744923/example/adaptive-banner

Jest on specjalnie skonfigurowany tak, aby zwracać reklamy testowe w odpowiedzi na każde żądanie. 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 tym, jak działają Google Mobile Ads SDK reklamy testowe, znajdziesz w artykule Test Ads.

Tworzenie GAMBannerView

Banery reklamowe są wyświetlane w GAMBannerView obiektach, dlatego pierwszym krokiem do zintegrowania banerów reklamowych jest umieszczenie GAMBannerView w hierarchii widoków. Zwykle robi się to programowo lub za pomocą narzędzia Interface Builder.

Programowo

Obiekt GAMBannerView można też utworzyć bezpośrednio. Poniższy przykład tworzy GAMBannerView:

Swift

// Initialize the banner view.
bannerView = AdManagerBannerView()
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ć AdManagerBannerView, 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.
GAMBannerView *bannerView = [[GAMBannerView 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ć GAMBannerView do pliku storyboard lub xib. Jeśli używasz tej metody, pamiętaj, aby dodawać tylko ograniczenia pozycji banera. Na przykład, gdy wyświetlasz baner adaptacyjny u dołu ekranu, ustaw dolną krawędź widoku banera na górną krawędź dolnego przewodnika układu, a centerX ograniczenie na centerX widoku nadrzędnego.

Ustawianie rozmiaru reklamy

Poniższy przykład pobiera duży zakotwiczony baner adaptacyjny:

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 GAMBannerView jest na swoim miejscu i jego właściwości, takie jak adUnitID, są skonfigurowane, możesz wczytać reklamę. Aby to zrobić, wywołaj loadRequest: na obiekcie GAMRequest:

Swift

func loadBannerAd(bannerView: AdManagerBannerView) {
  // Request a large anchored adaptive banner with a width of 375.
  bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
  bannerView.load(AdManagerRequest())
}

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:[GAMRequest request]];

Obiekty GAMRequest 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ć kolejnego żądania reklamy, gdy nie uda się jej wczytać. Google Mobile Ads SDK uwzględnia częstotliwość odświeżania określoną w interfejsie Ad Managera. Jeśli odświeżanie nie jest włączone, wyślij nowe żądanie. Więcej informacji o odświeżaniu jednostek reklamowych, np. o ustawianiu częstotliwości odświeżania, znajdziesz w artykule Częstotliwość odświeżania reklam w aplikacjach mobilnych.

Obsługa zmian orientacji

Gdy orientacja ekranu aplikacji się zmieni, np. z portrait na orientację poziomą, często zmienia się też dostępna szerokość banera. Aby mieć pewność, że wyświetlasz reklamę o odpowiednim rozmiarze w nowym układzie, poproś o nowy baner. Jeśli szerokość banera jest statyczna lub jeśli ograniczenia układu mogą obsługiwać 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 związane z reklamami

Za pomocą GADBannerViewDelegate możesz nasłuchiwać zdarzeń cyklu życia, np. gdy reklama zostanie zamknięta lub użytkownik opuści aplikację.

Rejestrowanie zdarzeń związanych z banerami

Aby zarejestrować zdarzenia związane z banerami reklamowymi, ustaw właściwość delegate w GAMBannerView na obiekt, który implementuje protokół GADBannerViewDelegate. Zwykle klasa, która implementuje banery reklamowe, 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ń związanych z banerami

Każda z metod w GADBannerViewDelegate jest oznaczona jako opcjonalna, więc musisz zaimplementować tylko te metody, które chcesz. Ten przykład implementuje każdą metodę i rejestruje 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:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewDidReceiveAd");
}

- (void)bannerView:(GAMBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
  NSLog(@"bannerView:didFailToReceiveAdWithError: %@", error.localizedDescription);
}

- (void)bannerViewDidRecordImpression:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewDidRecordImpression");
}

- (void)bannerViewWillPresentScreen:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewWillPresentScreen");
}

- (void)bannerViewWillDismissScreen:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewWillDismissScreen");
}

- (void)bannerViewDidDismissScreen:(GAMBannerView *)bannerView {
  NSLog(@"bannerViewDidDismissScreen");
}

Implementację metod delegata banera w aplikacji demonstracyjnej iOS API znajdziesz w przykładzie Ad Delegate.

Swift Objective-C

Przypadki użycia

Oto kilka przykładów przypadków użycia tych metod zdarzeń reklamowych.

Dodawanie banera do hierarchii widoków po otrzymaniu reklamy

Możesz opóźnić dodanie GAMBannerView 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:(GAMBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

Animowanie banera reklamowego

Możesz też użyć zdarzenia bannerViewDidReceiveAd: do animowania banera reklamowego 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:(GAMBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

Wstrzymywanie i wznawianie aplikacji

Protokół GADBannerViewDelegate zawiera 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 reklamami, zarejestruj się w tych metodach GADBannerViewDelegate.

Aby przechwytywać wszystkie typy wyświetlania nakładek lub wywołań zewnętrznej przeglądarki, a nie tylko te, które pochodzą z kliknięć reklam, aplikacja powinna nasłuchiwać odpowiednich metod w UIViewController lub UIApplication. Poniższa tabela zawiera odpowiednie 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

Ręczne zliczanie wyświetleń

Jeśli masz specjalne warunki dotyczące tego, kiedy należy zarejestrować wyświetlenie, możesz ręcznie wysyłać pingi wyświetleń do Ad Managera. Aby to zrobić, przed wczytaniem reklamy włącz ręczne wyświetlenia w GAMBannerView:

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

Gdy stwierdzisz, że reklama została prawidłowo zwrócona i jest widoczna na ekranie, możesz ręcznie wywołać wyświetlenie:

Swift

bannerView.recordImpression()

Objective-C

[self.bannerView recordImpression];

Zdarzenia w aplikacjach

Za pomocą GADAppEventDelegate możesz nasłuchiwać zdarzeń w aplikacjach specyficznych dla Ad Managera. Te zdarzenia mogą wystąpić w dowolnym momencie cyklu życia reklamy, nawet zanim zostanie wywołana funkcja bannerViewDidReceiveAd: obiektu GADBannerViewDelegate.

Aby zarejestrować zdarzenia w aplikacjach, ustaw właściwość delegate w GAMBannerView na obiekt, który implementuje protokół GADAppEventDelegate. Zwykle klasa, która implementuje banery reklamowe, pełni też funkcję klasy delegata. W takim przypadku właściwość delegate można ustawić na self.

Swift

// Set this property before making the request for an ad.
bannerView.appEventDelegate = self

Objective-C

// Set this property before making the request for an ad.
self.bannerView.appEventDelegate = self;

Oto przykład pokazujący, jak zmienić kolor tła aplikacji, określając kolor ze zdarzenia w aplikacji:

Swift

func bannerView(
  _ banner: AdManagerBannerView, didReceiveAppEvent name: String, withInfo info: String?
) {
  if name == "color" {
    if info == "green" {
      // Set background color to green.
      view.backgroundColor = UIColor.green
    } else if info == "blue" {
      // Set background color to blue.
      view.backgroundColor = UIColor.blue
    } else {
      // Set background color to black.
      view.backgroundColor = UIColor.black
    }
  }
}

Objective-C

- (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info {
  if ([name isEqual:@"color"]) {
    if ([info isEqual:@"green"]) {
      // Set background color to green.
      self.view.backgroundColor = [UIColor greenColor];
    } else if ([info isEqual:@"blue"]) {
      // Set background color to blue.
      self.view.backgroundColor = [UIColor blueColor];
    } else {
      // Set background color to black.
      self.view.backgroundColor = [UIColor blackColor];
    }
  }
}

A oto odpowiednia kreacja, która wysyła komunikaty o zdarzeniach w aplikacji do appEventDelegate:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

Implementację zdarzeń w aplikacjach w usłudze Ad Manager w aplikacji demonstracyjnej iOS API znajdziesz w przykładzie Ad Manager App Events.

Swift Objective-C

Dodatkowe materiały

Przykłady w GitHubie

Dalsze kroki

Banery zwijane

Banery zwijane to banery reklamowe, które początkowo wyświetlają się jako większa nakładka z przyciskiem umożliwiającym zwinięcie reklamy do mniejszego rozmiaru. Rozważ ich użycie, aby jeszcze bardziej zoptymalizować skuteczność. Więcej informacji znajdziesz w artykule Banery zwijane.

Wbudowane banery adaptacyjne

Wbudowane banery adaptacyjne są większe i wyższe niż zakotwiczone banery adaptacyjne. Mają zmienną wysokość i mogą być tak wysokie jak ekran urządzenia. W przypadku aplikacji, które umieszczają banery reklamowe w treściach, które można przewijać, zalecamy używanie wbudowanych banerów adaptacyjnych zamiast zakotwiczonych banerów adaptacyjnych. Więcej informacji znajdziesz w artykule Wbudowane banery adaptacyjne

Poznaj inne tematy