Quảng cáo biểu ngữ

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. Quảng cáo biểu ngữ vẫn nằm trên màn hình trong khi người dùng tương tác với ứng dụng. Loại quảng cáo này nằm cố định ở đầu hoặc cuối màn hình, hoặc xuất hiện cùng với nội dung khi người dùng cuộn xem nội dung. Quảng cáo biểu ngữ có thể tự động làm mới sau một khoảng thời gian nhất định. Hãy xem bài viết Tổng quan về quảng cáo biểu ngữ để biết thêm thông tin.

Tài liệu hướng dẫn này trình bày cách bắt đầu sử dụng quảng cáo biểu ngữ thích ứng cố định, giúp tối đa hoá hiệu suất bằng cách tối ưu hoá kích thước quảng cáo cho từng thiết bị sử dụng chiều rộng quảng cáo mà bạn chỉ định.

Quảng cáo biểu ngữ thích ứng cố định

Quảng cáo biểu ngữ thích ứng cố định là quảng cáo có tỷ lệ khung hình cố định thay vì quảng cáo có kích thước cố định thông thường. Tỷ lệ khung hình tương tự như tiêu chuẩn ngành 320*50. Sau khi chỉ định chiều rộng đầy đủ hiện có, bạn sẽ nhận được quảng cáo có chiều cao tối ưu cho chiều rộng đó. Chiều cao tối ưu không thay đổi theo các yêu cầu từ cùng một thiết bị, và chế độ xem xung quanh không cần di chuyển khi quảng cáo làm mới.

Đ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 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/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 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. Việ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ể 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:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    let viewWidth = view.frame.inset(by: view.safeAreaInsets).width

    // Here the current interface orientation is used. Use
    // GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or
    // GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a
    // particular orientation,
    let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
    bannerView = GADBannerView(adSize: adaptiveSize)

    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];
  
  // Here safe area is taken into account, hence the view frame is used after the
  // view has been laid out.
  CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
  CGFloat viewWidth = frame.size.width;

  // Here the current interface orientation is used. If the ad is being preloaded
  // for a future orientation change or different orientation, the function for the
  // relevant orientation should be used.
  GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GADBannerView alloc] initWithAdSize:adaptiveSize];

  [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.

Trình tạo giao diện

Mẹo: Tìm hiểu cách hiển thị quảng cáo biểu ngữ bằng SwiftUI.

Bạn có thể thêm một 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 quy tắc ràng buộc về 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 chế độ xem biểu ngữ bằng với phần đầu của Hướng dẫn bố cục dưới cùng và đặt tâm X ở chính giữa bằng với chính giữa X của chế độ xem Superview.

Kích thước quảng cáo của biểu ngữ vẫn được đặt theo phương thức lập trình:

Swift

  bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

Objective-C

  self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

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()
  ...
  
  //  Set the ad unit ID and view controller that contains the GADBannerView.
  bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
  bannerView.rootViewController = self

  bannerView.load(GADRequest())
}

Objective-C

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  
  //  Set the ad unit ID and view controller that contains the GADBannerView.
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
  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 duy nhất và chứa các thuộc tính của các 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, thì 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 sẽ tuân theo 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 thì bạn cần đưa ra yêu cầu mới.

Mẹo: Bạn có thể sử dụng lệnh gọi tải quảng cáo để tạo bộ nhớ đệm của quảng cáo tải trước trước khi dự định hiển thị quảng cáo. Nhờ đó, quảng cáo có thể hiển thị với độ trễ bằng 0 khi cần. Vì quảng cáo hết hạn sau một giờ, nên bạn nên xoá bộ nhớ đệm này và tải lại các quảng cáo mới mỗi giờ.

Sự kiện quảng cáo

Khi 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 để 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

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 khung hiển thị 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 ả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 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 hay không, hãy đăng ký các phương thức GADBannerViewDelegate này.

Để nắm bắt mọi 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

Tài nguyên bổ sung

Ví dụ trên GitHub

• Ví dụ về quảng cáo biểu ngữ thích ứng cố định: Swift | 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 lớp phủ lớn hơn, kèm theo một nút để thu gọn quảng cáo xuống 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. Xem quảng cáo biểu ngữ có thể thu gọn để biết thêm chi tiết.

Quảng cáo biểu ngữ thích ứng cùng dò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. Các màn hình này có nhiều chiều cao và có thể cao bằng màn hình của 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 đối với những ứ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

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