使用 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];
}

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

選擇裝置為建置目標，並執行以上程式碼，您應該會看見類似以下的畫面：

自訂廣告格式有兩種範本：

範本檢視類型	高度	寬度	內含屬性
`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];
}

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

自訂廣告格式有兩種範本：

範本檢視類型	高度	寬度	內含屬性
`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 ...
}

後續步驟

若要在您的應用程式中整合不同的廣告格式，請依照指南操作：

探索程式碼範例，瞭解如何使用原生廣告。SDK 在 FBAudienceNetwork/samples 資料夾中提供了 NativeAdSample。使用 Xcode 開啟該專案，然後在裝置或模擬器上執行。

使用 iOS 的原生廣告範本

步驟 1：範本實作

步驟 2：進一步自訂

步驟 1：範本實作

• 原生廣告實作

原生橫幅廣告實作

步驟 2：進一步自訂

原生廣告範例

原生橫幅廣告範例

後續步驟