Thiết lập quảng cáo biểu ngữ

Chọn nền tảng: Android Mới Android iOS Unity Flutter

Quảng cáo biểu ngữ là quảng cáo hình chữ nhật chiếm một phần bố cục của ứng dụng. Biểu ngữ thích ứng cố định luôn xuất hiện trên màn hình, cố định ở phía trên cùng hoặc dưới cùng của màn hình với chiều cao tối đa là 20% kích thước màn hình và chiều cao tối đa là 150 px. Để tối ưu hoá kích thước quảng cáo cho từng thiết bị, hãy sử dụng biểu ngữ thích ứng.

Hướng dẫn này trình bày cách tải quảng cáo biểu ngữ neo thích ứng vào ứng dụng iOS.

Điều kiện tiên quyết

Trước khi tiếp tục, thiết lập Google Mobile Ads SDK.

Luôn kiểm thử bằng quảng cáo thử nghiệm

Khi tạo và kiểm thử ứng dụng, hãy nhớ sử dụng quảng cáo thử nghiệm thay vì quảng cáo thực tế, quảng cáo chính thức. Nếu không làm như vậy, tài khoản của bạn có thể bị tạm ngưng.

Cách dễ nhất để tải quảng cáo thử nghiệm là sử dụng mã đơn vị quảng cáo thử nghiệm dành riêng cho biểu ngữ iOS:

ca-app-pub-3940256099942544/2435281174

Mã này được định cấu hình đặc biệt để trả về quảng cáo thử nghiệm cho mọi yêu cầu và bạn có thể thoải mái sử dụng mã này trong ứng dụng của riêng mình khi viết mã, kiểm thử và gỡ lỗi. Bạn chỉ cần nhớ thay thế mã này bằng mã đơn vị quảng cáo của mình trước khi xuất bản ứng dụng.

Để biết thêm thông tin về cách hoạt động của quảng cáo thử nghiệm Google Mobile Ads SDK, hãy xem bài viết Quảng cáo thử nghiệm.

Tạo GADBannerView

Quảng cáo biểu ngữ hiển thị trong các đối tượng GADBannerView , do đó, bước đầu tiên để tích hợp quảng cáo biểu ngữ là thêm GADBannerView vào hệ phân cấp view của bạn. Bước này thường được thực hiện theo phương thức lập trình hoặc thông qua Trình tạo giao diện.

Theo phương pháp có lập trình

Bạn cũng có thể trực tiếp tạo thực thể GADBannerView. Ví dụ sau đây tạo GADBannerView:

Swift

// Initialize the banner view.
bannerView = BannerView()
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

Để sử dụng BannerView, hãy tạo 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)
  }

Thêm UIViewRepresentable vào hệ phân cấp view, chỉ định các giá trị height và 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.
GADBannerView *bannerView = [[GADBannerView 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;

Trình tạo giao diện

Bạn có thể thêm GADBannerView vào bảng phân cảnh hoặc tệp xib. Khi sử dụng phương thức này, hãy nhớ chỉ thêm các ràng buộc về vị trí trên biểu ngữ. Ví dụ: khi hiển thị biểu ngữ thích ứng ở cuối màn hình, hãy đặt phần dưới cùng của khung hiển thị biểu ngữ bằng với phần trên cùng của Hướng dẫn bố cục dưới cùng và đặt centerX ràng buộc bằng với centerX của khung hiển thị mẹ.

Đặt kích thước quảng cáo

Biểu ngữ thích ứng cỡ lớn cung cấp một định dạng lớn hơn được thiết kế cho các bố cục không cuộn. So với biểu ngữ thích ứng cố định tiêu chuẩn, các biểu ngữ này cho phép chiều cao tối đa cao hơn (tối đa 20% chiều cao màn hình, từ 50 đến 150 điểm). Không gian tăng lên này được tối ưu hoá cho nội dung video.

Ví dụ sau đây lấy kích thước biểu ngữ thích ứng cố định cỡ lớn:

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

Tải quảng cáo

Sau khi GADBannerView được đặt đúng vị trí và các thuộc tính của nó (chẳng hạn như adUnitID) được định cấu hình, bạn có thể tải quảng cáo. Bạn có thể thực hiện việc này bằng cách gọi loadRequest: trên đối tượng GADRequest object:

Swift

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

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

Đối tượng GADRequest đại diện cho một yêu cầu quảng cáo và chứa các thuộc tính cho nội dung như thông tin nhắm mục tiêu.

Làm mới quảng cáo

Nếu bạn đã định cấu hình đơn vị quảng cáo để làm mới, thì bạn không cần yêu cầu một quảng cáo khác khi quảng cáo không tải được. Google Mobile Ads SDK áp dụng mọi tốc độ làm mới mà bạn đã chỉ định trong giao diện người dùng AdMob. Nếu bạn chưa bật tính năng làm mới, hãy gửi yêu cầu mới. Để biết thêm thông tin chi tiết về tính năng làm mới đơn vị quảng cáo, chẳng hạn như cách đặt tốc độ làm mới, hãy xem bài viết Sử dụng tính năng tự động làm mới cho quảng cáo biểu ngữ.

Xử lý các thay đổi về hướng

Khi hướng màn hình của ứng dụng thay đổi, chẳng hạn như từ portrait chế độ sang chế độ ngang, chiều rộng có sẵn cho biểu ngữ cũng thường thay đổi. Để đảm bảo bạn hiển thị quảng cáo có kích thước phù hợp cho bố cục mới, hãy yêu cầu một biểu ngữ mới. Nếu chiều rộng biểu ngữ của bạn là tĩnh hoặc nếu các ràng buộc về bố cục có thể xử lý việc đổi kích thước, hãy bỏ qua bước này.

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];
}

Sự kiện quảng cáo

Thông qua việc sử dụng GADBannerViewDelegate, bạn có thể theo dõi các sự kiện trong vòng đời, chẳng hạn như khi người dùng đóng quảng cáo hoặc rời khỏi ứng dụng.

Đăng ký các sự kiện biểu ngữ

Để đăng ký các sự kiện quảng cáo biểu ngữ, hãy đặt thuộc tính delegate trên GADBannerView thành đối tượng sẽ triển khai giao thức GADBannerViewDelegate. Thông thường, lớp triển khai quảng cáo biểu ngữ cũng đóng vai trò là lớp uỷ quyền. Trong trường hợp đó, bạn có thể đặt thuộc tính delegate thành self.

Swift

bannerView.delegate = self

SwiftUI

banner.delegate = context.coordinator

Objective-C

bannerView.delegate = self;

Triển khai các sự kiện biểu ngữ

Mỗi phương thức trong GADBannerViewDelegate được đánh dấu là không bắt buộc, vì vậy, bạn chỉ cần triển khai các phương thức mà bạn muốn. Ví dụ này triển khai từng phương thức và ghi thông báo vào bảng điều khiển:

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

Xem ví dụ về Thực thể đại diện quảng cáo đối với quy trình triển khai phương thức uỷ quyền quảng cáo biểu ngữ trong ứng dụng minh họa iOS API Demo.

Swift Objective-C

Trường hợp sử dụng

Dưới đây là một số trường hợp sử dụng mẫu cho các phương thức sự kiện quảng cáo này.

Thêm biểu ngữ vào hệ phân cấp view sau khi nhận được quảng cáo

Bạn có thể cần trì hoãn việc thêm GADBannerView vào hệ phân cấp view cho đến khi nhận được quảng cáo. Bạn có thể thực hiện việc này bằng cách theo dõi sự kiện bannerViewDidReceiveAd::

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  // Add banner to view and add constraints.
  addBannerViewToView(bannerView)
}

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

Tạo quảng cáo biểu ngữ dạng ảnh động

Bạn cũng có thể sử dụng sự kiện bannerViewDidReceiveAd: để tạo quảng cáo biểu ngữ dạng ảnh động sau khi quảng cáo biểu ngữ được trả về, như trong ví dụ sau:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  bannerView.alpha = 0
  UIView.animate(withDuration: 1, animations: {
    bannerView.alpha = 1
  })
}

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

Tạm dừng và tiếp tục ứng dụng

Giao thức GADBannerViewDelegate có các phương thức để thông báo cho bạn về các sự kiện, chẳng hạn như khi lượt nhấp khiến lớp phủ hiển thị hoặc bị loại bỏ. Nếu bạn muốn theo dõi xem các sự kiện này có phải do quảng cáo hay không, hãy đăng ký các phương thức GADBannerViewDelegate này.

Để nắm bắt tất cả các loại bản trình bày lớp phủ hoặc lệnh gọi trình duyệt bên ngoài, ứng dụng của bạn nên theo dõi không chỉ các loại bản trình bày hoặc lệnh gọi đến từ lượt nhấp quảng cáo mà nên theo dõi cả các phương thức tương đương trên UIViewController hoặc UIApplication. Dưới đây là bảng cho thấy các phương thức iOS tương đương được gọi cùng lúc với các phương thức GADBannerViewDelegate:

Phương thức GADBannerViewDelegate Phương thức iOS
bannerViewWillPresentScreen: viewWillDisappear: của UIViewController
bannerViewWillDismissScreen: viewWillAppear: của UIViewController
bannerViewDidDismissScreen: viewDidAppear: của UIViewController

Tài nguyên khác

Ví dụ trên GitHub

Các bước tiếp theo

Biểu ngữ có thể thu gọn

Quảng cáo biểu ngữ có thể thu gọn là quảng cáo biểu ngữ ban đầu được trình bày dưới dạng lớp phủ lớn hơn, có nút để thu gọn quảng cáo về kích thước nhỏ hơn. Hãy cân nhắc sử dụng quảng cáo này để tối ưu hoá thêm hiệu suất của bạn. Xem biểu ngữ có thể thu gọn để biết thêm thông tin chi tiết.

Biểu ngữ cùng dòng thích ứng

Biểu ngữ thích ứng cùng dòng là biểu ngữ lớn hơn, cao hơn so với biểu ngữ thích ứng cố định. Biểu ngữ này có chiều cao thay đổi và có thể cao bằng màn hình thiết bị. Bạn nên sử dụng biểu ngữ thích ứng cùng dòng thay vì quảng cáo biểu ngữ thích ứng cố định cho các ứng dụng đặt quảng cáo biểu ngữ trong nội dung có thể cuộn. Xem biểu ngữ thích ứng cùng dòng để biết thêm thông tin chi tiết.

Khám phá các chủ đề khác