การเพิ่มโฆษณาแบบเนทีฟลงในแอพบน iOS ของคุณ

API โฆษณาแบบเนทีฟทำให้คุณสามารถสร้างประสบการณ์แบบกำหนดเองสำหรับโฆษณาที่คุณแสดงในแอพของคุณได้ เมื่อใช้งาน API โฆษณาแบบเนทีฟ คุณจะไม่ได้รับโฆษณาสำเร็จรูปที่พร้อมให้แสดงในแอพได้เลย แต่จะได้รับกลุ่มคุณสมบัติของโฆษณา เช่น หัวข้อ รูปภาพ การกระตุ้นให้ดำเนินการ และคุณจะต้องใช้คุณสมบัติเหล่านี้เพื่อสร้าง UIView แบบกำหนดเองในพื้นที่ที่แสดงโฆษณา

เราจะนำตำแหน่งการจัดวางโฆษณาแบบเนทีฟต่อไปนี้ไปใช้ คุณจะต้องสร้างมุมมองต่อไปนี้กับโฆษณาแบบเนทีฟของเรา

ขั้นตอนที่ 1: สร้างมุมมองโฆษณาแบบเนทีฟในสตอรี่บอร์ด

ขั้นตอนที่ 2:โหลดและแสดงโฆษณาแบบเนทีฟ

ขั้นตอนที่ 3: วิธีดึงข้อมูลอัตราส่วนกว้างยาวของเนื้อหาและวิธีนำความกว้างและความสูงแบบธรรมชาติไปใช้

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

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

ขั้นตอนที่ 6: โหลดโฆษณาโดยไม่ใช้แคชแบบอัตโนมัติ

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

ดูปัญหาที่ทราบแล้วในบันทึกการเปลี่ยนแปลง

ขั้นตอนที่ 1: สร้างมุมมองโฆษณาแบบเนทีฟในสตอรี่บอร์ด

1. หลังจากสร้างโปรเจ็กต์ใหม่จากคู่มือเริ่มต้นใช้งาน iOS แล้ว ให้เปิด Main.storyboard เพิ่มองค์ประกอบ UIView ไปยังองค์ประกอบมุมมองหลัก แล้วตั้งชื่อว่า adUIView
   
   
   
2. นอกจากนี้ ให้เพิ่ม adIconImageView (FBMediaView), adTitleLabel (UILabel), adCoverMediaView (FBMediaView), adSocialContext (UILabel), adCallToActionButton (UIButton), adOptionsView (FBAdOptionsView), adBodyLabel (UILabel), sponsoredLabel (UILabel) ใต้ adUIView ตามที่แสดงในรูปด้านล่าง
   
   
   
3. คุณอาจสังเกตเห็นว่ามีลูกศรสีแดงใกล้กับฉากของตัวควบคุมมุมมอง โดยปกติแล้ว สัญลักษณ์เช่นนี้จะหมายความว่ามีข้อจำกัดในเลย์เอาท์ของคุณที่หายไป
   
   
   คุณจะต้องเลือกอ็อบเจ็กต์มุมมองทั้งหมดในฉากแล้วคลิกไอคอน "แก้ไขปัญหาเลย์เอาท์" เพื่อเพิ่มข้อจำกัดที่หายไป
   
   
   
4. เมื่อคุณสร้างองค์ประกอบ UI ทั้งหมดที่จะแสดงโฆษณาแบบเนทีฟแล้ว คุณจะต้องอ้างอิงองค์ประกอบ UI เหล่านี้ในอินเทอร์เฟซ ViewController อันดับแรก ให้เปิด ViewController.m (หากคุณใช้ Swift ให้เปิด ViewController.swift) จากนั้นลาก adUIView มาในอ็อบเจ็กต์ ViewController คุณอาจตั้งชื่อว่า adUIView หลังจากนั้นคุณจะต้องทำแบบเดียวกันกับ adIconImageView , adTitleLabel, adCoverMediaView, adSocialContext, adCallToActionButton, adOptionsView, adBodyLabel, sponsoredLabel
   
   
   
5. สร้างและเรียกใช้โปรเจ็กต์ คุณควรจะเห็นเนื้อหาที่ว่างเปล่าจากอุปกรณ์หรือโปรแกรมจำลองดังนี้
   

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

ขั้นตอนที่ 2:โหลดและแสดงโฆษณาแบบเนทีฟ

1. ในไฟล์แหล่งที่มา "ตัวควบคุมมุมมอง" ให้นำเข้า SDK แล้วระบุว่า ViewController สอดคล้องกับโปรโตคอล FBNativeAdDelegate และเพิ่มตัวแปรอินสแตนซ์ 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. ในเมธอด viewDidLoad ให้เพิ่มบรรทัดโค้ดต่อไปนี้เพื่อโหลดเนื้อหาโฆษณาแบบเนทีฟ
   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 ที่แสดงที่ YOUR_PLACEMENT_ID เป็น ID ชั่วคราวเพื่อการทดสอบเท่านั้น

   หากคุณใช้ ID ชั่วคราวนี้ในโค้ดที่ใช้งานจริง ผู้ใช้ของคุณจะไม่ได้รับโฆษณา (ผู้ใช้เหล่านี้จะได้รับข้อผิดพลาด No Fill (ไม่มีข้อมูล)) คุณต้องกลับมาที่นี่หลังจากการทดสอบ และแทนที่ ID ชั่วคราวนี้ด้วย ID ตำแหน่งการจัดวางที่ใช้งานจริง

   หากต้องการรู้วิธีสร้าง ID ตำแหน่งการจัดวางที่ใช้งานจริง ให้ดูที่การตั้งค่า Audience Network

3. ขั้นตอนต่อไปคือการแสดงโฆษณาเมื่อเนื้อหาพร้อมแล้ว คุณจะต้องใช้ ViewController เพื่อนำเมธอดตัวแทน 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; 
   }

การควบคุมพื้นที่ที่สามารถคลิกได้

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




4. เลือกเป้าหมายการสร้างเป็นอุปกรณ์ และเรียกใช้โค้ดข้างต้น คุณควรจะเห็นสิ่งต่อไปนี้:
   
   
   
   

ขั้นตอนที่ 3: วิธีดึงข้อมูลอัตราส่วนกว้างยาวของเนื้อหาและนำความกว้างและความสูงแบบธรรมชาติมาใช้

ในตัวอย่างข้างต้น เนื้อหาสื่อของโฆษณาจะแสดงใน adCoverMediaView และประเภทอ็อบเจ็กต์คือ FBMediaView จากขั้นตอนก่อนหน้านี้ เราได้แสดงวิธีใช้ FBMediaView เพื่อโหลดเนื้อหาสื่อจากอ็อบเจ็กต์ FBNativeAd ที่ได้รับ มุมมองนี้เกิดขึ้นจากการโหลดรูปภาพหน้าปกเอง เมื่อสร้าง FBMediaView จะสามารถกำหนดความกว้างและความสูงได้ด้วยข้อจำกัดของเลย์เอาท์อัตโนมัติที่ตั้งค่าไว้ในสตอรี่บอร์ด หรือสามารถกำหนดค่าตายตัวได้ อย่างไรก็ตาม ความกว้างและความสูงของมุมมองอาจไม่พอดีกับรูปภาพหน้าปกจริงของโฆษณาที่ดาวน์โหลดภายหลัง หากต้องการแก้ไขปัญหานี้ ตัวอย่างต่อไปนี้จะแสดงวิธีรับอัตราส่วนกว้างยาวของเนื้อหาและนำความกว้างและความสูงแบบธรรมชาติมาใช้

1. ให้ระบุว่าตัวควบคุมมุมมองนำโปรโตคอล FBMediaViewDelegate ไปใช้
   SwiftObjective-C

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

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



2. เมื่อโหลดโฆษณาแบบเนทีฟแล้ว ให้ตั้งค่าการมอบหมายของอ็อบเจ็กต์ FBMediaView เป็นตัวควบคุมมุมมองของคุณ
   SwiftObjective-C

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

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



3. นำเมธอด mediaViewDidLoad ไปใช้ในตัวควบคุมมุมมองของคุณ
   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 จะส่งคืน CGFloat แบบบวก หรือส่งคืน 0.0 หากไม่มีโฆษณาที่กำลังโหลดอยู่ ค่าจะใช้ได้หลังจากโหลดมุมมองสื่อแล้ว ทั้งนี้ก็มีวิธีการที่สะดวกในการตั้งค่าความกว้างและความสูงของอ็อบเจ็กต์ FBMediaView ตามอัตราส่วนกว้างยาวของเนื้อหาสื่อที่โหลด คุณสามารถเรียกใช้ applyNaturalWidth หรือ applyNaturalHeight เพื่ออัพเดตความกว้างหรือความสูงของอ็อบเจ็กต์ FBMediaView ตามอัตราส่วนกว้างยาวของเนื้อหาสื่อ

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

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

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.");
}

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

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

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);
}

ขั้นตอนที่ 6: โหลดโฆษณาโดยไม่ใช้แคชแบบอัตโนมัติ

1. เราขอแนะนำเป็นอย่างยิ่งว่าให้ปล่อยการแคชสื่อตามค่าเริ่มต้นในทุกกรณี อย่างไรก็ตาม เราอนุญาตให้คุณแก้ไขค่าเริ่มต้นนั้นได้ โปรดดำเนินการด้วยความระมัดระวัง หากคุณตัดสินใจที่จะแก้ไขค่าเริ่มต้นการแคชสื่อของเรา
   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. อันดับแรก คุณจะต้องดาวน์โหลดสื่อสำหรับโฆษณาแบบเนทีฟทั้งหมดด้วยตนเอง
   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. จากนั้นคุณควรเรียกใช้ registerViewForInteraction และแสดงโฆษณาหลังจากเรียก mediaViewDidLoad กลับแล้วเท่านั้น โดยต้องโหลดและแสดงสื่อทั้งหมดสำหรับอิมเพรสชั่นที่เข้าเกณฑ์
   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; 
   }