Zakotwiczone banery adaptacyjne

Banery adaptacyjne to nowa generacja reklam elastycznych, które maksymalizują skuteczność reklam, optymalizując rozmiar reklamy na każdym urządzeniu. To ulepszenie banerów inteligentnych, które obsługiwały tylko stałą wysokość. Pozwalają deweloperom określić szerokość reklamy i wykorzystać ją do określenia optymalnego rozmiaru reklamy.

Aby wybrać najlepszy rozmiar reklamy, banery adaptacyjne używają stałych proporcji zamiast stałych wysokości. Dzięki temu banery reklamowe zajmują bardziej spójną część ekranu na różnych urządzeniach i zwiększają skuteczność.

Podczas pracy z banerami adaptacyjnymi pamiętaj, że zawsze zwracają one stały rozmiar dla danego urządzenia i danej szerokości. Po przetestowaniu układu na danym urządzeniu możesz mieć pewność, że rozmiar reklamy się nie zmieni. Rozmiar kreacji banerowej może się jednak zmieniać na różnych urządzeniach. W związku z tym warto zadbać o to, by układ uwzględniał różnice w wysokości reklamy. W rzadkich przypadkach pełny rozmiar adaptacyjny może nie zostać wypełniony i kreacja o standardowym rozmiarze zostanie wyśrodkowana w tym boksie.

Kiedy używać banerów adaptacyjnych

Banery adaptacyjne zostały zaprojektowane z myślą o zastępowaniu standardowych banerów o rozmiarze 320 x 50 oraz banerów inteligentnych, które zastępują.

Najczęściej są używane jako zakotwiczone banery, które są zwykle zablokowane u góry lub u dołu ekranu. W przypadku takich zakotwiczonych banerów współczynnik proporcji będzie podobny do standardowych banerów 320 x 50, co widać na tych zrzutach ekranu:

Baner adaptacyjny pozwala lepiej wykorzystać dostępny rozmiar ekranu. Poza tym baner adaptacyjny jest lepszym wyborem w porównaniu z banerem inteligentnym, ponieważ:

  • Wykorzystuje podaną szerokość, a nie szerokość ekranu, dzięki czemu można uwzględnić bezpieczne obszary.

  • Wybiera optymalną wysokość dla określonego urządzenia, a nie stałą wysokość dla urządzeń o różnych rozmiarach, co łagodzi skutki fragmentacji urządzenia.

Uwagi dotyczące implementacji

Implementując banery adaptacyjne w swojej aplikacji, pamiętaj o tych kwestiach:

  • Musisz znać szerokość widoku, w którym ma zostać umieszczona reklama, oraz wziąć pod uwagę szerokość urządzenia i wszystkie bezpieczne obszary mające zastosowanie.
  • Zadbaj o to, aby tło widoku reklamy było nieprzezroczyste, aby było zgodne z zasadamiAdMob , jeśli wyświetlają się mniejsze reklamy, które nie wypełniają boksu reklamowego.

  • Upewnij się, że używasz najnowszej wersji pakietu SDK do reklam mobilnych Google. Do zapośredniczenia używaj najnowszych adapterów zapośredniczenia.

  • Rozmiary banerów adaptacyjnych zaprojektowano tak, aby sprawdzały się najlepiej, gdy mają pełną dostępną szerokość. W większości przypadków będzie to pełna szerokość ekranu używanego urządzenia. Pamiętaj, aby uwzględnić odpowiednie bezpieczne obszary.

  • Pakiet SDK do reklam mobilnych Google zwraca zoptymalizowaną wysokość reklamy dla danej szerokości w GADAdSize.

  • Istnieją 3 metody uzyskiwania rozmiaru reklamy na potrzeby banerów adaptacyjnych: jedną w orientacji poziomej, pionową i jedną dla bieżącej orientacji w momencie wykonywania. Więcej informacji znajdziesz w pełnej dokumentacji interfejsu API poniżej.

  • Rozmiar zwracany dla danej szerokości na danym urządzeniu będzie zawsze taki sam, dlatego po przetestowaniu układu na danym urządzeniu możesz mieć pewność, że rozmiar reklamy się nie zmieni.

  • Wysokość zakotwiczonego banera nigdy nie przekracza 15% wysokości urządzenia i nigdy nie może być mniejsza niż 50pkt.

Krótkie wprowadzenie

Aby wdrożyć prosty zakotwiczony baner adaptacyjny, wykonaj podane niżej czynności.

  1. Utwórz a GADBannerView obiekt i ustaw identyfikator jednostki reklamowej.

  2. Wybierz rozmiar adaptacyjnego banera reklamowego Zostanie on wykorzystany do wysłania żądania banera adaptacyjnego. Aby korzystać z rozmiaru reklamy adaptacyjnej, musisz:

    1. Sprawdź szerokość używanego urządzenia lub ustaw własną, jeśli nie chcesz korzystać z pełnej szerokości ekranu.
    2. Użyj odpowiednich metod statycznych klasy rozmiaru reklamy, np. GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) , aby uzyskać obiekt adaptacyjny GADAdSize obiekt dla wybranej orientacji.
    3. Ustaw rozmiar reklamy w widoku banera reklamowego,, konfigurując właściwość adSize w systemie GADBannerView.

    Poniżej znajdziesz pełny przykład.

  3. Utwórz obiekt żądania reklamy i wczytaj baner za pomocą metodyloadRequestw przygotowanym widoku reklamy, tak jak w przypadku zwykłego żądania banera.

Przykładowy kod

Oto przykład kontrolera widoku, który będzie wczytywać i ponownie wczytywać baner adaptacyjny w dowolnej wersji iOS, biorąc pod uwagę bezpieczny obszar i orientację widoku:

Swift

class ViewController: UIViewController {

  @IBOutlet weak var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Step 1 - Create a GADBannerView (in code or interface builder) and set the
    // ad unit ID on it.
    bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    bannerView.rootViewController = self
  }

  override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    // Note loadBannerAd is called in viewDidAppear as this is the first time that
    // the safe area is known. If safe area is not a concern (e.g., your app is
    // locked in portrait mode), the banner can be loaded in viewWillAppear.
    loadBannerAd()
  }

  override func viewWillTransition(to size: CGSize,
                          with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to:size, with:coordinator)
    coordinator.animate(alongsideTransition: { _ in
      self.loadBannerAd()
    })
  }

  func loadBannerAd() {
    // Step 2 - Determine the view width to use for the ad width.
    let frame = { () -> CGRect in
      // Here safe area is taken into account, hence the view frame is used
      // after the view has been laid out.
      if #available(iOS 11.0, *) {
        return view.frame.inset(by: view.safeAreaInsets)
      } else {
        return view.frame
      }
    }()
    let viewWidth = frame.size.width

    // Step 3 - Get Adaptive GADAdSize and set the ad view.
    // Here the current interface orientation is used. If the ad is being preloaded
    // for a future orientation change or different orientation, the function for the
    // relevant orientation should be used.
    bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

    // Step 4 - Create an ad request and load the adaptive banner ad.
    bannerView.load(GADRequest())
  }
}

Objective-C

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Step 1 - Create a GADBannerView (in code or interface builder) and set the
  // ad unit ID on it.
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
  self.bannerView.rootViewController = self;
}

- (void)viewDidAppear:(BOOL)animated {
  [super viewDidAppear:animated];
  // Note loadBannerAd is called in viewDidAppear as this is the first time that
  // the safe area is known. If safe area is not a concern (e.g., your app is
  // locked in portrait mode), the banner can be loaded in viewWillAppear.
  [self loadBannerAd];
}

- (void)viewWillTransitionToSize:(CGSize)size
    withTransitionCoordinator:(id)coordinator {
  [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
  [coordinator animateAlongsideTransition:^(id
      _Nonnull context) {
        [self loadBannerAd];
  } completion:nil];
}

- (void)loadBannerAd {
  // Step 2 - Determine the view width to use for the ad width.
  CGRect frame = self.view.frame;
  // Here safe area is taken into account, hence the view frame is used after
  // the view has been laid out.
  if (@available(iOS 11.0, *)) {
    frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
  }
  CGFloat viewWidth = frame.size.width;

  // Step 3 - Get Adaptive GADAdSize and set the ad view.
  // Here the current interface orientation is used. If the ad is being
  // preloaded for a future orientation change or different orientation, the
  // function for the relevant orientation should be used.
  self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

  // Step 4 - Create an ad request and load the adaptive banner ad.
  GADRequest *request = [GADRequest request];
  [self.bannerView loadRequest:request];
}

@end

W tym przypadku funkcja GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) służy do określenia rozmiaru banera w pozycji zakotwiczonej w bieżącej orientacji interfejsu. Aby wstępnie wczytywać zakotwiczony baner w danej orientacji, użyj odpowiedniej funkcji z GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width) i GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth(CGFloat width).

Uzupełnij przykład na GitHubie

Swift Objective-C