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

Chọn nền tảng: Android iOS Unity Flutter Android (Phiên bản cũ)

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 cố định ở đầu hoặc cuối 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 một quảng cáo biểu ngữ neo thích ứng vào một ứng dụng iOS.

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

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

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

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

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ữ trên 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ể sử dụng mã này trong ứng dụng của mình khi lập trình, chạy thử nghiệm 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ạn thường thực hiện việc này theo phương thức lập trình hoặc thông qua Interface Builder.

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ể cho GADBannerView. Ví dụ sau đây sẽ tạo một 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),
])
BannerSnippets.swift

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

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

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

Interface Builder

Bạn có thể thêm một GADBannerView vào tệp storyboard hoặc xib. Khi sử dụng phương thức này, hãy nhớ chỉ thêm các giới hạn vị trí trên biểu ngữ. Ví dụ: khi hiển thị một 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 phần trên cùng của Hướng dẫn bố cục dưới cùng và đặt ràng buộc centerX bằng 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 bố cục không cuộn. So với biểu ngữ thích ứng cố định tiêu chuẩn, những biểu ngữ này cho phép chiều cao tối đa lớn hơn (tối đa 20% chiều cao màn hình, từ 50 đến 150 điểm). Không gian tăng thêm này được tối ưu hoá cho nội dung video.

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

Swift

// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
BannerSnippets.swift

Objective-C

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

Tải một 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, đã đến lúc tải một 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:

Swift

func loadBannerAd(bannerView: BannerView) {
  // Request a large anchored adaptive banner with a width of 375.
  bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
  bannerView.load(Request())
}
BannerSnippets.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:[GADRequest request]];
BannerSnippets.m

Các đối tượng GADRequest biểu thị một yêu cầu quảng cáo duy nhất và chứa các thuộc tính cho những thông tin như thông tin nhắm mục tiêu.

Lưu ý: Bạn có thể sử dụng các lệnh gọi tải quảng cáo để tạo bộ nhớ đệm gồm các quảng cáo được tải trước khi bạn dự định hiển thị quảng cáo, nhờ đó quảng cáo có thể hiển thị mà không bị trễ khi cần. Vì quảng cáo hết hạn sau một giờ, nên bạn phải xoá bộ nhớ đệm này và tải lại quảng cáo mới mỗi giờ.

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

Nếu đã đị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 tôn trọ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 chưa bật tính năng làm mới, hãy đưa ra yêu cầu mới. Để biết thêm thông tin 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ữ.

Lưu ý: Khi bạn đặt tốc độ làm mới trong giao diện người dùng AdMob, tính năng tự động làm mới chỉ xảy ra nếu biểu ngữ hiển thị trên màn hình.

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ừ chế độ portrait 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ị một 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 bố cục có thể xử lý việc thay đổ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.
  })
}
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

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 một đối tượng 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, mà trong trường hợp này, bạn có thể đặt thuộc tính delegate thành self.

Swift

bannerView.delegate = self
BannerSnippets.swift

SwiftUI

banner.delegate = context.coordinator
BannerContentView.swift

Objective-C

bannerView.delegate = self;
BannerSnippets.m

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

Mỗi phương thức trong GADBannerViewDelegate đều đượ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à mình muốn. Sau đây là ví dụ về cách triển khai từng phương thức và ghi nhật ký 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.")
}
BannerSnippets.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");
}
BannerSnippets.m

Xem ví dụ về Thực thể đại diện quảng cáo để biết cách triển khai các phương thức uỷ quyền quảng cáo biểu ngữ trong ứng dụng iOS API Demo.

Swift Objective-C

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

Sau đây là một số ví dụ về trường hợp sử dụng 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ể muốn trì hoãn việc thêm GADBannerView vào hệ phân cấp view cho đến sau 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 ảnh động cho quảng cáo biểu ngữ

Bạn cũng có thể sử dụng sự kiện bannerViewDidReceiveAd: để tạo ảnh động cho quảng cáo biểu 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 sử dụng ứ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 một lượt nhấp khiến lớp phủ xuất hiện hoặc bị đóng. Nếu bạn muốn theo dõi xem những 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, không chỉ những lệnh gọi đến từ lượt nhấp vào quảng cáo, ứng dụng của bạn nên theo dõi các phương thức tương đương trên UIViewController hoặc UIApplication. Sau đây là một 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

• Ví dụ về quảng cáo biểu ngữ neo thích ứng: Swift | SwiftUI | Objective-C

• Bản minh hoạ các tính năng nâng cao: Swift | Objective-C

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 xuất hiện dưới dạng một lớp phủ lớn hơn, kèm theo một 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 tính năng này để tối ưu hoá hiệu suất hơn nữa. Hãy xem biểu ngữ có thể thu gọn để biết thêm thông tin.

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

Biểu ngữ thích ứng cùng dòng là những biểu ngữ có kích thước lớn hơn và chiều cao cao hơn so với biểu ngữ thích ứng cố định. Chúng có chiều cao thay đổi và có thể cao bằng màn hình thiết bị. Bạn nên dùng biểu ngữ thích ứng cùng dòng thay vì quảng cáo biểu ngữ neo thích ứng cho những ứng dụng đặt quảng cáo biểu ngữ trong nội dung có thể di chuyển lên xuống. Hãy xem biểu ngữ thích ứng nội tuyến để biết thêm thông tin chi tiết.

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

• Quyền riêng tư của người dùng