Konfigurowanie banerów reklamowych

Wybierz platformę: Android iOS Unity Flutter Android (starsza wersja)

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 adaptacyjny w 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 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 tym, jak działają Google Mobile Ads SDK reklamy testowe, znajdziesz w artykule Test Ads.

Tworzenie elementu GAMBannerView

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

Programowo

Element GAMBannerView można też utworzyć bezpośrednio. Poniższy przykład tworzy element 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ć elementu AdManagerBannerView, utwórz element 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 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ć element GAMBannerView do pliku storyboard lub xib. Jeśli używasz tej metody, pamiętaj, aby dodać 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 nadwidoku.

Ustawianie rozmiaru reklamy

Duże banery adaptacyjne mają większy format przeznaczony do układów bez przewijania. W porównaniu ze standardowymi zakotwiczonymi banerami adaptacyjnymi te banery mogą mieć większą maksymalną wysokość (do 20% wysokości ekranu, od 50 do 150 punktów). Ta dodatkowa przestrzeń jest zoptymalizowana pod kątem treści wideo.

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 element 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 metodę 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 każdą 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ę zmienia, np. z portrait na 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 reklamowe

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

Rejestrowanie zdarzeń banerów

Aby zarejestrować zdarzenia banerów reklamowych, ustaw właściwość delegate w elemencie GAMBannerView na obiekt, który implementuje protokół GADBannerViewDelegate. Zazwyczaj 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ń banerów

Każda z metod w protokole 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ładowych przypadków użycia tych metod zdarzeń reklamowych.

Dodawanie banera do hierarchii widoków po otrzymaniu reklamy

Możesz opóźnić dodanie elementu 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 wykrywać wszystkie typy wyświetlania nakładek lub wywoływania zewnętrznych przeglądarek, a nie tylko te, które pochodzą z kliknięć reklam, aplikacja powinna nasłuchiwać odpowiednich metod w elementach 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 elemencie UIViewController
bannerViewWillDismissScreen: viewWillAppear: w elemencie UIViewController
bannerViewDidDismissScreen: viewDidAppear: w elemencie 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 elemencie 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 uruchomić wyświetlenie:

Swift

bannerView.recordImpression()

Objective-C

[self.bannerView recordImpression];

Zdarzenia w aplikacji

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

Aby zarejestrować zdarzenia w aplikacji, ustaw właściwość delegate w elemencie GAMBannerView na obiekt, który implementuje protokół GADAppEventDelegate. Zazwyczaj 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 delegata 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 aplikacji 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. Możesz ich użyć, 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