Thêm quảng cáo tự nhiên vào ứng dụng iOS

API Quảng cáo tự nhiên hỗ trợ bạn tạo trải nghiệm tùy chỉnh cho quảng cáo mà bạn hiển thị trong ứng dụng. Khi sử dụng API Quảng cáo tự nhiên, thay vì nhận được quảng cáo sẵn sàng hiển thị, bạn sẽ nhận được nhóm thuộc tính quảng cáo chẳng hạn như tiêu đề, hình ảnh, nút kêu gọi hành động. Bạn sẽ phải sử dụng các thuộc tính đó để tạo UIView tùy chỉnh nơi hiển thị quảng cáo đó.

Hãy cùng triển khai vị trí quảng cáo tự nhiên sau đây. Bạn sẽ tạo những chế độ xem sau đây cho quảng cáo tự nhiên của chúng ta.

Bước 1: Tạo chế độ xem quảng cáo tự nhiên trong Bảng chi tiết

Bước 2: Tải và hiển thị quảng cáo tự nhiên

Bước 3: Cách lấy tỷ lệ khung hình của nội dung và áp dụng chiều rộng cũng như chiều cao tự nhiên

Bước 4: Xác minh quá trình ghi lượt hiển thị và lượt click

Bước 5: Cách gỡ lỗi khi quảng cáo không hiển thị

Bước 6: Tải quảng cáo mà không tự động lưu vào bộ nhớ đệm

Bước 7: Thử nghiệm tiện ích tích hợp quảng cáo

Xem các sự cố đã biết trong nhật ký thay đổi

Bước 1: Tạo chế độ xem quảng cáo tự nhiên trong Bảng chi tiết

1. Sau khi bạn tạo dự án mới từ hướng dẫn Bắt đầu trên iOS, hãy mở Main.storyboard. Thêm một thành phần UIView vào thành phần View chính và đặt tên là adUIView.
   
   
   
2. Ngoài ra, hãy thêm adIconImageView (FBMediaView), adTitleLabel (UILabel), adCoverMediaView (FBMediaView), adSocialContext (UILabel), adCallToActionButton (UIButton), adOptionsView (FBAdOptionsView), adBodyLabel (UILabel), sponsoredLabel (UILabel) trong adUIView như hình minh họa dưới đây.
   
   
   
3. Bạn có thể nhận thấy một mũi tên đỏ ở cạnh Màn hình trình kiểm soát chế độ xem. Mũi tên này thường có nghĩa là bố cục của bạn bị thiếu các hạn chế.
   
   
   Bạn sẽ cần chọn tất cả các đối tượng của chế độ xem trong màn hình, rồi nhấp vào biểu tượng "giải quyết vấn đề bố cục" để thêm các hạn chế bị thiếu.
   
   
   
4. Giờ thì đã tạo xong tất cả các thành phần giao diện người dùng để hiển thị quảng cáo tự nhiên, bạn sẽ cần tham chiếu các thành phần giao diện người dùng này trong giao diện ViewController. Đầu tiên, hãy mở ViewController.m (ViewController.swift nếu bạn đang sử dụng Swift), rồi kéo adUIView vào bên trong đối tượng ViewController. Bạn có thể đặt tên chế độ xem này là adUIView. Sau đó, bạn sẽ cần thực hiện tương tự đối với adIconImageView, adTitleLabel, adCoverMediaView, adSocialContext, adCallToActionButton, adOptionsView, adBodyLabel, sponsoredLabel.
   
   
   
5. Tạo và chạy dự án. Bạn sẽ nhìn thấy nội dung trống trên thiết bị hoặc trình mô phỏng như sau:
   

Bây giờ, bạn đã tạo xong tất cả thành phần giao diện người dùng để hiển thị quảng cáo tự nhiên. Bước tiếp theo là tải quảng cáo tự nhiên và gắn nội dung với các thành phần giao diện người dùng.

Bước 2: Tải và hiển thị quảng cáo tự nhiên

1. Trong file nguồn Trình kiểm soát chế độ xem, hãy nhập SDK, khai báo rằng ViewController tuân thủ giao thức FBNativeAdDelegate và thêm một biến phiên bản FBNativeAd
   SwiftObjective-C

   import UIKit
   import FBAudienceNetwork
   
   class ViewController: UIViewController, FBNativeAdDelegate {
       
     private var nativeAd: FBNativeAd?
   }

   #import <UIKit/UIKit.h>
   @import FBAudienceNetwork;
   
   @interface ViewController () <FBNativeAdDelegate>
   
   @property (strong, nonatomic) FBNativeAd *nativeAd;
   
   @end


2. Trong phương thức viewDidLoad, hãy thêm các dòng mã sau để tải nội dung quảng cáo tự nhiên
   SwiftObjective-C

   override func viewDidLoad() {
     super.viewDidLoad()
       
     let nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
     nativeAd.delegate = self
     nativeAd.loadAd()
   }

   - (void)viewDidLoad 
   {
     [super viewDidLoad];
   
     FBNativeAd *nativeAd = [[FBNativeAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];
     nativeAd.delegate = self;
     [nativeAd loadAd];
   }
   
   

   ID hiển thị tại YOUR_PLACEMENT_ID là ID tạm thời chỉ phục vụ mục đích thử nghiệm.

   Nếu bạn sử dụng ID tạm thời này trong mã đang hoạt động, người dùng sẽ không nhận được quảng cáo (người dùng sẽ nhận được lỗi Không điền). Bạn phải quay lại đây sau khi thử nghiệm và thay thế ID tạm thời này bằng ID vị trí quảng cáo đang hoạt động.

   Để tìm hiểu cách tạo ID vị trí quảng cáo đang hoạt động, hãy tham khảo phần Thiết lập Audience Network

3. Bước tiếp theo là hiển thị quảng cáo khi nội dung sẵn sàng. Bạn sẽ cần có ViewController để triển khai phương thức ủy quyền nativeAdDidLoad
   SwiftObjective-C

   func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
       
     // 1. If there is an existing valid native ad, unregister the view
     if let previousNativeAd = self.nativeAd, previousNativeAd.isAdValid {
       previousNativeAd.unregisterView()
     }
       
     // 2. Retain a reference to the native ad object
     self.nativeAd = nativeAd
   
     // 3. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     nativeAd.registerView(
       forInteraction: adUIView,
       mediaView: adCoverMediaView,
       iconView: adIconImageView,
       viewController: self,
       clickableViews: [adCallToActionButton, adCoverMediaView]
     )
       
     // 4. Render the ad content onto the view
     adTitleLabel.text = nativeAd.advertiserName
     adBodyLabel.text = nativeAd.bodyText
     adSocialContextLabel.text = nativeAd.socialContext
     sponsoredLabel.text = nativeAd.sponsoredTranslation
     adCallToActionButton.setTitle(nativeAd.callToAction, for: .normal)
     adOptionsView.nativeAd = nativeAd
   }

   - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd
   {
     // 1. If there is an existing valid native ad, unregister the view
     if (self.nativeAd && self.nativeAd.isAdValid) {
       [self.nativeAd unregisterView];
     }
   
     // 2. Retain a reference to the native ad object
     self.nativeAd = nativeAd;
   
     // 3. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     [self.nativeAd registerViewForInteraction:self.adUIView
                                     mediaView:self.adCoverMediaView
                                      iconView:self.adIconImageView
                                viewController:self
                                clickableViews:@[self.adCallToActionButton, self.adCoverMediaView]];
   
     // 4. Render the ad content onto the view
     self.adTitleLabel.text = self.nativeAd.advertiserName;
     self.adBodyLabel.text = self.nativeAd.bodyText;
     self.adSocialContextLabel.text = self.nativeAd.socialContext;
     self.sponsoredLabel.text = self.nativeAd.sponsoredTranslation;
     [self.adCallToActionButton setTitle:self.nativeAd.callToAction forState:UIControlStateNormal];
     self.adOptionsView.nativeAd = self.nativeAd; 
   }

Kiểm soát khu vực có thể nhấp

Để cải thiện trải nghiệm người dùng và đạt được kết quả tốt hơn, bạn luôn phải cân nhắc kiểm soát khu vực có thể nhấp của quảng cáo để tránh những lượt click do vô tình. Vui lòng tham khảo trang Chính sách của Audience Network SDK để biết thêm chi tiết về việc tuân thủ khoảng trống không thể nhấp.




4. Chọn mục tiêu bản dựng là thiết bị và chạy mã ở trên, bạn sẽ nhìn thấy nội dung như sau:
   
   
   
   

Bước 3: Cách lấy tỷ lệ khung hình của nội dung và áp dụng chiều rộng cũng như chiều cao tự nhiên

Trong ví dụ ở trên, nội dung file phương tiện của quảng cáo được hiển thị trong adCoverMediaView và loại đối tượng của quảng cáo là FBMediaView. Trong bước trước, chúng tôi đã hướng dẫn cách sử dụng FBMediaView để tải nội dung file phương tiện từ đối tượng FBNativeAd cho trước. Chế độ xem này sẽ thay thế thao tác tải thủ công ảnh bìa. Khi tạo FBMediaView, bạn có thể xác định chiều rộng và chiều cao của chế độ xem nhờ các hạn chế bố cục tự động được đặt trong bảng chi tiết hoặc có thể mã hóa cứng chiều rộng và chiều cao. Tuy nhiên, chiều rộng và chiều cao của chế độ xem này có thể không vừa với ảnh bìa thực tế của quảng cáo được tải xuống sau đó. Để khắc phục vấn đề này, ví dụ sau đây sẽ hướng dẫn cách lấy tỷ lệ khung hình của nội dung và áp dụng chiều rộng cũng như chiều cao tự nhiên:

1. Khai báo rằng Trình kiểm soát chế độ xem của bạn triển khai giao thức FBMediaViewDelegate
   SwiftObjective-C

   class ViewController: UIViewController, FBNativeAdDelegate, FBMediaViewDelegate {
     ...
   }

   @interface ViewController : UIViewController <FBNativeAdDelegate, FBMediaViewDelegate>
   ...
   @end


2. Khi quảng cáo tự nhiên được tải, hãy đặt phương thức ủy quyền của đối tượng FBMediaView làm trình kiểm soát chế độ xem của bạn
   SwiftObjective-C

   func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
     adCoverMediaView.delegate = self
   }

   - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
   {
     self.adCoverMediaView.delegate = self;
   }


3. Triển khai phương thức mediaViewDidLoad trong trình kiểm soát chế độ xem của bạn
   SwiftObjective-C

   func mediaViewDidLoad(_ mediaView: FBMediaView) {
     let currentAspect = mediaView.frame.size.width / mediaView.frame.size.height
     print(currentAspect)
     
     let actualAspect = mediaView.aspectRatio
     print(actualAspect)
   }

   - (void)mediaViewDidLoad:(FBMediaView *)mediaView
   {
     CGFloat currentAspect = mediaView.frame.size.width / mediaView.frame.size.height;
     NSLog(@"current aspect of media view: %f", currentAspect);
     
     CGFloat actualAspect = mediaView.aspectRatio;
     NSLog(@"actual aspect of media view: %f", actualAspect);
   }
   
   mediaView.aspectRatio trả về CGFloat dương hoặc bằng 0,0 nếu hiện không có quảng cáo nào được tải. Giá trị này hợp lệ sau khi chế độ xem file phương tiện được tải. Có các phương thức thuận tiện giúp đặt chiều rộng và chiều cao của đối tượng FBMediaView phù hợp với tỷ lệ khung hình của nội dung file phương tiện được tải. Bạn có thể gọi applyNaturalWidth hoặc applyNaturalHeight để cập nhật chiều rộng hoặc chiều cao của đối tượng FBMediaView sao cho phù hợp với tỷ lệ khung hình của nội dung file phương tiện.

Bước 4: Xác minh quá trình ghi lượt hiển thị và lượt click

Nếu muốn, bạn có thể thêm những hàm sau để xử lý các trường hợp quảng cáo tự nhiên bị đóng hoặc khi người dùng nhấp vào quảng cáo đó

func nativeAdDidClick(_ nativeAd: FBNativeAd) {
  print("Native ad was clicked.")
}

func nativeAdDidFinishHandlingClick(_ nativeAd: FBNativeAd) {
  print("Native ad did finish click handling.")
}

func nativeAdWillLogImpression(_ nativeAd: FBNativeAd) {
  print("Native ad impression is being captured.")
}

- (void)nativeAdDidClick:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad was clicked.");
}

- (void)nativeAdDidFinishHandlingClick:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad did finish click handling.");
}

- (void)nativeAdWillLogImpression:(FBNativeAd *)nativeAd
{
  NSLog(@"Native ad impression is being captured.");
}

Bước 5: Cách gỡ lỗi khi quảng cáo không hiển thị

Thêm và triển khai hàm sau đây trong trình kiểm soát chế độ xem để xử lý lỗi tải quảng cáo

func nativeAd(_ nativeAd: FBNativeAd, didFailWithError error: Error) {
  print("Native ad failed to load with error: \(error.localizedDescription)")
}

- (void)nativeAd:(FBNativeAd *)nativeAd didFailWithError:(NSError *)error
{
  NSLog(@"Native ad failed to load with error: %@", error);
}

Bước 6: Tải quảng cáo mà không tự động lưu vào bộ nhớ đệm

1. Bạn nên bật tính năng lưu file phương tiện vào bộ nhớ đệm theo mặc định trong tất cả các trường hợp. Tuy nhiên, bạn có thể ghi đè tính năng mặc định này. Hãy hết sức thận trọng nếu bạn quyết định ghi đè tùy chọn lưu file phương tiện vào bộ nhớ đệm mặc định của chúng tôi
   SwiftObjective-C

   let nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
   nativeAd.delegate = self
   nativeAd.loadAd(withMediaCachePolicy: .none)

   FBNativeAd *nativeAd = [[FBNativeAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];
   nativeAd.delegate = self;
   [nativeAd loadAdWithMediaCachePolicy:FBNativeAdsCachePolicyNone];


2. Trước tiên, bạn cần tải xuống tất cả file phương tiện cho quảng cáo tự nhiên theo cách thủ công
   SwiftObjective-C

   func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
     
     ...
     
     self.adCoverMediaView.delegate = self
     nativeAd.downloadMedia()
     self.nativeAd = nativeAd
     
     ...
   }

   - (void)nativeAdDidLoad:(FBNativeAd *)nativeAd
   {
     ...
   
     self.adCoverMediaView.delegate = self;
     [nativeAd downloadMedia];
     self.nativeAd = nativeAd;
   
     ...
   }


3. Tiếp theo, bạn chỉ cần gọi registerViewForInteraction và hiển thị quảng cáo sau lệnh gọi lại mediaViewDidLoad. Bạn phải tải và hiển thị tất cả file phương tiện để có lượt hiển thị đủ điều kiện
   SwiftObjective-C

   func mediaViewDidLoad(_ mediaView: FBMediaView) {
     guard let nativeAd = nativeAd else {
       return
     }
     
     // 1. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     nativeAd.registerView(
       forInteraction: adUIView,
       mediaView: mediaView,
       iconView: adIconImageView,
       viewController: self,
       clickableViews: [adCallToActionButton, mediaView]
     )
       
     // 2. Render the ad content onto the view
     adTitleLabel.text = nativeAd.advertiserName
     adBodyLabel.text = nativeAd.bodyText
     adSocialContextLabel.text = nativeAd.socialContext
     sponsoredLabel.text = nativeAd.sponsoredTranslation
     adCallToActionButton.setTitle(nativeAd.callToAction, for: .normal)
     adOptionsView.nativeAd = nativeAd
   }

   - (void)mediaViewDidLoad:(FBMediaView *)mediaView 
   {
     if (!self.nativeAd) {
       return;
     }
   
     // 1. Register what views will be tappable and what the delegate is to notify when a registered view is tapped
     // Here only the call-to-action button and the media view are tappable, and the delegate is the view controller
     [self.nativeAd registerViewForInteraction:self.adUIView
                                     mediaView:mediaView
                                      iconView:self.adIconImageView
                             viewController:self
                            clickableViews:@[self.adCallToActionButton, mediaView]];
   
     // 2. Render the ad content onto the view
     self.adTitleLabel.text = self.nativeAd.advertiserName;
     self.adBodyLabel.text = self.nativeAd.bodyText;
     self.adSocialContextLabel.text = self.nativeAd.socialContext;
     self.sponsoredLabel.text = self.nativeAd.sponsoredTranslation;
     [self.adCallToActionButton setTitle:self.nativeAd.callToAction forState:UIControlStateNormal];
     self.adOptionsView.nativeAd = self.nativeAd; 
   }