Quảng cáo biểu ngữ

Quảng cáo biểu ngữ chiếm một phần 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ị. Những quảng cáo này nằm 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 mới 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.

Tài liệu hướng dẫn này trình bày 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à thông tin hướng dẫn, bài viết này còn cung cấp thông tin về cách xác định kích thước biểu ngữ sao cho phù hợp và đường liên kết đến các tài liệu tham khảo khác.

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

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 nhớ sử dụng quảng cáo thử nghiệm thay vì quảng cáo 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ữ 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 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 bài viết Quảng cáo thử nghiệm.

Tạo một GADBannerView

Quảng cáo biểu ngữ hiển thị trong các đối tượng GADBannerView, nên bước đầu tiên để tích hợp quảng cáo biểu ngữ là đưa GADBannerView vào hệ phân cấp chế độ xem của bạn. Bạn thường thực hiện việc này 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ỳ chế độ xem thông thường nào. Khi sử dụng phương thức này, hãy nhớ thêm các điều kiện ràng buộc về chiều rộng và chiều cao cho 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ị 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 pháp có lập trình

Bạn cũng có thể tạo thực thể trực tiếp cho GADBannerView. 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 trê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 đưa ra giới hạn về chiều rộng hoặc chiều cao, vì kích thước quảng cáo được cung cấp sẽ cung cấp 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 kích thước tuỳ chỉnh bằng cách sử dụng GADAdSizeFromCGSize. Xem phần kích thước biểu ngữ để biết thêm thông tin.

Định cấu hình GADBannerView các thuộc tính

Để tải và hiển thị quảng cáo, GADBannerView sẽ yêu cầu bạn đặt một vài thuộc tính.

  • rootViewController – Bộ điều khiển chế độ xem này dùng để hiển thị lớp phủ khi có người nhấp vào quảng cáo. Bộ điều khiển này thường nên được đặt thành bộ điều khiển chế độ xem có chứa GADBannerView.
  • adUnitID – Đây là mã đơn vị quảng cáo mà từ đó 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;
}

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

Sau khi GADBannerView đã sẵn sàng và các thuộc tính tương ứng đã được định cấu hình, bước tiếp theo là 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.

Nếu quảng cáo của bạn không tải được, bạn không cần yêu cầu một quảng cáo khác một cách rõ ràng, 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 tuân theo mọi tốc độ làm mới mà bạn đã chỉ định trong giao diện người dùngAdMob . Nếu chưa bật tính năng làm mới thì 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ý sử dụng sự kiện quảng cáo 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, mà trong trường hợp đó, bạn có thể đặt thuộc tính delegate 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 sự kiện 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: 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ề Thực thể uỷ quyền quảng cáo cho quy trình triển khai 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

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

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

Bạn nên trì hoãn việc thêm 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 cho quảng cáo biểu ngữ

Bạn cũng có thể sử dụng sự kiện bannerViewDidReceiveAd: để tạo quảng cáo biểu ngữ tạo ảnh độ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 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 đế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. 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

Dưới đây là bảng liệt kê các kích thước biểu ngữ chuẩn.

Kích thước tính theo điểm (RxC) Nội dung mô tả Phạm vi cung cấp 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 đủ IAB Máy tính bảng GADAdSizeFullBanner
728x90 Hình chữ nhật dài IAB Máy tính bảng GADAdSizeLeaderboard
Chiều rộng đã cho 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 tùy chỉnh

Để xác định kích thước biểu ngữ tuỳ chỉnh, hãy đặt kích thước mà bạn muốn bằng cách sử dụng GADAdSizeFromCGSize như dưới đây:

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

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

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

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.