概要

原生廣告不同於橫幅廣告、插頁廣告會直接提供可立即呈現的廣告內容，原生廣告 API 提供了標題、圖像等廣告內容的組合，您可以透過這些屬性的編排打造出最理想的原生廣告風格。原生廣告更打破以往對於廣告的刻板印象，以最自然的方式呈現，提供更符合需求的廣告體驗。

完成串接準備

在開始串接廣告之前，請確認您已經將 Vpon SDK 導入您的 Xcode 專案中。若您尚未完成，請先參考串接說明完成相關設定。

開始撰寫 Native Ad

在應用程式中建立原生廣告需要執行以下五個步驟：

Import VpadnSDKAdKit
宣告 VpadnNativeAd 及自定義 UI
初始化 VpadnNativeAd 物件，並指定 License Key
建立 VpadnRequest 物件，並請求廣告
利用回傳的資料建置自訂的原生 UI
實作 Delegate protocol

建議您可以在應用程式的 ViewController 內執行上述步驟。

Import VpadnSDKAdKit 並宣告 VpadnNativeAd

首先匯入 SDK ，宣告實作了 VpadnNativeAdDelegate, VpadnMediaViewDelegate protocol 以接收廣告狀態，同時也宣告了欲在原生廣告中呈現的各種元件。( 原生廣告呈現元件規範請參照Native Ad Spec )

Objective-C

@import VpadnSDKAdKit;
// Import Vpon SDK

@interface ViewController () <VpadnMediaViewDelegate, VpadnNativeAdDelegate>

@property (strong, nonatomic) VpadnNativeAd *nativeAd;

@property (weak, nonatomic) IBOutlet UIView *contentView;

@property (weak, nonatomic) IBOutlet UIImageView *adIcon;
@property (weak, nonatomic) IBOutlet UILabel *adTitle;
@property (weak, nonatomic) IBOutlet UILabel *adBody;
@property (weak, nonatomic) IBOutlet UILabel *adSocialContext;
@property (weak, nonatomic) IBOutlet UIButton *adAction;
@property (weak, nonatomic) IBOutlet VpadnMediaView *adMediaView;

@end

Swift

import VpadnSDKAdKit
// Import Vpon SDK

class VponSdkNativeViewController: UIViewController {
    
    var vpadnNative: VpadnNativeAd!
    @IBOutlet weak var contentView: UIView!
    @IBOutlet weak var adIcon: UIImageView!
    @IBOutlet weak var adTitle: UILabel!
    @IBOutlet weak var adBody: UILabel!
    @IBOutlet weak var adSocialContext: UILabel!
    @IBOutlet weak var adAction: UIButton!
    @IBOutlet weak var adMediaView: VpadnMediaView!
}

初始化 VpadnNativeAd 物件

請參考以下程式碼初始化原生廣告，並指定 License Key

Objective-C

_nativeAd = [[VpadnNativeAd alloc] initWithLicenseKey:@"License Key"];
// initWithLicenseKey: Vpon License Key to get ad, please replace with your own one

_nativeAd.delegate = self;

Swift

vpadnNative = VpadnNativeAd(licenseKey: "License Key")
// initWithLicenseKey: Vpon License Key to get ad, please replace with your own one

vpadnNative.delegate = self

建立 VpadnRequest 物件，並請求廣告

在發出廣告請求前，請先建立 VpadnRequest 物件：

Objective-C

VpadnAdRequest *request = [[VpadnAdRequest alloc] init];

[request setTestDevices:@[[ASIdentifierManager sharedManager].advertisingIdentifier.UUIDString]];
// Set your test device's IDFA here if you're trying to get Vpon test ad

[_nativeAd loadRequest:request];
// Start to load ad

Swift

let request = VpadnAdRequest()

request.setTestDevices([ASIdentifierManager.shared().advertisingIdentifier.uuidString])
// Set your test device's IDFA here if you're trying to get Vpon test ad

vpadnNative.loadRequest(request)
// start to load ad

Note

您可以為每種類型的廣告都建立不同的 VpadnRequest 物件，或是在所有的廣告請求中都使用同一個 VpadnRequest 物件

如果您想要指定更多投放條件，請參考進階設定

自訂原生廣告 UI

當 onVpadnNativeAdLoaded 被觸發時，即取得可用的廣告資料，此時可將資料佈局至自定義的UI，請參考以下程式碼：

Objective-C

- (void)setNativeAd {
    _adIcon.image = nil;
    
    __block typeof(self) safeSelf = self;
    [_nativeAd.icon loadImageAsyncWithBlock:^(UIImage * _Nullable image) {
        safeSelf.adIcon.image = image;
    }];
    
    [_adMediaView setNativeAd:_nativeAd];
    _adMediaView.delegate = self;
    
    _adTitle.text = [_nativeAd.title copy];
    _adBody.text = [_nativeAd.body copy];
    _adSocialContext.text = [_nativeAd.socialContext copy];
    [_adAction setTitle:[_nativeAd.callToAction copy] forState:UIControlStateNormal];
    [_adAction setTitle:[_nativeAd.callToAction copy] forState:UIControlStateHighlighted];
    
    [_nativeAd registerViewForInteraction:_contentView withViewController:self];
    // You must register the Ad View to make the ad clickable

    // [_nativeAd registerViewForInteraction:withViewController:withClickableViews:self._adAction];
    // You can also register a specific ad component to make the Ad View to be clickable partly
}

Swift

func setNativeAd() {
        adIcon.image = nil
            
        vpadnNative.icon.loadImageAsync(withBlock: { image in
            self.adIcon.image = image
        })
        
        adMediaView.nativeAd = vpadnNative
        adMediaView.delegate = self
            
        adTitle.text = vpadnNative.title
        adBody.text = vpadnNative.body
        adSocialContext.text = vpadnNative.socialContext
        adAction.setTitle(vpadnNative.callToAction, for: .normal)
        adAction.setTitle(vpadnNative.callToAction, for: .highlighted)
        
        vpadnNative.registerView(forInteraction: contentView, with: self)
        // You must register the Ad View to make the ad clickable

        vpadnNative.registerView(forInteraction: withViewController, with: self.adAction)
        // You can also register a specific ad component to make the Ad View to be clickable partly
    }

實作 Delegate protocol

完成廣告請求後，您可以實作以下函數監聽廣告狀態：

Objective-C

- (void) onVpadnNativeAdLoaded:(VpadnNativeAd *)nativeAd {
    // Invoked if receive Native Ad successfully

    [self setNativeAd];
    // Construct Native Ad with returned components
}
- (void) onVpadnNativeAd:(VpadnNativeAd *)nativeAd failedToLoad:(NSError *)error {
    // Invoked if received ad fail, check this callback to indicates what type of failure occurred
}
- (void) onVpadnNativeAdWillLeaveApplication:(VpadnNativeAd *)nativeAd {
    // Invoked if user leave the app and the current app was backgrounded
}
- (void) mediaViewDidLoad:(VpadnMediaView *)mediaView {
    // Invoked if the media creatives load sucessfully
}
- (void)mediaViewDidFail:(VpadnMediaView *)mediaView error:(NSError *)error {
    // Invoked if the media creatives load fail
}

Swift

extension VponSdkNativeViewController: VpadnNativeAdDelegate, VpadnMediaViewDelegate {
    
    func onVpadnNativeAdLoaded(_ nativeAd: VpadnNativeAd) {
        // Invoked if receive Native Ad successfully

        self.setNativeAd()
        // Construct Native Ad with returned components
    }
    func onVpadnNativeAd(_ nativeAd: VpadnNativeAd, failedToLoad error: Error) {
        // Invoked if received ad fail, check this callback to indicates what type of failure occurred
    }
    func onVpadnNativeAdWillLeaveApplication(_ nativeAd: VpadnNativeAd) {
        // Invoked if user leave the app and the current app was backgrounded
    }
    func mediaViewDidLoad(_ mediaView: VpadnMediaView) {
        // Invoked if the media creatives load sucessfully
    }
    func mediaViewDidFail(_ mediaView: VpadnMediaView, error: Error) {
        // Invoked if the media creatives load fail  
    }
}

Native Ad Spec

紅色表示您必須顯示的原生廣告元件，其中 CoverImage 與 Icon 必須至少顯示其中一個。

Properties	Description
AdLabel	讓使用者了解此為廣告 (例如：贊助、廣告等等)
Title	最少需顯示8個中文字, 放不下時須顯示`...`
CoverImage	1200 x 627px (可等比例縮放，不可變形，不可裁切)
Icon	128 x 128px (可等比例縮放，不可變形，不可裁切)
CallToAction	需要完整顯示
BodyText	最少顯示20個中文字，或不要顯示
SocialContext	需要完整顯示適用於 SDK v4.9.3 及以下版本
RatingScale	5，可能為空值

Tips

確認廣告曝光是否成功發送

請注意，Vpon SDK 不允許廣告以以下方式呈現，致使廣告在畫面上可能不可見：

將 AdView 設為 Hidden
將 AdView 的 Alpha 值設為 < 100%
AdView 被其它 View(s) 遮蓋住

當廣告露出在頁面上並達到曝光標準後，會印出以下的 Log 代表有送出廣告曝光：

<VPON> [NOTE] Send impression successfully

Sample Code

本頁以基本的 Native Ad 為例進行說明，如果您想看到完整的串接實例或 Table View 的範例，請參考我們的 Sample Code

中介服務

透過中介服務，您的應用程式就能放送眾多來源的廣告，詳細請見說明：

使用 AdMob
<!– - 使用 MoPub
使用 Smaato –>

適用於 Vpon SDK v5.5.0 以下版本的串接方法

如果您想了解 Vpon SDK v5.5.0 以下版本的串接方法，請參考原生廣告

iOS - 原生廣告

概要

完成串接準備

開始撰寫 Native Ad

Import VpadnSDKAdKit 並宣告 VpadnNativeAd

Objective-C

Swift

初始化 VpadnNativeAd 物件

Objective-C

Swift

建立 VpadnRequest 物件，並請求廣告

Objective-C

Swift

自訂原生廣告 UI

Objective-C

Swift

實作 Delegate protocol

Objective-C

Swift

Native Ad Spec

Tips

確認廣告曝光是否成功發送

Sample Code

中介服務

適用於 Vpon SDK v5.5.0 以下版本的串接方法