Banery reklamowe

Wybierz platformę: Android iOS Unity Flutter

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 pozostają w tekście podczas przewijania strony. Banery reklamowe mogą być automatycznie odświeżane po upływie określonego czasu. Więcej informacji znajdziesz w artykule Omówienie banerów reklamowych.

Z tego przewodnika dowiesz się, jak zacząć korzystać z przykotwiczonych banerów adaptacyjnych, które maksymalizują skuteczność kampanii dzięki optymalizacji rozmiaru reklamy na każdym urządzeniu przy użyciu określonej przez Ciebie szerokości reklamy.

Zakotwiczony baner adaptacyjny

Zakotwiczone banery adaptacyjne to reklamy o stałych proporcjach, a nie zwykłe reklamy o stałym rozmiarze. Współczynnik proporcji jest podobny do standardowego banera 320x50. Gdy określisz pełną dostępną szerokość, zwróci ona reklamę o optymalnej wysokości dla tej szerokości. Optymalna wysokość nie zmienia się w przypadku żądań z tego samego urządzenia, a otaczające widoki nie muszą się przesuwać, gdy reklama jest odświeżana.

Wymagania wstępne

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:

/21775744923/example/adaptive-banner

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 reklam testowych w pakiecie SDK do reklam mobilnych znajdziesz w artykule Reklamy testowe.

Tworzenie obiektu GAMBannerView

Banery reklamowe są wyświetlane w GAMBannerView obiektach, więc pierwszym krokiem w integracji banerów reklamowych jest umieszczenie elementu GAMBannerView w hierarchii widoków. Zwykle odbywa się to programowo lub za pomocą narzędzia Interface Builder.

automatycznie,

GAMBannerView można też utworzyć bezpośrednio. W tym przykładzie tworzymy GAMBannerView:

Swift

// Initialize the BannerView.
bannerView = BannerView()

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),
])
BannerSnippets.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 = currentOrientationAnchoredAdaptiveBanner(width: 375)
  BannerViewContainer(adSize)
    .frame(width: adSize.size.width, height: adSize.size.height)
}
BannerContentView.swift

Objective-C

// Initialize the GADBannerView.
self.bannerView = [[GADBannerView alloc] init];

self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.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
    [self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
    // Center the banner horizontally in the view
    [self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
BannerSnippets.m

Interface Builder

Możesz dodać GAMBannerView do pliku storyboard lub xib. Jeśli używasz tej metody, pamiętaj, aby dodawać do banera tylko ograniczenia pozycji. Na przykład podczas wyświetlania adaptacyjnego banera u dołu ekranu ustaw dolną krawędź widoku banera na górną krawędź dolnego przewodnika układu, a ograniczenie centerX na centerX widoku nadrzędnego.

Ustawianie rozmiaru reklamy

Ustaw strukturę GADSize na typ zakotwiczonego banera adaptacyjnego o określonej szerokości:

Swift

// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
ViewController.swift

Objective-C

// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
ViewController.m

Wczytywanie reklamy

Gdy GAMBannerView jest już na miejscu i ma skonfigurowane właściwości, takie jak adUnitID, czas wczytać reklamę. W tym celu wywołaj loadRequest: na obiekcie GAMRequest:

Swift

bannerView.load(AdManagerRequest())
ViewController.swift

SwiftUI

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

Objective-C

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

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ć kolejnej prośby o reklamę, gdy nie uda się jej wczytać. Pakiet SDK do reklam mobilnych Google uwzględnia każdą częstotliwość odświeżania określoną w interfejsie Ad Managera. 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 Częstotliwość odświeżania reklam w aplikacjach mobilnych.

Zdarzenia reklamowe

Za pomocą GADBannerViewDelegate możesz nasłuchiwać zdarzeń cyklu życia, np. zamknięcia reklamy lub opuszczenia aplikacji przez użytkownika.

Rejestrowanie wydarzeń banerowych

Aby zarejestrować zdarzenia związane z reklamami banerowymi, ustaw właściwość delegate w GAMBannerView 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
ViewController.swift

SwiftUI

banner.delegate = context.coordinator
BannerContentView.swift

Objective-C

self.bannerView.delegate = self;
ViewController.m

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(#function)
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print(#function + ": " + error.localizedDescription)
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print(#function)
}
ViewController.swift

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

Przykład implementacji metod przekazywania banerów znajdziesz w aplikacji demonstracyjnej interfejsu API iOS w sekcji Ad Delegate.

Swift Objective-C

Przypadki użycia

Oto kilka przykładowych przypadków użycia tych metod zdarzeń związanych z reklamami.

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:, 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:(GAMBannerView *)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

Ręczne zliczanie wyświetleń

Jeśli masz specjalne warunki, w których ma być rejestrowane wyświetlenie, możesz ręcznie wysyłać do Ad Managera pingi wyświetleń. Aby to zrobić, najpierw włącz GAMBannerView w przypadku wyświetleń ręcznych przed załadowaniem reklamy:

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

Gdy stwierdzisz, że reklama została 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

Zdarzenia w aplikacjach umożliwiają tworzenie reklam, które mogą wysyłać komunikaty do kodu aplikacji. Aplikacja może następnie podejmować działania na podstawie tych wiadomości.

Za pomocą GADAppEventDelegate możesz nasłuchiwać zdarzeń w aplikacji związanych z usługą Ad Manager. Te zdarzenia mogą wystąpić w dowolnym momencie cyklu życia reklamy, nawet przed wywołaniem GADBannerViewDelegate obiektu bannerViewDidReceiveAd:.

Swift

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

// Called when the banner receives an app event.
optional public func bannerView(_ banner: AdManagerBannerView,
    didReceiveAppEvent name: String, withInfo info: String?)

Objective-C

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

@optional
// Called when the banner receives an app event.
-   (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info;

Metody zdarzeń aplikacji można zaimplementować w kontrolerze widoku:

Swift

import GoogleMobileAds

class ViewController: UIViewController, AppEventDelegate {}

Objective-C

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {}

@end

Pamiętaj, aby przed wysłaniem żądania reklamy ustawić delegata za pomocą właściwości appEventDelegate.

Swift

bannerView.appEventDelegate = self

Objective-C

self.bannerView.appEventDelegate = self;

Oto przykład zmiany koloru tła aplikacji przez określenie koloru za pomocą zdarzenia w aplikacji:

Swift

func bannerView(_ banner: AdManagerBannerView, didReceiveAppEvent name: String,
    withInfo info: String?) {
  if name == "color" {
    guard let info = info else { return }
    switch info {
    case "green":
      // Set background color to green.
      view.backgroundColor = UIColor.green
    case "blue":
      // Set background color to blue.
      view.backgroundColor = UIColor.blue
    default:
      // 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 dotyczące koloru 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>

Przykład wdrożenia zdarzeń w aplikacji znajdziesz w aplikacji demonstracyjnej interfejsu iOS API w sekcji Ad Manager App Events.

Swift Objective-C

Dodatkowe materiały

Przykłady w GitHubie

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 treści.

Przeglądaj inne tematy