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 hiển thị 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.

Hướng dẫn này cho bạn biết cách bắt đầu sử dụng quảng cáo biểu ngữ thích ứng được cố định. Loại quảng cáo này 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ị bằng cách 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 320x50. Sau khi bạn chỉ định chiều rộng đầy đủ có sẵn, phương thức này sẽ trả về một 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 giữa các yêu cầu từ cùng một thiết bị và các thành phần hiển thị 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

Luôn thử nghiệm 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 đang chạy trong thực tế. Nếu không làm như vậy, tài khoản của bạn có thể bị tạm ngưng.

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 quảng cáo biểu ngữ trên iOS:

/21775744923/example/adaptive-banner

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 bài viết Quảng cáo thử nghiệm.

Tạo GAMBannerView

Quảng cáo biểu ngữ hiển thị trong các đối tượng GAMBannerView, do đó, bước đầu tiên để tích hợp quảng cáo biểu ngữ là thêm GAMBannerView vào hệ phân cấp khung hiển thị. 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ể khởi tạo trực tiếp GAMBannerView. Ví dụ sau đây sẽ tạo một GAMBannerView:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  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 = GAMBannerView(adSize: adaptiveSize)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GAMBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    // This example doesn't give width or height constraints, as the provided
    // ad size gives the banner an intrinsic content size to size the view.
    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)
      ])
  }
}

SwiftUI

Để sử dụng GAMBannerView, hãy tạo UIViewRepresentable:

private struct BannerView: UIViewRepresentable {
  let adSize: GADAdSize

  init(_ adSize: GADAdSize) {
    self.adSize = adSize
  }

  func makeUIView(context: Context) -> UIView {
    // Wrap the GADBannerView in a UIView. GADBannerView automatically reloads a new ad when its
    // frame size changes; wrapping in a UIView container insulates the GADBannerView from size
    // changes that impact the view returned from makeUIView.
    let view = UIView()
    view.addSubview(context.coordinator.bannerView)
    return view
  }

  func updateUIView(_ uiView: UIView, context: Context) {
    context.coordinator.bannerView.adSize = adSize
  }

  func makeCoordinator() -> BannerCoordinator {
    return BannerCoordinator(self)
  }
BannerContentView.swift

Để quản lý quá trình khởi tạo và hành vi của GAMBannerView, hãy tạo một Coordinator:

class BannerCoordinator: NSObject, GADBannerViewDelegate {

  private(set) lazy var bannerView: GADBannerView = {
    let banner = GADBannerView(adSize: parent.adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(GADRequest())
    banner.delegate = self
    return banner
  }()

  let parent: BannerView

  init(_ parent: BannerView) {
    self.parent = parent
  }
BannerContentView.swift

Để lấy chiều rộng của thành phần hiển thị, hãy sử dụng GeometryReader. Lớp này tính toán kích thước quảng cáo phù hợp cho hướng thiết bị hiện tại. frame được đặt thành chiều cao được tính từ kích thước quảng cáo.

var body: some View {
  GeometryReader { geometry in
    let adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(geometry.size.width)

    VStack {
      Spacer()
      BannerView(adSize)
        .frame(height: adSize.size.height)
    }
  }
BannerContentView.swift

Objective-C

Xin 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 có sẵn để xác định kích thước cho chế độ xem.

@import GoogleMobileAds;

@interface ViewController ()

@property(nonatomic, strong) GAMBannerView *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 = [[GAMBannerView alloc] initWithAdSize:adaptiveSize];

  [self addBannerViewToView:self.bannerView];
}

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];
  // This example doesn't give width or height constraints, as the provided
  // ad size gives the banner an intrinsic content size to size the view.
  [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

Trình tạo giao diện

Bạn có thể thêm GAMBannerView 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ị 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 thành phần hiển thị biểu ngữ bằng với phần trên cùng của Đường dẫn bố cục dưới cùng và đặt điều kiện ràng buộc centerX bằng với centerX của thành phần hiển thị cấp trên.

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 quảng cáo

Sau khi GAMBannerView đã 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 GAMRequest:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  // Set the ad unit ID and view controller that contains the GAMBannerView.
  bannerView.adUnitID = "/21775744923/example/adaptive-banner"
  bannerView.rootViewController = self

  bannerView.load(GAMRequest())
}

SwiftUI

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
BannerContentView.swift

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  // Set the ad unit ID and view controller that contains the GAMBannerView.
  self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;

  [self.bannerView loadRequest:[GAMRequest request]];
}

Đối tượng GAMRequest đạ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àm mới quảng cáo

Nếu đã định cấu hình đơn vị quảng cáo để làm mới, 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. 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 Ad Manager. Nếu bạn 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 chi tiết về việc làm mới đơn vị quảng cáo, chẳng hạn như việc đặt tốc độ làm mới, hãy xem bài viết Tốc độ làm mới của quảng cáo trong ứng dụng dành cho thiết bị di động.

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 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ự 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 GAMBannerView 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 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: GAMBannerView!

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

SwiftUI

banner.delegate = self
BannerContentView.swift

Objective-C

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GAMBannerView *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

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ể đại diện quảng cáo đối với 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 mẫu cho các phương thức sự kiện quảng cáo này.

Thêm quảng cáo biểu ngữ vào hệ phân cấp khung hiển thị sau khi nhận được quảng cáo

Bạn có thể cần trì hoãn việc thêm GAMBannerView 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.
  addBannerViewToView(bannerView)
}

Objective-C

- (void)bannerViewDidReceiveAd:(GAMBannerView *)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ữ dạng ả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:(GAMBannerView *)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 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 theo dõi 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
bannerViewWillPresentScreen: viewWillDisappear: của UIViewController
bannerViewWillDismissScreen: viewWillAppear: của UIViewController
bannerViewDidDismissScreen: viewDidAppear: của UIViewController

Tính số lượt hiển thị theo cách thủ công

Bạn có thể gửi các ping lượt hiển thị tới Ad Manager theo cách thủ công nếu có điều kiện đặc biệt về thời điểm ghi lại một lượt hiển thị. Bạn có thể thực hiện việc này bằng cách bật GAMBannerView cho số lượt hiển thị thủ công trước khi tải quảng cáo:

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

Khi xác định rằng một quảng cáo đã được trả về thành công và đang hiển thị trên màn hình, bạn có thể tự kích hoạt một lượt hiển thị:

Swift

bannerView.recordImpression()

Objective-C

[self.bannerView recordImpression];

Sự kiện ứng dụng

Sự kiện ứng dụng cho phép bạn tạo những quảng cáo có thể gửi thông báo đến mã ứng dụng của sự kiện đó. Sau đó, ứng dụng có thể hành động dựa trên các thông báo này.

Bạn có thể theo dõi các sự kiện ứng dụng dành riêng cho Ad Manager bằng cách sử dụng GADAppEventDelegate. Những sự kiện này có thể xảy ra bất kỳ lúc nào trong chu trình hoạt động của quảng cáo, ngay cả trước khi bannerViewDidReceiveAd: của đối tượng GADBannerViewDelegate được gọi.

Swift

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

// Called when the banner receives an app event.
optional public func bannerView(_ banner: GAMBannerView,
    didReceiveAppEvent name: String, withInfo info: String?)

Objective-C

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

@optional
// Called when the banner receives an app event.
-   (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info;

Bạn có thể triển khai các phương thức sự kiện của ứng dụng trong một trình điều khiển khung hiển thị:

Swift

import GoogleMobileAds

class ViewController: UIViewController, GADAppEventDelegate {}

Objective-C

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {}

@end

Hãy nhớ đặt đại biểu bằng cách sử dụng thuộc tính appEventDelegate trước khi đưa ra yêu cầu cho một quảng cáo.

Swift

bannerView.appEventDelegate = self

Objective-C

self.bannerView.appEventDelegate = self;

Sau đây là ví dụ minh hoạ cách thay đổi màu nền của ứng dụng bằng cách chỉ định màu sắc thông qua một sự kiện ứng dụng:

Swift

func bannerView(_ banner: GAMBannerView, didReceiveAppEvent name: String,
    withInfo info: String?) {
  if name == "color" {
    guard let info = info else { return }
    switch info {
    case "green":
      // Set background color to green.
      view.backgroundColor = UIColor.green
    case "blue":
      // Set background color to blue.
      view.backgroundColor = UIColor.blue
    default:
      // Set background color to black.
      view.backgroundColor = UIColor.black
    }
  }
}

Objective-C

- (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info {
  if ([name isEqual:@"color"]) {
    if ([info isEqual:@"green"]) {
      // Set background color to green.
      self.view.backgroundColor = [UIColor greenColor];
    } else if ([info isEqual:@"blue"]) {
      // Set background color to blue.
      self.view.backgroundColor = [UIColor blueColor];
    } else {
      // Set background color to black.
      self.view.backgroundColor = [UIColor blackColor];
    }
  }
}

Đây là mẫu quảng cáo tương ứng sẽ gửi thông báo sự kiện ứng dụng màu đến appEventDelegate:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

Xem ví dụ về Sự kiện ứng dụng Ad Manager để biết cách triển khai sự kiện ứng dụng trong ứng dụng iOS API Demo.

Swift Objective-C

Tài nguyên khác

Ví dụ trên GitHub

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 được trình bày dưới dạng một lớp phủ lớn hơn, với 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 phần quảng cáo 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à biểu ngữ lớn hơn, cao hơn so với biểu ngữ thích ứng cố định. Loại biểu ngữ này có nhiều loại 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 cho những ứng dụng đặt quảng cáo biểu ngữ trong nội dung có thể cuộn. Hãy xem bài viết 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