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. Chúng luô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, hoặc cố định ở ở đầu hoặc cuối màn hình hoặc cùng dòng với nội dung khi người dùng cuộn. Biểu ngữ quảng cáo có thể tự động làm mới sau một khoảng thời gian nhất định. 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 chỉ cho bạn cách bắt đầu sử dụng biểu ngữ thích ứng cố định quảng cáo, 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 mỗi 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. Tỷ lệ khung hình tương tự như tiêu chuẩn ngành 320*50. Một lần bạn chỉ định chiều rộng đầy đủ có sẵn, tuỳ chọn này sẽ trả về cho bạn quảng cáo có chiều cao 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 chế độ xem xung quanh không cần phải 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 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 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 iOS biểu ngữ:
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 sử dụng miễn phí mã này trong ứng dụng của riêng bạn khi lập trình, thử nghiệm và gỡ lỗi. Chỉ cần tạo bạn nhớ thay thế mã này bằng mã đơn vị quảng cáo của riêng 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 Thử nghiệm Google Ads.
Tạo GADBannerView
Quảng cáo biểu ngữ xuất hiện trong GADBannerView
Do đó, bước đầu tiên để tích hợp quảng cáo biểu ngữ là đưa GADBannerView
trong hệ phân cấp khung hiển thị của bạn. Quá trình 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 vào 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
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 đã cung cấp sẽ mang lại cho biểu ngữ một kích thước nội dung nội tại để định kích thước chế độ xem.
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
. Khi sử dụng phương thức này, hãy đảm bảo chỉ thêm các điều kiện ràng buộc về vị trí vào
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 đáy của chế độ xem biểu ngữ bằng với phần trên cùng của phần dưới cùng
Layout Guide (Hướng dẫn bố cục) rồi đặt X ở giữa bằng với X ở giữa của siêu khung hiển thị.
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
được đưa vào đúng vị trí và các thuộc tính tương ứng
đã đị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
GADRequest
đối tượng:
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]]; }
Các đối tượng NavHost đạ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 cho những thông tin 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 phải yêu cầu một cách rõ ràng một quảng cáo khác như 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 AdMob Giao diện người dùng. Nếu chưa bật tính năng làm mới, bạn sẽ cần phải đưa ra yêu cầu mới.
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ạng thái bật
GADBannerView
thành một đối tượng triển khai
Giao thức GADBannerViewDelegate
. Thông thường, lớp triển khai biểu ngữ
các quảng cáo 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 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, do đó 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 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ề Uỷ quyền quảng cáo để biết cách triển khai các phương thức uỷ quyền biểu ngữ trong ứng dụng iOS API Demo.
Trường hợp sử dụng
Dưới đây là một số ví dụ về trường hợp sử dụng các phương thức 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 GADBannerView
vào
thứ bậc chế độ xem cho đến khi người dùng nhận được quảng cáo. Bạn có thể thực hiện việc này bằng cách lắng nghe
cho 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ữ một lần
hàm đó sẽ đượ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ư
chẳng hạn như khi một lượt nhấp khiến lớp phủ hiện lên 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, đăng ký
GADBannerViewDelegate
phương thức.
Để nắm bắt tất cả các loại bản trình bày lớp phủ hoặc lời gọi trình duyệt bên ngoài, không
chỉ những lượt nhấp đến từ lượt nhấp vào quảng cáo, thì ứ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
. Sau đây là một bảng
hiển thị các phương thức iOS tương đương được gọi cùng lúc với
GADBannerViewDelegate
phương thức:
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 khác
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 được trình bày dưới dạng quảng cáo biểu ngữ lớn hơn có nút để thu gọn quảng cáo xuống kích thước nhỏ hơn. Cân nhắc sử dụng để tối ưu hoá hiệu suất hơn nữa. Xem bài viết quảng cáo biểu ngữ có thể thu gọn để biết thêm thông tin.
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 biểu ngữ. Biểu tượ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ị. Nên dùng quảng cáo 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. Xem nội dung thích ứng cùng dòng biểu ngữ để tìm hiểu thêm chi tiết.