Đảm bảo bạn đã hoàn tất hướng dẫn Bắt đầu và Bắ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.
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?
}
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()
}
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)
}
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 |
---|---|---|---|
| 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 |
| 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 |
Để 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?
}
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()
}
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)
}
Đị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 |
---|---|---|---|
| 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 |
| 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 |
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:
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:
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 ...
}
Mã ở trên sẽ hiển thị quảng cáo như sau:
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 ...
}
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.