อย่าลืมดูคู่มือเริ่มต้นใช้งาน Audience Network และเริ่มต้นใช้งาน iOS ก่อนดำเนินการต่อ
หากต้องการใช้คู่มือนี้อย่างมีประสิทธิภาพ คุณควรทำความคุ้นเคยกับการใช้งานโฆษณาแบบเนทีฟ
เมื่อถึงขั้นนี้ ในไฟล์ส่วนหัวของตัวควบคุมการรับชมของคุณ (หรือไฟล์ Swift ในกรณีที่คุณเป็นผู้ใช้ Swift) ให้นำเข้า FBAudienceNetwork
, ระบุความสอดคล้องกับโปรโตคอล FBNativeAdDelegate
และเพิ่มตัวแปรอินสแตนซ์สำหรับหน่วยโฆษณา
import UIKit
import FBAudienceNetwork
class ViewController: UIViewController, FBNativeAdDelegate {
private var nativeAd: FBNativeAd?
}
จากนั้นจึงเพิ่มวิธีการในไฟล์การใช้งานตัวควบคุมการรับชมที่เริ่มต้นการทำงานของ FBNativeAd
และส่งคำขอโหลดโฆษณา
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 ที่แสดงที่ YOUR_PLACEMENT_ID
เป็น ID ชั่วคราวเพื่อการทดสอบเท่านั้น
หากคุณใช้ ID ชั่วคราวนี้ในโค้ดที่ใช้งานจริง ผู้ใช้ของคุณจะไม่ได้รับโฆษณา (ผู้ใช้เหล่านี้จะได้รับข้อผิดพลาด No Fill (ไม่มีข้อมูล)) คุณต้องกลับมาที่นี่หลังจากการทดสอบ และแทนที่ ID ชั่วคราวนี้ด้วย ID ตำแหน่งการจัดวางที่ใช้งานจริง
หากต้องการรู้วิธีสร้าง ID ตำแหน่งการจัดวางที่ใช้งานจริง ให้ดูที่การตั้งค่า Audience Network
เมื่อเพิ่มโค้ดสำหรับโหลดโฆษณาแล้ว ให้เพิ่มฟังก์ชั่นต่อไปนี้เพื่อสร้างโฆษณาเมื่อโหลดเสร็จ
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)
}
เลือกเป้าหมายการสร้างเป็นอุปกรณ์แล้วเรียกใช้โค้ดข้างต้น คุณจะเห็นโฆษณาที่คล้ายคลึงกับตัวอย่างนี้
รูปแบบโฆษณาที่กำหนดเองมี 2 เทมเพลต ได้แก่
ประเภทมุมมองเทมเพลต | ความสูง | ความกว้าง | แอตทริบิวต์ที่มี |
---|---|---|---|
| 300dp | ความกว้างแบบยืดหยุ่น | รูปภาพ, ไอคอน, ชื่อ, บริบท, คำอธิบาย และปุ่ม CTA |
| 400dp | ความกว้างแบบยืดหยุ่น | รูปภาพ, ไอคอน, ชื่อ, ชื่อรอง, บริบท, คำอธิบาย และปุ่ม CTA |
หากต้องการแสดงโฆษณาแบบแบนเนอร์แบบเนทีฟโดยใช้เทมเพลตที่มีความสูง 100 และ 120 คุณต้องสร้างอินสแตนซ์ FBNativeBannerAd
และแสดงในอินสแตนซ์มุมมอง FBNativeBannerAdView
ในรูปแบบต่อไปนี้
ในไฟล์ส่วนหัวของตัวควบคุมการรับชมของคุณ (หรือไฟล์ Swift ในกรณีที่คุณเป็นผู้ใช้ Swift) ให้นำเข้า FBAudienceNetwork
, ระบุความสอดคล้องกับโปรโตคอล FBNativeBannerAdDelegate
และเพิ่มตัวแปรอินสแตนซ์สำหรับหน่วยโฆษณา
import UIKit
import FBAudienceNetwork
class ViewController: UIViewController, FBNativeBannerAdDelegate {
private var nativeBannerAd: FBNativeBannerAd?
}
จากนั้นจึงเพิ่มวิธีการในไฟล์การใช้งานตัวควบคุมการรับชมที่เริ่มต้นการทำงานของ FBNativeBannerAd
และส่งคำขอโหลดโฆษณา
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 ที่แสดงที่ YOUR_PLACEMENT_ID
เป็น ID ชั่วคราวเพื่อการทดสอบเท่านั้น
หากคุณใช้ ID ชั่วคราวนี้ในโค้ดที่ใช้งานจริง ผู้ใช้ของคุณจะไม่ได้รับโฆษณา (ผู้ใช้เหล่านี้จะได้รับข้อผิดพลาด No Fill (ไม่มีข้อมูล)) คุณต้องกลับมาที่นี่หลังจากการทดสอบ และแทนที่ ID ชั่วคราวนี้ด้วย ID ตำแหน่งการจัดวางที่ใช้งานจริง
หากต้องการรู้วิธีสร้าง ID ตำแหน่งการจัดวางที่ใช้งานจริง ให้ดูที่การตั้งค่า Audience Network
เมื่อเพิ่มโค้ดสำหรับโหลดโฆษณาแล้ว ให้เพิ่มฟังก์ชั่นต่อไปนี้เพื่อสร้างโฆษณาเมื่อโหลดเสร็จ
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)
}
รูปแบบโฆษณาที่กำหนดเองมี 2 เทมเพลต ได้แก่
ประเภทมุมมองเทมเพลต | ความสูง | ความกว้าง | แอตทริบิวต์ที่มี |
---|---|---|---|
| 100dp | ความกว้างแบบยืดหยุ่น | ไอคอน, ชื่อ, บริบท และปุ่ม CTA |
| 120dp | ความกว้างแบบยืดหยุ่น | ไอคอน, ชื่อ, บริบท, คำอธิบาย และปุ่ม CTA |
เมื่อใช้เทมเพลตแบบเนทีฟที่กำหนดเอง คุณสามารถปรับแต่งองค์ประกอบต่อไปนี้ได้
หากคุณต้องการปรับแต่งองค์ประกอบ ขอแนะนำให้ใช้รูปแบบที่เหมาะสมกับเลย์เอาท์และธีมของแอพคุณ
คุณจะต้องสร้างอ็อบเจ็กต์ FBNativeAdViewAttributes
และมีโฆษณาแบบเนทีฟที่โหลดเพื่อแสดงองค์ประกอบเหล่านี้
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 ...
}
โค้ดข้างต้นจะแสดงโฆษณาที่มีลักษณะดังนี้
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
สามารถใช้งานได้โดยเป็นส่วนหนึ่งใน SDK และอยู่ในโฟลเดอร์ FBAudienceNetwork/samples
เปิดโปรเจ็กต์ด้วย Xcode และใช้งานบนอุปกรณ์หรือโปรแกรมจำลอง