Hướng dẫn tích hợp CleverNET SDK 3.1 cho iOS | CleverNET - Mạng quảng cáo thông minh trên điện thoại di động

 

Hướng dẫn tích hợp CleverNET iOS SDK 3.1

Hướng dẫn tích hợp CleverNET SDK 3.1 cho iOS

Những điểm mới so với Version 2.0

- Hỗ trợ các định dạng quảng cáo mới : Cost Per Action, Banner Mix, SMS, Rich Media, Fullscreen, PopUp, Banner

- Hỗ trợ tích hợp với phiên bản Admob mới nhất (Phân bổ theo CPM)

- Tracking số liệu chính xác và hiệu suất cao hơn

Nội dung :

1. Tạo Publisher và link Banner từ hệ thống trang chủ của CleverNET

2. Các bước quan trọng để chèn SDK quảng cáo

3. Ví dụ tạo 1 ứng dụng mẫu và đặt SDK quảng cáo

Bước 1: Tạo Project mới

Bước 2 : Chọn kiểu ứng dụng là Empty Application

Bước 3 : Đặt tên ứng dụng là CleverNetSDKSampleApps

Bước 4 : Import bộ SDK

Bước 5: Add các frameworks cần thiết

Bước 6 : Tạo file cấu hình

Bước 7: Add file Objective-C class kiểu UIViewController tới project

Bước 8 : Cấu hình file ViewControlDemo.h

Bước 9 : Cấu hình file ViewControlDemo.m

Bước 10 : Sửa file AppDelegate.h theo mẫu

Bước 11 : Sửa file AppDelegate.m theo mẫu

Bước 12 : Build và chạy ứng dụng

4. Cấu hình nâng cao cho SDK

5. Cấu trúc file Delegate

6. Hàm Load quảng cáo

7. Cách xử lý lỗi thường gặp


1. Tạo Publisher và link Banner từ hệ thống trang chủ của CleverNET

Bước 1: Đăng ký account Publisher

Bước 2: Login vào hệ thống

Bước 3: Tạo Apps

Bước 4: Tạo Campain

Bước 5: Tạo Zone quảng cáo

Bước 6: Lấy ZoneID

 

- Hệ thống CleverNET đã cấu hình sẵn 06 loại Banner Ads, 01 loại Text Ads, 01 loại Video Ads phục vụ cho việc demo ứng dụng SDK với các thông số như sau :

STT

Tên

Kích thước

ZoneID Demo

1

mma

320x50

TEST_BANNER
_MMA

2

medium_rectangle

300x250

TEST_BANNER
_MEDIUM

3

leaderboard

728x90

TEST_BANNER
_LEADERBOARD

4

fullscreen

768x768

TEST_BANNER
_FULLSCREEN

5

portrait

766x66

TEST_BANNER
_PORTRAIT

6

landscape

1024x66

TEST_BANNER
_LANDSCAPE

7

Text Ads

 

TEST_TEXT


2. Các bước quan trọng để chèn SDK quảng cáo

 
Bước 1 : Cài đặt và khởi tạo delegate chứa các tùy biến cho SDK. Ví dụ

(NSString *) appId { // ZoneAppID được cung cấp bởi hệ thống http://clevernet.vn trong account của bạn (khi bạn tạo 1 zone)

return @"ed2d02f145f2c1cfeeea5f2b0d388794";

}

(Tham khảo thêm file CleverNetSDKSampleDelegate.m hoặc phần 5 : “Cấu trúc file Delegate”)

Bước 2 : Xác định view và vị trí đặt quảng cáo.

CleverNetDemoDelegate = [[CleverNetSDKSampleDelegate alloc] init];

CleverNetView *ad = [CleverNetView loadAdWithDelegate:CleverNetDemoDelegate secondsToRefresh:25 includeFullscreen:true];

[ad place_at_x:0 y:410];

[self.view addSubview:ad];

[self.view bringSubviewToFront:ad];

Chú ý : SDK cung cấp 2 hàm load quảng cáo (Xem chi tiết phần 6 : “Hàm load quảng cáo”)

oloadAdWithDelegate
: Sẽ tự động load quảng cáo theo chu kỳ thời gian được chỉ định

oloadOneAdWithDelegate
: Sẽ chỉ load quảng cáo một lần duy nhất

3. Ví dụ tạo 1 ứng dụng mẫu và đặt SDK quảng cáo

Bước 1: Tạo Project mới



Bước 2 : Chọn kiểu ứng dụng là Empty Application

 



Bước 3 : Đặt tên ứng dụng là CleverNetSDKSampleApps



 

Bấm nút Next và chọn thư mục lưu ứng dụng

Bước 4 : Import bộ SDK

-Bấm chuột phải vào project chọn “Add file to CleverNetSDKSampleApps”



Chọn thư mục CleverNetLibSDK(tải về từ trang chủ CleverNET) và bấm nút Add



Bước 5: Add các frameworks cần thiết

SystemConfiguration

AdSupport

CoreTelephony

QuarztzCore

CoreLocation

Foundation

UIKiT

CoreGraphic

…..

Chọn ứng dụng, chọn Build Phase



Bấm vào dấu + ( Là nút Add Items như hình vẽ)



Bước 6 : Tạo file cấu hình

 

Tạo New File to Project, chọn Objective-C class và giả sử đặt tên là CleverNetSDKSampleDelegate



Trong file header của CleverNetSDKSampleDelegate.h ta import CleverNetDelegationProtocol.h

#import "CleverNetDelegationProtocol.h"

 

Kiểu của class đổithành:

@interface CleverNetSDKSampleDelegate: NSObject<CleverNetDelegationProtocol>

 



 

Trong file CleverNetSDKSampleDelegate.m ta khởi tạo các thông số sau

+ AppID: là ZoneID của App từ trang chủ CleverNET (Xem phần I)

- (NSString *) appId { return @"TEST_BANNER_MMA";}

(Xem file cấu hình mẫu CleverNetSDKSampleDelegate.h và CleverNetSDKSampleDelegate.m trong ứng dụng mẫu, cùng bộ Lib được tải về từ trang web)

Bước 7: Add file Objective-C class kiểu UIViewController tới project

-Đặt tên là  ViewControlDemo



Bước 8 : Cấu hình file ViewControlDemo.h

Thực hiện thêm các dòng lệnh sau 

#import “CleverNetView.h

#import “CleverNetSDKSampleDelegate.h”

CleverNetSDKSampleDelegate *CleverNetDemoDelegate;


Bước 9 : Cấu hình file ViewControlDemo.m

Thêm lệnh sau vào hàm (void)viewDidLoad

CleverNetDemoDelegate = [[CleverNetSDKSampleDelegate alloc] init];

CleverNetView *ad = [CleverNetView loadAdWithDelegate:CleverNetDemoDelegate

secondsToRefresh:25 includeFullscreen:true];

[ad place_at_x:0 y:410];

[self.view addSubview:ad];

[self.view bringSubviewToFront:ad];

Giải thích :

SecondsToRefresh : Thời gian load lại Ads từ máy chủ CleverNET

-  place_at_x : y: Vị trí đặt Ads trên ứng dụng của bạn

[self.viewbringSubviewToFront:ad] : Kích hoạt hiện thị Ads

 

*Lưu ý:

-Với các ứng dụng phát triển từ Xcode 4.2 trở xuống thì cần thêm lệnh [ad release]

Bước 10 : Sửa file AppDelegate.h theo mẫu

#import <UIKit/UIKit.h>

#import "ViewControlDemo.h"

@interface AppDelegate : UIResponder <UIApplicationDelegate>{

ViewControlDemo *viewController;

}

@property (strong, nonatomic) UIWindow *window;

Bước 11 : Sửa file AppDelegate.m theo mẫu

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

viewController = [ViewControlDemo new];

self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

// Override point for customization after application launch.

self.window.backgroundColor = [UIColor whiteColor];

[_window addSubview: viewController.view];

[self.window makeKeyAndVisible];

return YES;

}

Bước 12 : Build và chạy ứng dụng

4. Cấu hình nâng cao cho SDK

 

Thiết lập thời gian refresh của quảng cáo

Developer có thể thiết lập trên website như sau:



 

     + Nếu chọn “Sử dụng thiết lập trên SDK”, developer sẽ sử dụng đoạn code sau trong chương trình của mình

CleverNetView *ad = [CleverNetView loadAdWithDelegate:CleverNetDemoDelegate 

secondsToRefresh :25 includeFullscreen:true];

+ Nếu chọn “Không refresh” , banner sẽ không được refresh

+ Nếu chọn “Refresh sau : ” thì thời gian refresh quảng cáo sẽ được thiết lập. Khi đó nếu có thiết lập thời gian trong code, sẽ không có tác dụng

Thiết lập chiều cao, rộng của quảng cáo Banner

+ Để chọn các kích thước mặc định, chọn Tùy chỉnh

+ Để tùy chọn chiều rộng và cao, điền giá trị tương ứng vào ô “Rộng”, “Cao”

+ Để thiết lập chiều rộng và cao trong code, sử dụng

(void) setWidth:(int)w Height:(int)h

Thiết lập màu của quảng cáo Text

Developer có thể tùy chọn màu sắc cho quảng cáo trên website


     +  Nếu chọn “Dùng bảng màu dưới đây” và thiết lập màu cho banner, SDK sẽ sử dụng các giá trị này để thiết lập cho quảng cáo dạng Text

+ Nếu chọn “Sử dụng màu sắc thiết lập trên SDK”, thiết lập trong code như sau:

(void) setTextColor:(NSString *) textCol

(void) setTextBgColor:(NSString *) textBgCol

5. ấu trúc file Delegate

File .h :

#import <Foundation/Foundation.h>

#import "CleverNetDelegationProtocol.h"

 

@interface CleverNetSDKSampleDelegate : NSObject <CleverNetDelegationProtocol> {

}

@end

File .m 

#import "CleverNetSDKSampleDelegate.h"

@implementation CleverNetSDKSampleDelegate

#pragma mark -

#pragma mark CleverNetDelegateProtocol Methods

 

- (NSString *) appId {

return @"ed2d02f145f2c1cfeeea5f2b0d388794";

// ZoneAppID được cung cấp bởi hệ thống  http://clevernet.vn trong account của bạn (khi bạn tạo 1 zone)}

 - (bool) debugEnabled {

return true;

}

 - (bool) customEventEnabled {

return false;

}

 - (double) durationOfBannerAnimation{

return 5.0;

}

 - (UIColor *) textAdBackGroundColor{

return [UIColor clearColor];

}

 

- (UIColor *) textlabelColor{

return [UIColor whiteColor];

}

-  (CleverNetAnimationClass) bannerAnimationType{

return leftToRight;

}

- (CLLocationCoordinate2D) location {

CLLocationCoordinate2D _location = { 8.807081, 53.074981 };

return _location;

}

- (bool) downloadTrackerEnabled {

return YES;

}

- (NSString*)age {

return @"21";

}

- (NSString *) gender {

return @"M";

}

 

#pragma mark -

#pragma mark CleverNetView Callbacks

 

- (void)adViewDidReceiveAd:(CleverNetView *)adView {

}

 

- (void)adView:(CleverNetView *)view didFailToReceiveAdWithError:(NSError *)error {

}

 

- (void)adViewWillPresentScreen:(CleverNetView *)adView {

}

 

- (void)adViewWillDismissScreen:(CleverNetView *)adView {

}

 

- (void)adViewDidDismissScreen:(CleverNetView *)adView {

}

 

- (void)adViewWillLeaveApplication:(CleverNetView *)adView {

}

 

- (void)adViewDidClickAd:(CleverNetView *)adView{}

@end

6. Hàm Load quảng cáo

Bao gồm 2 hàm :

CleverNetView *ad = [CleverNetView loadAdWithDelegate:CleverNetDemoDelegate secondsToRefresh:25
includeFullscreen:true];

Hàm này có cài đặt Timer định kỳ refresh lại quảng cáo

Trong đó :

 CleverNetDemoDelegate : Là biến tham chiếu tới đối tượng cài đặt các hàm Delegate như mục 5

 secondsToRefresh : Chu kỳ (refresh) tải lại quảng cáo

 includeFullscreen: Có lấy banner fullscreen hay không ?

 

CleverNetView *ad = [CleverNetView loadOneAdWithDelegate:CleverNetDemoDelegate onlyFullscreen:true];

Hàm này chỉ lấy quảng cáo 1 lần duy nhất.

Trong đó :

 CleverNetDemoDelegate : Là biến tham chiếu tới đối tượng cài đặt các hàm Delegate như mục 5

 onlyFullscreen: Chỉ lấy quảng cáo kiểu fullscreen (=true) hoặc tất cả các loại quảng cáo (=false)

 7. Cách xử lý lỗi thường gặp

Nếu quá trình build gặp lỗi. Bạn hãy check tham số cấu hình (Trong cả Project và Targets, chọn Build Settings)

iOS Deployment Target : iOS 6.0 trở lên

Other Linker Flags : -ObjC -all_load

HƯỚNG DẪN SỬ DỤNG THƯ VIỆN SDK CHO ADVERTISER

- Tải thư viện CleverNET SDK cho iOS tại đây

1. Mục đích

- Thư viện SDK nhằm hỗ trợ Advertiser theo dõi chính xác được các hành động của người dùng như : click banner, download Applications/Games, mua hàng …

2. Cách dùng

- Bước 1 : Tạo Campaign CPA (Cost per Action) trên hệ thống http://clevernet.vn
- Bước 2 : Định nghĩa các bộ Tracker (tương ứng với các hành động mà bạn mong muốn). Ví dụ:

+ Tracker 1 : Mặc định là action bấm vào banner quảng cáo (Sẽ là Tracker có Status “Bắt đầu”). Hệ thống luôn dùng Tracker này mặc định.
+ Tracker 2, Tracker 3 ….: Là các Action trung gian (Sẽ là Tracker có Status là “Trung gian”) như : Login, bấm vào nút mua hàng (web), hay là bấm vào nút download ứng dụng (mobile)
+ Tracker n : Là Action đánh dấu kết thúc toàn bộ 1 quá trình của người dùng (Sẽ là Tracker có Status là “Kết thúc” như : Mua hàng thành công hay là Apps đã tải về thành công.
(Bước 1 và 2 các bạn thực hiện trực tiếp theo hướng dẫn trên hệ thống http://clevernet.vn hoặc liên hệ với chúng tôi để được trợ giúp Hotline: 0919 01 8448 (HN) - 0919 02 8448 (HCM) - 0917 73 8448 (ĐN))

- Bước 3 : Imports thư viện “thư mục Lib_Advertiser”
- Bước 4 : Thực hiện đặt hàm tracking (với Tracker ID lấy từ trang web) vào các vị trí thích hợp muốn theo dõi

[ClevernetNotifyAction setTrackerID:@“trackerID thay vào đây” isCached:true toCStore:false ];
[ClevernetNotifyAction send];

3. Ví dụ : Tracking download ứng dụng

- Bước 1 : Tạo Campaign CPA
- Bước 2 : Tạo 2 Tracker trong Campaign

+ Tracker 1 : Với trạng thái “Ban đầu”, Code = “12345”.
+ Tracker 2 : Với trạng thái “Kết thúc”, Code = “34567”.

- Bước 3 : Hệ thống sẽ dùng Tracker 1 với mã “12345” mặc định để đánh dấu theo dõi quảng cáo từ các ứng dụng đang đặt banner quảng cáo
- Bước 4 : Đặt code “34567” của Tracker 2 vào trong hàm

- (void)viewDidLoad
như sau :
(void)viewDidLoad
{
……
[ClevernetNotifyAction setTrackerID:@" 34567" isCached:true toCStore:false ];
[ClevernetNotifyAction send];
}

Switch to our mobile site