Just a Computer Graphics Studio & My Life

[iOS] 使用Vpon行動廣告教學

雖然威朋(Vpon)行動廣告官方有教學,但在此我還是要記錄我如何套用實作。它的SDK 3和SDK4有很大的差別,因我在網路上搜尋到的教學跟現行官方教學有些出入,所以未來釋出的SDK還是要以官方的教學為主喔!我則使用Vpon SDK 4.1來實作。

vpon test interstitial vpon test banner

  1. 下載SDK可到這裡,打開就能執行編譯範例,但要先申請banner ID,才能順利顯示真實廣告,我的可借用測試喔!
  2. 在專案中加入libAdOn.a,VponBanner.h與VponInterstitial.h(才三個檔)
  3. 加入SDK會參照到的frameworks:(有夠多⋯⋯)
    • AddressBook ,
    • AddressBookUI ,
    • AdSupport ,
    • AssetsLibrary ,
    • AudioToolbox ,
    • AVFoundation ,
    • CoreFoundation ,
    • CoreGraphics ,
    • CoreLocation ,
    • CoreMedia ,
    • CoreMotion ,
    • CoreTelephony ,
    • EventKit ,
    • Foundation ,
    • MediaPlayer ,
    • MessageUI ,
    • MobileCoreServices ,
    • QuartzCore ,
    • Security ,
    • StoreKit ,
    • SystemConfiguration ,
    • UIKit
  4. 撰寫相關程式碼

/**
 Theme: Using Vpon
 IDE: Xcode 5
 Language: Objective C
 Date: 103/04/04
 Author: HappyMan
 Blog: https://cg2010studio.wordpress.com/
 */
// 在.h
#import <UIKit/UIKit.h>
// 載入標頭檔
#import "VponBanner.h"
#import "VponInterstitial.h"

// 增加兩個protocol接收廣告狀態
@interface HTVponViewController : UIViewController <VponBannerDelegate, VponInterstitialDelegate>
{
    VponBanner *happyVponBanner;// 宣告使用VponBanner廣告
    VponInterstitial *happyVponInterstitial;// 宣告使用Vpon插屏廣告
    Platform platform;// 宣告使用拉取廣告的地區
    IBOutlet UIView *bannerxView;
}
// 在.m
- (void)viewDidLoad
{
    [super viewDidLoad];
    happyVponBanner = [[VponBanner alloc] initWithAdSize:VponAdSizeSmartBannerPortrait];// 初始化Banner物件
    happyVponBanner.strBannerId = @"8a808182447617bf0145216213bf795e";// 填入您的BannerId
    happyVponBanner.delegate = self;// 設定delegate接收protocol回傳訊息
    happyVponBanner.platform = TW;// 台灣地區請填TW 大陸則填CN
    [happyVponBanner setAdAutoRefresh:YES];//如果為mediation則set NO
    [happyVponBanner setRootViewController:self]; //請將window的rootViewController設定在此 以便廣告順利執行
    [bannerxView addSubview:[happyVponBanner getVponAdView]];// 將VponBanner的View加入此ViewController中
    [happyVponBanner startGetAd:[self getTestIdentifiers]];// 開始抓取Banner廣告
}

// 請新增此function到程式內,如果為測試用,則在下方填入UUID,即可看到測試廣告。
-(NSArray*)getTestIdentifiers
{
    return [NSArray arrayWithObjects:
            // add your test UUID
            nil];
}

#pragma mark VponAdDelegate method 接一般Banner廣告就需要新增
- (void)onVponAdReceived:(UIView *)bannerView{
    NSLog(@"廣告抓取成功");
}

- (void)onVponAdFailed:(UIView *)bannerView didFailToReceiveAdWithError:(NSError *)error{
    NSLog(@"廣告抓取失敗");
}

- (void)onVponPresent:(UIView *)bannerView{
    NSLog(@"開啟vpon廣告頁面 %@",bannerView);
}

- (void)onVponDismiss:(UIView *)bannerView{
    NSLog(@"關閉vpon廣告頁面 %@",bannerView);
}

- (void)onVponLeaveApplication:(UIView *)bannerView{
    NSLog(@"離開publisher application");
}

#pragma mark VponInterstitial Delegate 有接Interstitial廣告才需要新增
- (void)onVponInterstitialAdReceived:(UIView *)bannerView{
    NSLog(@"插屏廣告抓取成功");
    // 顯示插屏廣告
    [happyVponInterstitial show];
}

- (void)onVponInterstitialAdFailed:(UIView *)bannerView{
    NSLog(@"插屏廣告抓取失敗");
}

- (void)onVponInterstitialAdDismiss:(UIView *)bannerView{
    NSLog(@"關閉插屏廣告頁面 %@",bannerView);
}

#pragma mark 通知關閉vpon開屏廣告
- (void)onVponSplashAdDismiss{
    NSLog(@"關閉vpon開屏廣告頁面");
}

-(IBAction)refreshButtonCLicked:(UIButton *)button
{
    // 插屏廣告則使用下方程式碼取得
    happyVponInterstitial = [[VponInterstitial alloc] init];
    happyVponInterstitial.strBannerId = @"8a808182447617bf01452202d7e87b92";// 填入您的BannerId
    happyVponInterstitial.platform = TW;// 台灣地區請填TW 大陸則填CN
    happyVponInterstitial.delegate = self;
    [happyVponInterstitial getInterstitial:[self getTestIdentifiers]];
}

執行結果:

vpon interstitial vpon banner

在實作過程中有趣的事,就是我昨天下午才申請Vpon帳號,並且創建兩個版面的banner ID(橫幅式和插頁式),馬上按照上述方法設定好相關設定和撰寫好顯示廣告的程式碼,但卻顯示最上方的測試廣告⋯⋯後來跟客服求救,沒改任何程式碼,就出現上方的真實廣告!兩個小時後另一個客服來信,說是幫我開通帳號,始能正常顯示真實廣告!真是感激她們下班時間還幫我處理哪~

vpon statistics

這是Vpon很詳細的統計平台。

我測試兩種廣告形式(插頁式(interstitial)和橫幅式(banner)),都能順利回傳點擊資料到後台!測試時建議適可而止,不然異常點擊數太多,威朋客服會發現滴:P~

做完才發現,啊哈~原來這麼簡單!去年做XX牌案子也有用到,只是當時不是我做廣告這部分:D~

參考:威朋官方網站威朋中文SDK教學iOS App + Vpon 廣告商

廣告

Comments on: "[iOS] 使用Vpon行動廣告教學" (2)

  1. libAdOn.a 超級肥大的! 不知道裡面到底是裝了啥…

    喜歡

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: