Sử dụng mẫu quảng cáo tự nhiên trong iOS

Nhà phát hành đang tìm cách tiếp cận không can thiệp nhiều hơn khi tích hợp quảng cáo tự nhiên có thể tận dụng mẫu quảng cáo tự nhiên tùy chỉnh trên Audience Network. Tùy chỉnh kích thước, màu sắc và phông chữ của quảng cáo tự nhiên để phù hợp với giao diện ứng dụng của bạn.

Đảm bảo bạn đã hoàn tất hướng dẫn Bắt đầuBắt đầu dành cho iOS với Audience Network trước khi tiếp tục.

Để sử dụng hiệu quả hướng dẫn này, bạn cần nắm vững quy trình triển khai Quảng cáo tự nhiên.

Bước 1: Triển khai mẫu

Bước 2: Tùy chỉnh thêm

Bước 1: Triển khai mẫu

• Triển khai cho quảng cáo tự nhiên

Lúc này, trong file tiêu đề Trình kiểm soát chế độ xem (hoặc file Swift nếu bạn là người dùng Swift), hãy nhập FBAudienceNetwork, tuyên bố tuân thủ giao thức FBAdViewDelegate và thêm biến phiên bản cho đơn vị quảng cáo:

import UIKit
import FBAudienceNetwork

class ViewController: UIViewController, FBNativeAdDelegate {
  private var nativeAd: FBNativeAd?
}
#import <UIKit/UIKit.h>
@import FBAudienceNetwork;

@interface ViewController : UIViewController <FBNativeAdDelegate>

@property (nonatomic, strong) FBNativeAd *nativeAd;

@end

Sau đó, hãy thêm một phương thức vào file triển khai của Trình kiểm soát chế độ xem để khởi tạo FBNativeAd và yêu cầu tải quảng cáo:

override func viewDidLoad() {
  super.viewDidLoad()
    
  // Instantiate the ad object.
  // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
  // now, while you are testing and replace it later when you have signed up.
  // While you are using this temporary code you will only get test ads and if you release
  // your code like this to the App Store your users will not receive ads (you will get a 'No Fill' error).
  let nativeAd = FBNativeAd(placementID: "YOUR_PLACEMENT_ID")
  nativeAd.delegate = self
  nativeAd.loadAd()
}
- (void)viewDidLoad 
{
  [super viewDidLoad];
  // Instantiate a NativeAd object. 
  // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
  // now, while you are testing and replace it later when you have signed up.
  // While you are using this temporary code you will only get test ads and if you release
  // your code like this to the App Store your users will not receive ads (you will get a no fill error).
  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

Lúc này, bạn đã thêm mã để tải quảng cáo. Hãy thêm các hàm sau đây để tạo quảng cáo sau khi quá trình tải quảng cáo hoàn tất:

func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
    
  if let previousNativeAd = self.nativeAd, previousNativeAd.isAdValid {
    previousNativeAd.unregisterView()
  }
    
  self.nativeAd = nativeAd

  let adView = FBNativeAdView(nativeAd: nativeAd, with: .genericHeight300)

  view.addSubview(adView)

  let size = view.bounds.size
  let xOffset: CGFloat = size.width / 2 - 160
  let yOffset: CGFloat = (size.height > size.width) ? 100 : 20
  adView.frame = CGRect(x: xOffset, y: yOffset, width: 320, height: 300)
}
- (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
{    
  self.nativeAd = nativeAd;
  [self showNativeAd];
}

- (void)showNativeAd
{
  if (self.nativeAd && self.nativeAd.isAdValid) {
    [self.nativeAd unregisterView];
  }

  FBNativeAdView *adView = [FBNativeAdView nativeAdViewWithNativeAd:self.nativeAd withType:FBNativeAdViewTypeGenericHeight300];

  [self.view addSubview:adView];

  CGSize size = self.view.bounds.size;
  CGFloat xOffset = size.width / 2 - 160;
  CGFloat yOffset = (size.height > size.width) ? 100 : 20;
  adView.frame = CGRectMake(xOffset, yOffset, 320, 300);
}

Chọn thiết bị làm mục tiêu xây dựng và chạy mã ở trên, bạn sẽ thấy kết quả như sau:



Định dạng quảng cáo tùy chỉnh có 2 mẫu:

Loại chế độ xem mẫu Chiều cao Chiều rộng Có thuộc tính

FBNativeAdView TypeGenericHeight300

300dp

Chiều rộng linh hoạt

Hình ảnh, biểu tượng, tiêu đề, ngữ cảnh, mô tả và nút kêu gọi hành động

FBNativeAdView TypeGenericHeight400

400dp

Chiều rộng linh hoạt

Hình ảnh, biểu tượng, tiêu đề, tiêu đề phụ, ngữ cảnh, mô tả và nút kêu gọi hành động

• Triển khai cho quảng cáo biểu ngữ tự nhiên

Để hiển thị quảng cáo biểu ngữ tự nhiên bằng mẫu có tùy chọn chiều cao 100 và 120, bạn cần tạo một phiên bản FBNativeBannerAd và hiển thị phiên bản đó trong phiên bản chế độ xem FBNativeBannerAdView như sau:

Trong file tiêu đề Trình kiểm soát chế độ xem (hoặc file Swift nếu bạn là người dùng Swift), hãy nhập FBAudienceNetwork, tuyên bố tuân thủ giao thức FBNativeBannerAdDelegate và thêm biến phiên bản cho đơn vị quảng cáo

import UIKit
import FBAudienceNetwork

class ViewController: UIViewController, FBNativeBannerAdDelegate {
  private var nativeBannerAd: FBNativeBannerAd?
}
#import <UIKit/UIKit.h>
@import FBAudienceNetwork;

@interface ViewController : UIViewController <FBNativeBannerAdDelegate>

@property (nonatomic, strong) FBNativeBannerAd *nativeBannerAd;

@end

Sau đó, hãy thêm một phương thức vào file triển khai của Trình kiểm soát chế độ xem để khởi tạo FBNativeBannerAd và yêu cầu tải quảng cáo:

override func viewDidLoad() {
  super.viewDidLoad()
  
  // Instantiate a native banner ad object.
  // NOTE: the placement ID will eventually identify this as your app. You can ignore it while you are testing
  // and replace it later when you have signed up.
  // While you are using this temporary code you will only get test ads and if you release
  // your code like this to the App Store your users will not receive ads (you will get a ‘No Fill’ error).
  let nativeBannerAd = FBNativeBannerAd(placementID: "YOUR_PLACEMENT_ID")

  // Set a delegate to get notified when the ad was loaded.
  nativeBannerAd.delegate = self

  // Initiate a request to load an ad.
  nativeBannerAd.loadAd()  
}
- (void)viewDidLoad 
{
  [super viewDidLoad];

  // Instantiate a native banner ad object.
  // NOTE: the placement ID will eventually identify this as your app. You can ignore it while you are testing
  // and replace it later when you have signed up.
  // While you are using this temporary code you will only get test ads and if you release
  // your code like this to the App Store your users will not receive ads (you will get a ‘No Fill’ error).
  // your code like this to the App Store your users will not receive ads (you will get a ‘No Fill’ error).
  FBNativeBannerAd *nativeBannerAd = [[FBNativeBannerAd alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID"];

  // Set a delegate to get notified when the ad was loaded.
  nativeBannerAd.delegate = self;

  // Initiate a request to load an ad.
  [nativeBannerAd 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

Lúc này, bạn đã thêm mã để tải quảng cáo. Hãy thêm các hàm sau đây để tạo quảng cáo sau khi quá trình tải quảng cáo hoàn tất:

func nativeBannerAdDidLoad(_ nativeBannerAd: FBNativeBannerAd) {
  
  // 1. If there is an existing valid ad, unregister the view
  if let previousAd = self.nativeBannerAd, previousAd.isAdValid {
    previousAd.unregisterView()
  }
  
  // 2. Retain a reference to the ad object
  self.nativeBannerAd = nativeBannerAd
  
  // 3. Instantiate the ad view
  let adView = FBNativeBannerAdView(nativeBannerAd: nativeBannerAd, with: .genericHeight100)
  view.addSubview(adView)

  // 4. Set the frame of the ad view (either manually or using constraints)
  let size = view.bounds.size
  let xOffset: CGFloat = size.width / 2 - 160
  let yOffset: CGFloat = (size.height > size.width) ? 100 : 20
  adView.frame = CGRect(x: xOffset, y: yOffset, width: 320, height: 300)
}
- (void)nativeBannerAdDidLoad:(FBNativeBannerAd *)nativeBannerAd
{
  if (self.nativeBannerAd && self.nativeBannerAd.isAdValid) {
    [self.nativeBannerAd unregisterView];
  }
  
  self.nativeBannerAd = nativeBannerAd;
  
  FBNativeBannerAdView *adView = [FBNativeBannerAdView nativeBannerAdViewWithNativeBannerAd:self.nativeBannerAd
                                                                                   withType:FBNativeBannerAdViewTypeGenericHeight100];
  
  [self.view addSubview:adView];
  
  CGSize size = self.view.bounds.size;
  CGFloat xOffset = size.width / 2 - 160;
  CGFloat yOffset = (size.height > size.width) ? 100 : 20;
  adView.frame = CGRectMake(xOffset, yOffset, 320, 100);
}

Định dạng quảng cáo tùy chỉnh có 2 mẫu:

Loại chế độ xem mẫu Chiều cao Chiều rộng Có thuộc tính

FBNativeBannerAdView TypeGenericHeight100

100dp

Chiều rộng linh hoạt

Biểu tượng, tiêu đề, ngữ cảnh và nút kêu gọi hành động

FBNativeBannerAdView TypeGenericHeight120

120dp

Chiều rộng linh hoạt

Biểu tượng, tiêu đề, ngữ cảnh, mô tả và nút kêu gọi hành động

Bước 2: Tùy chỉnh thêm

Với mẫu tùy chỉnh tự nhiên, bạn có thể tùy chỉnh các thành phần sau:

  • Chiều cao
  • Chiều rộng
  • Màu nền
  • Màu tiêu đề
  • Phông chữ tiêu đề
  • Màu nội dung mô tả
  • Phông chữ của nội dung mô tả
  • Màu nút
  • Màu tên nút
  • Phông chữ của tên nút
  • Màu viền nút

Nếu muốn tùy chỉnh một số thành phần cụ thể, bạn nên sử dụng thiết kế phù hợp với bố cục và chủ đề của ứng dụng.

Bạn sẽ cần tạo đối tượng FBNativeAdViewAttributes và cung cấp quảng cáo tự nhiên đã tải để hiển thị các thành phần sau đây:

• Ví dụ về quảng cáo tự nhiên

func nativeAdDidLoad(_ nativeAd: FBNativeAd) {
  
  // Instantiate the attributes to customize the view
  let attributes = FBNativeAdViewAttributes()
  attributes.backgroundColor = UIColor(white: 0.9, alpha: 1)
  attributes.buttonColor = UIColor(red: 66 / 255.0, green: 108 / 255.0, blue: 173 / 255.0, alpha: 1)
  attributes.buttonTitleColor = .white

  // Feed the attributes to the view
  let adView = FBNativeAdView(nativeAd: nativeAd, with: .genericHeight300, with: attributes)
  
  ... Rest of implementation ...
}
- (void)nativeAdDidLoad:(FBNativeAd *)nativeAd 
{
  // Instantiate the attributes to customize the view
  FBNativeAdViewAttributes *attributes = [[FBNativeAdViewAttributes alloc] init];

  attributes.backgroundColor = [UIColor colorWithRed:0.9 green:0.9 blue:0.9 alpha:1];
  attributes.buttonColor = [UIColor colorWithRed:66/255.0 green:108/255.0 blue:173/255.0 alpha:1];
  attributes.buttonTitleColor = [UIColor whiteColor];

  // Feed the attributes to the view
  FBNativeAdView *adView = [FBNativeAdView nativeAdViewWithNativeAd:nativeAd 
      withType:FBNativeAdViewTypeGenericHeight300 withAttributes:attributes];

  ... Rest of implementation ...
}

Mã ở trên sẽ hiển thị quảng cáo như sau:

• Ví dụ về quảng cáo biểu ngữ tự nhiên

func nativeBannerAdDidLoad(_ nativeBannerAd: FBNativeBannerAd) {
  
  // Instantiate the attributes to customize the view
  let attributes = FBNativeAdViewAttributes()
  attributes.backgroundColor = UIColor(white: 0.9, alpha: 1)
  attributes.buttonColor = UIColor(red: 66 / 255.0, green: 108 / 255.0, blue: 173 / 255.0, alpha: 1)
  attributes.buttonTitleColor = .white

  // Instantiate the view and feed the attributes to the initializer
  let adView = FBNativeBannerAdView(nativeBannerAd: nativeBannerAd, with: .genericHeight100, with: attributes)
  
  ... Rest of implementation ...
}
- (void)nativeBannerAdDidLoad:(FBNativeBannerAd *)nativeAd 
{
  // Instantiate the attributes to customize the view
  FBNativeAdViewAttributes *attributes = [[FBNativeAdViewAttributes alloc] init];
  attributes.backgroundColor = [UIColor colorWithRed:0.9 green:0.9 blue:0.9 alpha:1];
  attributes.buttonColor = [UIColor colorWithRed:66/255.0 green:108/255.0 blue:173/255.0 alpha:1];
  attributes.buttonTitleColor = [UIColor whiteColor];

  // Instantiate the view and feed the attributes to the initializer
  FBNativeBannerAdView *adView = [FBNativeBannerAdView nativeBannerAdViewWithNativeBannerAd :nativeAd 
      withType:FBNativeBannerAdViewTypeGenericHeight100 withAttributes:attributes];

  ... Rest of implementation ...
}

Các bước tiếp theo

  • Khám phá các mẫu mã của chúng tôi minh họa cách sử dụng quảng cáo tự nhiên. NativeAdSample khả dụng như một phần của SDK và có thể tìm được trong thư mục FBAudienceNetwork/samples. Mở dự án có Xcode và chạy trên thiết bị hoặc trình mô phỏng.