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 lưu 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.

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 ứ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 điều chỉnh kích thước biểu ngữ sao cho phù hợp và các đường liên kết đến các tài nguyên 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 đả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 viết mã, 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 bài viết về 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 thứ bậc chế độ xem của bạn. Bước này thường được thực hiện cùng với 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 đảm bảo thêm các giới hạn 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ể khởi tạo trực tiếp 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: kGADAdSizeBanner)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GADBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    view.addConstraints(
      [NSLayoutConstraint(item: bannerView,
                          attribute: .bottom,
                          relatedBy: .equal,
                          toItem: bottomLayoutGuide,
                          attribute: .top,
                          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:kGADAdSizeBanner];

  [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.bottomLayoutGuide
                               attribute:NSLayoutAttributeTop
                              multiplier:1
                                constant:0],
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeCenterX
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view
                               attribute:NSLayoutAttributeCenterX
                              multiplier:1
                                constant:0]
                                ]];
}
  

@end

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

Nếu không muốn sử dụng kích thước tiêu chuẩn do hằng số xác định, bạn có thể đặt kích thước tùy 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 các thuộc tính GADBannerView

Để 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 đượ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 quảng cáo

Sau khi GADBannerView đã sẵn sàng và các thuộc tính của mã đó đã đượ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]];
}

Đố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.

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 chu trình hoạt động của quảng cáo, 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 ủy quyền, mà trong trường hợp này, 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 quảng cáo 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à bạn 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

/// Tells the delegate an ad request loaded an ad.
func adViewDidReceiveAd(_ bannerView: GADBannerView) {
  print("adViewDidReceiveAd")
}

/// Tells the delegate an ad request failed.
func adView(_ bannerView: GADBannerView,
    didFailToReceiveAdWithError error: GADRequestError) {
  print("adView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}

/// Tells the delegate that a full-screen view will be presented in response
/// to the user clicking on an ad.
func adViewWillPresentScreen(_ bannerView: GADBannerView) {
  print("adViewWillPresentScreen")
}

/// Tells the delegate that the full-screen view will be dismissed.
func adViewWillDismissScreen(_ bannerView: GADBannerView) {
  print("adViewWillDismissScreen")
}

/// Tells the delegate that the full-screen view has been dismissed.
func adViewDidDismissScreen(_ bannerView: GADBannerView) {
  print("adViewDidDismissScreen")
}

/// Tells the delegate that a user click will open another app (such as
/// the App Store), backgrounding the current app.
func adViewWillLeaveApplication(_ bannerView: GADBannerView) {
  print("adViewWillLeaveApplication")
}

Objective-C

/// Tells the delegate an ad request loaded an ad.
- (void)adViewDidReceiveAd:(GADBannerView *)adView {
  NSLog(@"adViewDidReceiveAd");
}

/// Tells the delegate an ad request failed.
- (void)adView:(GADBannerView *)adView
    didFailToReceiveAdWithError:(GADRequestError *)error {
  NSLog(@"adView:didFailToReceiveAdWithError: %@", [error localizedDescription]);
}

/// Tells the delegate that a full-screen view will be presented in response
/// to the user clicking on an ad.
- (void)adViewWillPresentScreen:(GADBannerView *)adView {
  NSLog(@"adViewWillPresentScreen");
}

/// Tells the delegate that the full-screen view will be dismissed.
- (void)adViewWillDismissScreen:(GADBannerView *)adView {
  NSLog(@"adViewWillDismissScreen");
}

/// Tells the delegate that the full-screen view has been dismissed.
- (void)adViewDidDismissScreen:(GADBannerView *)adView {
  NSLog(@"adViewDidDismissScreen");
}

/// Tells the delegate that a user click will open another app (such as
/// the App Store), backgrounding the current app.
- (void)adViewWillLeaveApplication:(GADBannerView *)adView {
  NSLog(@"adViewWillLeaveApplication");
}

Xem ví dụ về Ủy quyền quảng cáo cho quy trình triển khai phương thức ủy 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 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 thứ bậc chế độ xem 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 thứ bậc 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 adViewDidReceiveAd::

Swift

func adViewDidReceiveAd(_ bannerView: GADBannerView) {
  // Add banner to view and add constraints as above.
  addBannerViewToView(bannerView)
}

Objective-C

- (void)adViewDidReceiveAd:(GADBannerView *)adView {
  // Add adView 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 adViewDidReceiveAd: để 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ư được hiển thị trong ví dụ sau:

Swift

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

Objective-C

- (void)adViewDidReceiveAd:(GADBannerView *)adView {
  adView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    adView.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ỏ hoặc khi gọi một trình duyệt bên ngoài. 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, ứ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 hiển thị các phương thức tương đương dành cho iOS đượ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
adViewWillPresentScreen: viewWillDisappear: của UIViewController
adViewWillDismissScreen: viewWillAppear: của UIViewController
adViewDidDismissScreen: viewDidAppear: của UIViewController
adViewWillLeaveApplication: applicationDidEnterBackground: của UIApplicationDelegate

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

Kích thước đo bằng điểm (rộngxcao) Nội dung mô tả Khả năng sử dụng Hằng số AdSize
320x50 Biểu ngữ Điện thoại và máy tính bảng kGADAdSizeBanner
320x100 Biểu ngữ lớn Điện thoại và máy tính bảng kGADAdSizeLargeBanner
300x250 Hình chữ nhật trung bình IAB Điện thoại và máy tính bảng kGADAdSizeMediumRectangle
468x60 Biểu ngữ có kích thước đầy đủ IAB Máy tính bảng kGADAdSizeFullBanner
728x90 Hình chữ nhật dài IAB Máy tính bảng kGADAdSizeLeaderboard
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
Chiều rộng màn hình x 32|50|90 Biểu ngữ thông minh Điện thoại và máy tính bảng kGADAdSizeSmartBannerPortrait
kGADAdSizeSmartBannerLandscape
Tìm hiểu thêm về Biểu ngữ thích ứng. Định dạng này dự kiến sẽ thay thế Biểu ngữ thông minh.

Kích thước quảng cáo tùy chỉnh

Để xác định kích thước biểu ngữ tùy chỉnh, hãy đặt kích thước mà bạn muốn bằng cách sử dụng GADAdSizeFromCGSize như được hiển thị 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

Các mẫu 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