Konfigurowanie banerów reklamowych

Wybierz platformę: Android (beta) Nowość 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 na każdym urządzeniu, 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 za pomocą reklam testowych

Podczas tworzenia i testowania aplikacji używaj reklam testowych, a nie reklam produkcyjnych. Jeśli tego nie zrobisz, 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 GAMBannerView

Banery reklamowe są wyświetlane w GAMBannerView obiektach. Pierwszym krokiem do zintegrowania banerów reklamowych jest więc umieszczenie GAMBannerView w hierarchii widoków. Zazwyczaj 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),
])
AdManagerBannerSnippets.swift

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)
  }
BannerContentView.swift

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)
}
BannerContentView.swift

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;
AdManagerBannerSnippets.m

Interface Builder

Możesz dodać 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 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)
AdManagerBannerSnippets.swift

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
AdManagerBannerSnippets.m

Wczytywanie reklamy

Gdy GAMBannerView jest na swoim miejscu i ma skonfigurowane właściwości, takie jak adUnitID, 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())
}
AdManagerBannerSnippets.swift

SwiftUI

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
BannerContentView.swift

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);

[self.bannerView loadRequest:[GAMRequest request]];
AdManagerBannerSnippets.m

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 skonfigurujesz jednostkę reklamową tak, aby się odświeżała, 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 nie włączysz odświeżania, 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.
  })
}
BannerSnippets.swift

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];
}
BannerSnippets.m

Zdarzenia reklamowe

Za pomocą GADBannerViewDelegate możesz nasłuchiwać zdarzenia 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 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
AdManagerBannerSnippets.swift

SwiftUI

banner.delegate = context.coordinator
BannerContentView.swift

Objective-C

bannerView.delegate = self;
AdManagerBannerSnippets.m

Implementowanie zdarzeń banerów

Każda z metod w GADBannerViewDelegate jest oznaczona jako opcjonalna, więc musisz zaimplementować tylko te metody, których potrzebujesz. 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.")
}
AdManagerBannerSnippets.swift

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");
}

AdManagerBannerSnippets.m

Implementację metod delegata banera w aplikacji w wersji demonstracyjnej iOS API znajdziesz w przykładzie Delegat reklamy.

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 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ływania 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 tej tabeli znajdziesz 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 GAMBannerView na potrzeby wyświetleń ręcznych:

Swift

bannerView.enableManualImpressions = true
AdManagerBannerSnippets.swift

Objective-C

self.bannerView.enableManualImpressions = YES;
AdManagerBannerSnippets.m

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

Swift

bannerView.recordImpression()
AdManagerBannerSnippets.swift

Objective-C

[self.bannerView recordImpression];
AdManagerBannerSnippets.m

Zdarzenia w aplikacjach

Za pomocą GADAppEventDelegate możesz nasłuchiwać zdarzenia w aplikacjach specyficzne 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 aplikacjach, ustaw właściwość delegata w 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ść delegata można ustawić na self.

Swift

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

Objective-C

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

Oto przykład pokazujący, jak zmienić kolor tła aplikacji, określając kolor w zdarzeniu 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
    }
  }
}
AdManagerBannerSnippets.swift

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];
    }
  }
}
AdManagerBannerSnippets.m

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 aplikacji w wersji demonstracyjnej iOS API znajdziesz w przykładzie Zdarzenia w aplikacjach w Ad Managerze.

Swift Objective-C

Dodatkowe materiały

Przykłady w GitHub

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ą zajmować całą wysokość ekranu 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

Zapoznaj się z innymi tematami