เพิ่มโฆษณาแบบแบนเนอร์และโฆษณาแบบสี่เหลี่ยมผืนผ้าขนาดกลางให้กับแอพ iOS

Audience Network ช่วยให้คุณสร้างรายได้จากแอพ iOS ของคุณด้วยโฆษณาบน Facebook ได้ คู่มือนี้จะอธิบายวิธีสร้างแอพ iOS ที่แสดงโฆษณาแบบแบนเนอร์และโฆษณาแบบสี่เหลี่ยมผืนผ้าขนาดกลาง

หากคุณสนใจหน่วยโฆษณาประเภทอื่นๆ โปรดดูรายการประเภทที่ใช้ได้

ขั้นตอนสำหรับโฆษณาแบบแบนเนอร์และโฆษณาแบบสี่เหลี่ยมผืนผ้าขนาดกลาง

เราจะนำตำแหน่งการจัดวางโฆษณาแบบแบนเนอร์ต่อไปนี้ไปใช้

ขั้นตอนที่ 1: โหลดและแสดงมุมมองโฆษณา

ขั้นตอนที่ 2: ตรวจสอบยืนยันอิมเพรสชั่นและการบันทึกจำนวนการคลิก

ขั้นตอนที่ 3: วิธีแก้ไขจุดบกพร่องเมื่อโฆษณาไม่แสดง

ขั้นตอนที่ 4: ทดสอบการผสานการทำงานของโฆษณา

ขั้นตอนที่ 1: โหลดและแสดงมุมมองโฆษณา

1. หลังจากสร้างโปรเจ็กต์ใหม่จากคู่มือเริ่มต้นใช้งาน iOS แล้ว ให้เปิด Main.storyboard เพิ่มองค์ประกอบ UIView ไปยังองค์ประกอบมุมมองหลัก แล้วตั้งชื่อว่า adContainer
   
2. เมื่อถึงขั้นตอนนี้ ในไฟล์ส่วนหัวของตัวควบคุมมุมมองของคุณ (หรือไฟล์ Swift ในกรณีที่คุณเป็นผู้ใช้ Swift) ให้นำเข้า FBAudienceNetwork, ระบุความสอดคล้องกับโปรโตคอล FBAdViewDelegate และเพิ่มตัวแปรอินสแตนซ์สำหรับหน่วยโฆษณา
   SwiftObjective-C

   import UIKit
   import FBAudienceNetwork
   
   class ViewController: UIViewController, FBAdViewDelegate {
   
     @IBOutlet private var adContainer: UIView!
   
     private var adView: FBAdView?
   }

   #import <UIKit/UIKit.h>
   @import FBAudienceNetwork;
   
   @interface ViewController : UIViewController <FBAdViewDelegate>
   
   @property (nonatomic, weak) IBOutlet UIView *adContainer;
   @property (nonatomic, strong) FBAdView *adView;
   
   @end


3. เพิ่มโค้ดด้านล่างนี้ลงใน viewDidLoad สร้างอินสแตนซ์ FBAdView ใหม่แล้วเพิ่มลงในมุมมอง โดย FBAdView คือคลาสย่อยของ UIView คุณสามารถเพิ่มอินสแตนซ์ลงในลำดับมุมมองของคุณได้เช่นเดียวกับมุมมองอื่นๆ
   SwiftObjective-C

   override func viewDidLoad() {
     super.viewDidLoad()
   
     // Instantiate an AdView object.
     // NOTE: the placement ID will eventually identify this as your app, you can ignore 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 adView = FBAdView(placementID: "YOUR_PLACEMENT_ID", adSize: kFBAdSizeHeight50Banner, rootViewController: self)
     adView.frame = CGRect(x: 0, y: 0, width: 320, height: 250)
     adView.delegate = self
     adView.loadAd()
     self.adView = adView
   }

   - (void)viewDidLoad
   {
     [super viewDidLoad];
     // Instantiate an AdView 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).
     self.adView = [[FBAdView alloc] initWithPlacementID:@"YOUR_PLACEMENT_ID" adSize:kFBAdSizeHeight50Banner rootViewController:self];
     self.adView.frame = CGRectMake(0, 0, 320, 250);
     self.adView.delegate = self;
     [self.adView loadAd];
   }
   หากต้องการเพิ่มโฆษณาแบบสี่เหลี่ยมผืนผ้าขนาดกลางแทน คุณเพียงแค่ระบุ kFBAdSizeHeight250Rectangle ในพารามิเตอร์ adSize ให้กับ FBAdView
   
   Audience Network รองรับโฆษณาที่จะใช้ใน FBAdView ของคุณได้ 3 ขนาด ความกว้างของหน่วยโฆษณามีความยืดหยุ่น โดยกำหนดความกว้างขั้นต่ำไว้ที่ 320 พิกเซล มีเพียงความสูงเท่านั้นที่กำหนดไว้คงที่แล้ว
   
   

   รูปแบบโฆษณา	ข้อมูลอ้างอิงสำหรับ AdSize	ขนาด	คำแนะนำ
   สี่เหลี่ยมผืนผ้าขนาดกลาง	kFBAdSizeHeight 250Rectangle	300x250	ขอแนะนำอย่างยิ่งให้ใช้รูปแบบนี้ เนื่องจากให้ประสิทธิภาพที่สูงกว่า มีคุณภาพดีกว่า และใช้ CPU ประมวลผลน้อยกว่า
   แบนเนอร์มาตรฐาน	kFBAdSizeHeight 50Banner	320x50	รูปแบบนี้เหมาะกับโทรศัพท์ แต่ไม่แนะนำให้ใช้ เนื่องจากมีประสิทธิภาพและคุณภาพต่ำ
   แบนเนอร์ขนาดใหญ่	kFBAdSizeHeight 90Banner	320x90	รูปแบบนี้เหมาะกับแท็บเล็ตและอุปกรณ์ที่มีขนาดใหญ่กว่า แต่ไม่แนะนำให้ใช้ เนื่องจากมีประสิทธิภาพและคุณภาพต่ำ

4. แทนที่ YOUR_PLACEMENT_ID ด้วยสตริง ID ตำแหน่งการจัดวางของคุณเอง หากคุณไม่มี ID ตำแหน่งการจัดวางหรือไม่ทราบวิธีรับ ID ดังกล่าว โปรดดูคู่มือการเริ่มต้นใช้งาน เลือกเป้าหมายการสร้างเป็นอุปกรณ์ และเรียกใช้โค้ดข้างต้น โดยการแสดงผลจะมีลักษณะดังนี้
   
   
   
   

ขั้นตอนที่ 2: ตรวจสอบยืนยันอิมเพรสชั่นและการบันทึกจำนวนการคลิก

นอกจากนี้ คุณยังสามารถเพิ่มฟังก์ชั่นต่อไปนี้เพื่อจัดการกับกรณีที่โฆษณาปิดอยู่หรือเมื่อผู้ใช้คลิกที่โฆษณานั้นๆ ได้ด้วย

func adViewDidClick(_ adView: FBAdView) {
  print("Ad was clicked.")
}

func adViewDidFinishHandlingClick(_ adView: FBAdView) {
  print("Ad did finish click handling.")
}

func adViewWillLogImpression(_ adView: FBAdView) {
  print("Ad impression is being captured.")
}

- (void)adViewDidClick:(FBAdView *)adView
{
  NSLog(@"Ad was clicked.");
}

- (void)adViewDidFinishHandlingClick:(FBAdView *)adView
{
  NSLog(@"Ad did finish click handling.");
}

- (void)adViewWillLogImpression:(FBAdView *)adView
{
  NSLog(@"Ad impression is being captured.");
}

ขั้นตอนที่ 3: วิธีแก้ไขจุดบกพร่องเมื่อโฆษณาไม่แสดง

เพิ่มและใช้ฟังก์ชั่นการมอบหมาย 2 ฟังก์ชั่นต่อไปนี้ในตัวควบคุมมุมมองเพื่อจัดการกับข้อผิดพลาดในการโหลดโฆษณา

func adView(_ adView: FBAdView, didFailWithError error: Error) {
  print("Ad failed to load with error: \(error.localizedDescription)")
}

func adViewDidLoad(_ adView: FBAdView) {
  print("Ad was loaded and ready to be displayed")
  showAd()
}

private func showAd() {
  guard let adView = adView, adView.isAdValid else {
    return
  }
  adContainer.addSubview(adView)
}

- (void)adView:(FBAdView *)adView didFailWithError:(NSError *)error
{
  NSLog(@"Ad failed to load with error: %@", error);
}

- (void)adViewDidLoad:(FBAdView *)adView
{
  NSLog(@"Ad was loaded and ready to be displayed");
  [self showAd];
}

- (void)showAd
{
  if (self.adView && self.adView.isAdValid) {
    [self.adContainer addSubview:self.adView];
  }
}