Quảng cáo biểu ngữ

Quảng cáo biểu ngữ chiếm một vị trí trong bố cục của ứng dụng, ở trên cùng hoặc dưới cùng của màn hình thiết bị. Quảng cáo biểu ngữ luôn hiện trên màn hình trong khi người dùng tương tác với ứng dụng và có thể tự động làm mới sau một khoảng thời gian nhất định. Nếu bạn chưa từng sử dụng quảng cáo trên thiết bị di động, thì đây là loại quảng cáo rất phù hợp để bắt đầu. Nghiên cứu điển hình.

Hướng dẫn này cho bạn biết cách tích hợp quảng cáo biểu ngữ từ AdMob vào một ứng dụng iOS. Ngoài các đoạn mã và hướng dẫn, hướng dẫn này còn bao gồm thông tin về cách định kích thước biểu ngữ đúng cách và đường liên kết đến các tài nguyên khác.

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

• Xem hết hướng dẫn Bắt đầu sử dụng.

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

Khi tạo và thử nghiệm ứng dụng, hãy đảm bảo rằng bạn sử dụng quảng cáo thử nghiệm thay vì quảng cáo đang chạy thực tế. Chúng tôi sẽ tạm ngưng tài khoản của bạn nếu bạn không thực hiện việc nà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ữ iOS: ca-app-pub-3940256099942544/2934735716

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 của SDK quảng cáo trên thiết bị di động, hãy xem 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à bao gồm GADBannerView trong hệ phân cấp chế độ xem của bạn. Bước này thường được thực hiện bằng Trình tạo giao diện hoặc theo phương thức lập trình.

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 như bất kỳ thành phần hiển thị thông thường nào. Khi sử dụng phương thức này, hãy nhớ thêm các giới hạn về chiều rộng và chiều cao để phù hợp với kích thước quảng cáo mà bạn muốn hiển thị. Ví dụ: khi hiển thị một biểu ngữ (320x50), hãy sử dụng giới hạn chiều rộng là 320 điểm và giới hạn chiều cao là 50 điểm.

Theo phương thức lập trình

Bạn cũng có thể tạo thực thể GADBannerView trực tiếp. Dưới đây là ví dụ về cách tạo GADBannerView, được căn chỉnh ở chính giữa phía dưới cùng của vùng an toàn màn hình, với kích thước biểu ngữ là 320x50:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // In this case, we instantiate the banner with desired ad size.
    bannerView = GADBannerView(adSize: GADAdSizeBanner)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GADBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    view.addConstraints(
      [NSLayoutConstraint(item: bannerView,
                          attribute: .bottom,
                          relatedBy: .equal,
                          toItem: view.safeAreaLayoutGuide,
                          attribute: .bottom,
                          multiplier: 1,
                          constant: 0),
       NSLayoutConstraint(item: bannerView,
                          attribute: .centerX,
                          relatedBy: .equal,
                          toItem: view,
                          attribute: .centerX,
                          multiplier: 1,
                          constant: 0)
      ])
   }
   
}

Objective-C

@import GoogleMobileAds;

@interface ViewController ()

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GADBannerView alloc]
      initWithAdSize:GADAdSizeBanner];

  [self addBannerViewToView:self.bannerView];
}

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];
  [self.view addConstraints:@[
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeBottom
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view.safeAreaLayoutGuide
                               attribute:NSLayoutAttributeBottom
                              multiplier:1
                                constant:0],
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeCenterX
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view
                               attribute:NSLayoutAttributeCenterX
                              multiplier:1
                                constant:0]
                                ]];
}
  


@end

Xin lưu ý rằng trong trường hợp này, chúng tôi không cung cấp các hạn chế về chiều rộng hoặc chiều cao, vì kích thước quảng cáo được cung cấp sẽ tạo cho biểu ngữ một kích thước nội dung nội tại để xác định kích thước chế độ xem.

Nếu không muốn sử dụng kích thước chuẩn do hằng số xác định, bạn có thể đặt một kích thước tuỳ chỉnh bằng cách sử dụng GADAdSizeFromCGSize. Hãy xem mục kích thước biểu ngữ để biết thêm thông tin.

Định cấu hình GADBannerView tài sản

Để tải và hiển thị quảng cáo, GADBannerView bạn cần thiết lập một số thuộc tính.

• rootViewController – Bộ điều khiển chế độ xem này dùng để hiển thị lớp phủ khi quảng cáo được nhấp vào. Bộ điều khiển này thường được đặt thành bộ điều khiển chế độ xem chứa GADBannerView.
• adUnitID – Đây là mã đơn vị quảng cáo mà GADBannerView sẽ tải quảng cáo.

Dưới đây là ví dụ về mã cho thấy cách đặt hai thuộc tính bắt buộc trong phương thức viewDidLoad của UIViewController:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
}

Lưu ý: Mã đơn vị quảng cáo được tạo trong giao diện người dùng AdMob và đại diện cho vị trí trong quảng cáo mà ứng dụng của bạn xuất hiện. Ví dụ: nếu hiển thị quảng cáo biểu ngữ trong hai bộ điều khiển chế độ xem, bạn có thể tạo một đơn vị quảng cáo cho từng bộ điều khiển.

Tải một quảng cáo

Sau khi GADBannerView và vị trí của chúng đã được định cấu hình, đã đến lúc 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:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
  bannerView.load(GADRequest())
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
  [self.bannerView loadRequest:[GADRequest request]];
}

GADRequest đối tượng đạ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ưu ý: Nếu quảng cáo không tải được, bạn không cần yêu cầu rõ ràng một quảng cáo khác, miễn là bạn đã định cấu hình đơn vị quảng cáo để làm mới; SDK quảng cáo trên thiết bị di động của Google sẽ tuân theo mọi tốc độ làm mới mà bạn đã chỉ định trong AdMob giao diện người dùng. Nếu chưa bật tính năng làm mới, bạn cần đưa ra yêu cầu mới.

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ý tham gia 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. Nhìn chung, lớp triển khai quảng cáo biểu ngữ cũng đóng vai trò là lớp ủy quyền. Trong trường hợp đó, thuộc tính delegate có thể được đặt thành self.

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    ...
    bannerView.delegate = self
  }
}

Objective-C

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  ...
  self.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 lại thông báo vào bảng điều khiển:

Swift

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  print("bannerViewDidReceiveAd")
}

func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) {
  print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}

func bannerViewDidRecordImpression(_ bannerView: GADBannerView) {
  print("bannerViewDidRecordImpression")
}

func bannerViewWillPresentScreen(_ bannerView: GADBannerView) {
  print("bannerViewWillPresentScreen")
}

func bannerViewWillDismissScreen(_ bannerView: GADBannerView) {
  print("bannerViewWillDIsmissScreen")
}

func bannerViewDidDismissScreen(_ bannerView: GADBannerView) {
  print("bannerViewDidDismissScreen")
}

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ề Ủy quyền quảng cáo để triển khai các phương thức ủy quyền biểu ngữ trong ứng dụng 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 pháp sự kiện quảng cáo này.

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

Bạn có thể muốn trì hoãn việc thêm một GADBannerView vào hệ phân cấp chế độ xem 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: GADBannerView) {
  // Add banner to view and add constraints as above.
  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 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: GADBannerView) {
  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 một 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 những sự kiện này có phải là do quảng cáo tác động 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ỉ 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, ứng dụng của bạn nên lắng nghe các phương thức tương đương trên UIViewController hoặc UIApplication. Dưới đây là bảng hiển thị 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 gTLDDelegate	Phương thức iOS
bannerViewWillPresentScreen:	viewWillDisappear: của UIViewController\39;
bannerViewWillDismissScreen:	viewWillAppear: của UIViewController\39;
bannerViewDidDismissScreen:	viewDidAppear: của UIViewController\39;

Kích thước biểu ngữ

Bảng dưới đây liệt kê các kích thước của biểu ngữ chuẩn.

Kích thước tính theo điểm (WxH)	Nội dung mô tả	Khả năng đáp ứng	Hằng số AdSize
320x50	Biểu ngữ	Điện thoại và máy tính bảng	GADAdSizeBanner
320x100	Biểu ngữ lớn	Điện thoại và máy tính bảng	GADAdSizeLargeBanner
300x250	Hình chữ nhật trung bình IAB	Điện thoại và máy tính bảng	GADAdSizeMediumRectangle
468x60	Biểu ngữ có kích thước đầy đủ trên IAB	Máy tính bảng	GADAdSizeFullBanner
728x90	Bảng xếp hạng IAB	Máy tính bảng	GADAdSizeLeaderboard
Chiều rộng đã cung cấp x Chiều cao thích ứng	Biểu ngữ thích ứng	Điện thoại và máy tính bảng	Không áp dụng

Kích thước quảng cáo tuỳ chỉnh

Để xác định kích thước biểu ngữ tùy chỉnh, hãy đặt kích thước mong muốn bằng cách sử dụng GADAdSizeFromCGSize như sau:

Swift

let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))

Objective-C

GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));

Tài nguyên khác

Ví dụ trên GitHub

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

• Bản giới thiệu các tính năng nâng cao: Swift | Objective-C

• Ví dụ về quảng cáo biểu ngữ UITableView trên GitHub: Swift | Objective-C

Video hướng dẫn về Trung tâm quảng cáo trên thiết bị di động

• Triển khai quảng cáo biểu ngữ
• Các phương pháp hay nhất về quảng cáo biểu ngữ

Câu chuyện thành công

• Trường hợp sử dụng mẫu

Các bước tiếp theo

Tìm hiểu thêm về quyền riêng tư của người dùng.