ใช้เทมเพลตโฆษณาแบบเนทีฟใน iOS

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

อย่าลืมดูคู่มือเริ่มต้นใช้งาน Audience Network และเริ่มต้นใช้งาน iOS ก่อนดำเนินการต่อ

หากต้องการใช้คู่มือนี้อย่างมีประสิทธิภาพ คุณควรทำความคุ้นเคยกับการใช้งานโฆษณาแบบเนทีฟ

ขั้นตอนที่ 1: การนำเทมเพลตไปใช้งาน

ขั้นตอนที่ 2: การปรับแต่งเพิ่มเติม

ขั้นตอนที่ 1: การนำเทมเพลตไปใช้งาน

• การนำไปใช้งานกับโฆษณาแบบเนทีฟ

เมื่อถึงขั้นนี้ ในไฟล์ส่วนหัวของตัวควบคุมการรับชมของคุณ (หรือไฟล์ Swift ในกรณีที่คุณเป็นผู้ใช้ Swift) ให้นำเข้า FBAudienceNetwork, ระบุความสอดคล้องกับโปรโตคอล FBNativeAdDelegate และเพิ่มตัวแปรอินสแตนซ์สำหรับหน่วยโฆษณา

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

จากนั้นจึงเพิ่มวิธีการในไฟล์การใช้งานตัวควบคุมการรับชมที่เริ่มต้นการทำงานของ 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()
}
- (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 ที่แสดงที่ 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)
}
- (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);
}

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



รูปแบบโฆษณาที่กำหนดเองมี 2 เทมเพลต ได้แก่

ประเภทมุมมองเทมเพลต ความสูง ความกว้าง แอตทริบิวต์ที่มี

FBNativeAdView TypeGenericHeight300

300dp

ความกว้างแบบยืดหยุ่น

รูปภาพ, ไอคอน, ชื่อ, บริบท, คำอธิบาย และปุ่ม CTA

FBNativeAdView TypeGenericHeight400

400dp

ความกว้างแบบยืดหยุ่น

รูปภาพ, ไอคอน, ชื่อ, ชื่อรอง, บริบท, คำอธิบาย และปุ่ม CTA

• การนำไปใช้งานกับโฆษณาแบบแบนเนอร์แบบเนทีฟ

หากต้องการแสดงโฆษณาแบบแบนเนอร์แบบเนทีฟโดยใช้เทมเพลตที่มีความสูง 100 และ 120 คุณต้องสร้างอินสแตนซ์ FBNativeBannerAd และแสดงในอินสแตนซ์มุมมอง FBNativeBannerAdView ในรูปแบบต่อไปนี้

ในไฟล์ส่วนหัวของตัวควบคุมการรับชมของคุณ (หรือไฟล์ Swift ในกรณีที่คุณเป็นผู้ใช้ Swift) ให้นำเข้า FBAudienceNetwork, ระบุความสอดคล้องกับโปรโตคอล FBNativeBannerAdDelegate และเพิ่มตัวแปรอินสแตนซ์สำหรับหน่วยโฆษณา

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

จากนั้นจึงเพิ่มวิธีการในไฟล์การใช้งานตัวควบคุมการรับชมที่เริ่มต้นการทำงานของ 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()  
}
- (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 ที่แสดงที่ 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)
}
- (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);
}

รูปแบบโฆษณาที่กำหนดเองมี 2 เทมเพลต ได้แก่

ประเภทมุมมองเทมเพลต ความสูง ความกว้าง แอตทริบิวต์ที่มี

FBNativeBannerAdView TypeGenericHeight100

100dp

ความกว้างแบบยืดหยุ่น

ไอคอน, ชื่อ, บริบท และปุ่ม CTA

FBNativeBannerAdView TypeGenericHeight120

120dp

ความกว้างแบบยืดหยุ่น

ไอคอน, ชื่อ, บริบท, คำอธิบาย และปุ่ม CTA

ขั้นตอนที่ 2: การปรับแต่งเพิ่มเติม

เมื่อใช้เทมเพลตแบบเนทีฟที่กำหนดเอง คุณสามารถปรับแต่งองค์ประกอบต่อไปนี้ได้

  • ความสูง
  • ความกว้าง
  • สีพื้นหลัง
  • สีของชื่อ
  • แบบอักษรของชื่อ
  • สีของคำอธิบาย
  • แบบอักษรของคำอธิบาย
  • สีของปุ่ม
  • สีของชื่อปุ่ม
  • แบบอักษรของชื่อปุ่ม
  • สีของขอบปุ่ม

หากคุณต้องการปรับแต่งองค์ประกอบ ขอแนะนำให้ใช้รูปแบบที่เหมาะสมกับเลย์เอาท์และธีมของแอพคุณ

คุณจะต้องสร้างอ็อบเจ็กต์ 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 ...
}
- (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 ...
}

โค้ดข้างต้นจะแสดงโฆษณาที่มีลักษณะดังนี้

• ตัวอย่างสำหรับโฆษณาแบบแบนเนอร์แบบเนทีฟ

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 ...
}

ขั้นตอนถัดไป

  • ลองดูตัวอย่างโค้ดของเราซึ่งสาธิตวิธีการใช้โฆษณาเนทีฟ และ NativeAdSample สามารถใช้งานได้โดยเป็นส่วนหนึ่งใน SDK และอยู่ในโฟลเดอร์ FBAudienceNetwork/samples เปิดโปรเจ็กต์ด้วย Xcode และใช้งานบนอุปกรณ์หรือโปรแกรมจำลอง