在 iOS 使用原生廣告範本

想輕鬆整合原生廣告的發佈商，可以善用自訂 Audience Network 原生廣告範本。自訂原生廣告的大小、顏色及字體，以符合您應用程式的外觀與風格。

確保您在開始操作前，已經先行參閱 Audience Network 新手指南及 iOS 新手指南。

若要善用本指南，請先了解如何建置原生廣告。

第 1 步：建置範本

第 2 步：進階自訂

第 1 步：建置範本

• 建置原生廣告

現在前往您的檢視控制器標題檔案（若您使用 Swift，則在 Swift 檔案中），匯入 FBAudienceNetwork 並宣告您會遵循 FBAdViewDelegate 通訊協定，然後加入廣告單位的實例變數：

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	彈性闊度	圖像、圖示、標題、背景資料、說明及呼籲字句按鈕
`FBNativeAdView TypeGenericHeight400`	400dp	彈性闊度	圖像、圖示、標題、副標題、背景資料、說明及呼籲字句按鈕

若要使用附設高度 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	彈性闊度	圖示、標題、背景資料及呼籲字句按鈕
`FBNativeBannerAdView TypeGenericHeight120`	120dp	彈性闊度	圖示、標題、背景資料、說明及呼籲字句按鈕

第 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 在 NativeAdSample 資料夾中提供了 FBAudienceNetwork/samples。以 Xcode 開啟專案，然後在裝置或模擬器上執行該專案。

在 iOS 使用原生廣告範本

第 1 步：建置範本

第 2 步：進階自訂

第 1 步：建置範本

• 建置原生廣告

• 建置原生橫額廣告

第 2 步：進階自訂

• 原生廣告範例

• 原生橫額廣告範例

後續步驟