iOS - Tích hợp AmobiSDK
17/09/2016
Chỉ 2 phút lập trình tích hợp thư viện AmobiSDK, bạn đã có thể nhúng quảng cáo vào ứng dụng Android của mình. Chúc bạn thành công.
 

Tải thư viện Amobi SDK cho iOS


Trước hết bạn cần phải tạo ứng dụng trên hệ thống Amobi theo như hướng dẫn Tại đây trước.

Sau đó tải thư viện AmobiSDK cho IOS Tại đây

Tham khảo thêm ví dụ mẫu về dự án đã tích hợp AmobiSDK Tại đây

 

  • Số lượng file trong thư mục: AmobiSDKV2.3 có thay đổi: thêm 1 số file ảnh: comment.png, mute.png, next.png, refresh.png, upload.png .....
  • Một số hàm được thay đổi khi gọi tới:
    • [adView hideBanner:nil]; thay bằng: [adView hideBanner:nil hasError:NO];
    • [AmobiSDK setDelegate:amobiBannerDelegate]; thay bằng: [ adView setDelegate:self];
  • Vẫn có các hàm hỗ trợ khi load quảng cáo:  adViewLoadSuccess,  adViewLoadError,  adViewClose để giúp developers tuỳ biến.
  •  Hỗ trợ libgdx: thêm 2 file AmobiVideoAd.java và AmobiAdView.java vào thư viện
  • Hỗ trợ bitcode: không (tắt Enable Bitcode trong build Setting)
 
 

Tích hợp thư viện Amobi SDK cho iOS


 

Bước 1: add thư viện như hình dưới.

 

Kết quả sẽ như này:

 

Bước 3: Thêm các thư viện cần thiết trong phần Build Phases.

 

  • Nếu sử dụng Video Ads bạn cần thêm các thư viện sau
SystemConfiguration.framework
CFNetwork.framework
libz.dylib
CoreGraphics.framework
UIKit.framework
Foundation.framework
AdSupport.framework
MediaPlayer.framework
 
  • Nếu sử dụng Banner Ads bạn cần thêm các thư viện sau
SystemConfiguration.framework
CFNetwork.framework
libz.dylib
CoreGraphics.framework
UIKit.framework
Foundation.framework
AdSupport.framework

 

 

Bước 4: Khai báo Widget Code

Mở file AmobiInfo.plist trong thư mục "AmobiSDK iOS V2.3 20150404", thay mã quảng cáo của ứng dụng vào trường WidgetCode.

Widget Code được tạo ra khi bạn tạo ứng dụng trên hệ thống Amobi theo như hướng dẫn Tại đây .

Chú ý rằng mỗi một ứng dụng chỉ được sử dụng 1 Widget Code và ngược lại.

 

Hiện quảng cáo Mobile TVC (Video Ads)


 

Đây là loại hình quảng cáo có nhiều ưu điểm với doanh thu tốt nhất và được các nhà quảng cáo ưa chuộng.

Mobile TVC (Video Ads) là một đoạn quảng cáo clip 15s đến 30s, người dùng chỉ được đóng lại khi đã xem ít nhất 5s.

Bạn có thể gắn Video Ads vào các tình huống sau:

  • Bật khi mở một chức năng ứng dụng hoặc bắt đầu chơi game như hình dưới,
  • Kêu gọi người dùng xem quảng cáo Video Ads để ủng hộ.
  • Khuyến khích người dùng xem quảng cáo Video Ads để được quyền sử dụng một số chức năng hoặc thay cho mua xu, thanh toán trong game.
  • Khi không có Video Ads, bạn có thể bắt sự kiện này và hiển thị banner fullscreen để thay thế.

 

 

Video Ads được chạy trước khi người dùng xem clip.

 

  • Video Ads được gọi theo luồng hoạt động như sau:

 

(Nhấn hình để phóng to)

Tích hợp với Objective C

 

  • Khởi tạo AdView:
AmobiVideoAd  *videoAd= [[AmobiVideoAd alloc] init];
[videoAd setDelegate:self];
[videoAd prepare];

 

  • Để bắt các sự kiện quảng cáo, Implement delegate của quảng cáo video (AmbVideoAdDelegate) như sau:
- (void) onAdAvailable:(AmobiVideoAd*) adView {
   [videoAd playVideo:self];
   // quảng cáo đã tải thành công,
   // bạn có thể tạm ngưng xử lý ứng dụng của mình tại đây.
}

- (void) onAdStarted:(AmobiVideoAd*) adView{
   
// quảng cáo bắt đầu chạy,
   // bạn có thể tạm ngưng xử lý ứng dụng của mình tại đây.

}

- (void) onAdFinished:(AmobiVideoAd*) adView{
   // quảng cáo đã chạy xong, bạn có thể xử lý tiếp ứng dụng của mình tại đây.
}

- (void) onPrepareError:(AmobiVideoAd*) adView{
   // quảng cáo có lỗi, bạn có thể xử lý tiếp ứng dụng của mình tại đây.

   // bạn có thể tranh thủ gọi tiếp quảng cáo fullscreen để tăng thêm doanh thu khi không có video
}

 

  • Chờ đến khi hàm onAdAvailable:(AmobiVideoAd*) được gọi, khi đó quảng cáo đã sẵn sàng để hiển thị, bạn cho hiển thị bằng lệnh sau
[videoAd playVideo:self];

 

  • Nếu có lỗi quảng cáo hàm onPrepareError được gọi, hoặc quảng cáo kết thúc bằng hàm onAdFinished, bạn cho chạy tiếp nội dung ứng dụng của bạn.
  • Các sự kiện playback (start, finish) sẽ được gọi đến các hàm tương ứng của delegate
  • Bạn có thể tranh thủ gọi tiếp quảng cáo fullscreen để tăng doanh thu khi không có quảng cáo video

 


 

Banner fullscreen cho tỷ lệ click tốt và được các nhà quảng cáo ưa chuộng ưu tiên chiến dịch quảng cáo hơn. Bạn có thể sử dụng banner fullscreen trong một số tình huống sau:

  • Bật khi bắt đầu vào ứng dụng.
  • Bật khi chuyển cảnh giữa các màn hình khác nhau.
  • Bật khi mở một chức năng ứng dụng hoặc bắt đầu chơi game như hình dưới.
  • Kêu gọi người dùng xem quảng cáo để ủng hộ.
  • Khuyến khích người dùng xem quảng cáo để được quyền sử dụng một số chức năng hoặc thay cho mua xu, thanh toán trong game.
  • Khi không có Video Ads, bạn có thể bắt sự kiện này và hiển thị banner fullscreen để thay thế.

 

 

Hiện banner Fullscreen khi mới mở ứng dụng

 

  • Banner full được gọi theo luồng hoạt động như sau:

 

(Nhấn hình để phóng to)

 

  • Để khởi tạo quảng cáo, bạn cần khởi tạo đối tượng AdView, với tham số là kích thước banner muốn sử dụng:
/*Quảng cáo full màn hình*/
AmobiAdView *adView =
  [[AmobiAdView alloc] initWithBannerSize:SizeFullScreen ];

 

  • Gắn AdView vào giao diện:
[self.view addSubview:adView];

 

  • Hiển thị quảng cáo:
[adView loadAd];

 

  • Ẩn quảng cáo nếu cần thiết:
[adView hideBanner:nil hasError:NO];

 

  • Để bắt các sự kiện liên quan đến quảng cáo, bạn sử dụng các hàm Delegate sau: 
[AmobiSDK setDelegate:amobiBannerDelegate];
- (void) adViewLoadSuccess:(AmobiAdView*) amobiAdView{
    // Load quảng cáo thành công.
}

- (void) adViewLoadError:(AmobiAdView*) amobiAdView{
    // Quảng cáo thất bại
    // (do lỗi mạng hoặc không có quảng cáo từ server)
}

- (void) adViewClose:(AmobiAdView*) amobiAdView{
    // Khi quảng cáo được đóng lại
}

 

 


 

Banner 300x250 cho tỷ lệ click tốt và chèn vào giữa nội dung nên gây thiện cảm với người sử dụng hơn. Bạn có thể cho hiện banner này ở các tình huống sau

  • Chèn giữa nội dung như hình dưới bên phải.
  • Pop-up khi mới mở ứng dụng như hình dưới bên trái.
  • Pop-up khi mở một chức năng ứng dụng
  • Pop-up khi chuyển cảnh giữa các màn hình.

 

  

Banner 300x250 pop-up hoặc chèn giữa nội dung

 
  • Banner pop-up 300x250 được gọi theo luồng hoạt động như sau:

 

(Nhấn hình để phóng to)

 

  • Để khởi tạo quảng cáo, bạn cần khởi tạo đối tượng AdView, với tham số là kích thước banner muốn sử dụng:
/*Quảng cáo 300x250,luôn nằm giữa màn hình*/
AmobiAdView *adView = [[AmobiAdView alloc] initWithBannerSize:Size300x250];

 

  • Gắn AdView vào giao diện:
[self.view addSubview:adView];

 

  • Hiển thị quảng cáo:
[adView loadAd];

 

  • Ẩn quảng cáo nếu cần thiết:
[adView hideBanner:nil hasError:NO];

 

  • Nến bạn muốn giấu khung viền và nút closed để chèn quảng cáo vào nội dung của bạn, sử dụng lệnh sau
[adView loadAdSize:Size300x250];
 
  • Để bắt các sự kiện liên quan đến quảng cáo, bạn sử dụng các hàm Delegate sau: 
[AmobiSDK setDelegate:amobiBannerDelegate];
- (void) adViewLoadSuccess:(AmobiAdView*) amobiAdView{
    // Load quảng cáo thành công.
}

- (void) adViewLoadError:(AmobiAdView*) amobiAdView{
    // Quảng cáo thất bại
    // (do lỗi mạng hoặc không có quảng cáo từ server)
}

- (void) adViewClose:(AmobiAdView*) amobiAdView{
    // Khi quảng cáo được đóng lại
}
 
 


 

Banner 300x50 ở chân hoặc đầu màn hình luôn hiển thị gây ấn tượng quảng cáo tốt cho người dùng, do ít khả năng bị bỏ qua nên cũng cho tỷ lệ click tốt. Banner này có thể được hiện trong các tình huống sau:

  • Hiện ở chân hoặc đầu màn hình.
  • Hiện ngay trong nội dung ứng dụng, trong màn chơi.

 

  

Banner 300x250 hiển thị ở chân hoặc đầu màn hình

 
  • Video Ads được gọi theo luồng hoạt động như sau:

 

(Nhấn hình để phóng to)

 

  • Để khởi tạo quảng cáo, bạn cần khởi tạo đối tượng AdView, với tham số là kích thước banner muốn sử dụng:
/*Quảng cáo 320x50*/
AmobiAdView *adView = [[AmobiAdView alloc] initWithBannerSize:Size320x50];

 

  • Gắn AdView vào giao diện:
[self.view addSubview:adView hasError:NO];

 

  • Thay đổi vị trí banner nếu cần (chỉ áp dụng được với banner 320x50) bằng sử dụng hàm setCenter, không sử dụng hàm setBounds. Ví dụ sau sẽ đổi vị trí banner xuống chính giữa phía dưới màn hình
CGRect screenBounds = [[UIScreen mainScreen] bounds];
[adView setCenter:CGPointMake
  (screenBounds.size.width/2,
  screenBounds.size.height - adView.bounds.size.height/2)];

 

  • Hiển thị quảng cáo:
[adView loadAd];

 

  • Ẩn quảng cáo nếu cần thiết:
[adView hideBanner:nil];

 

  • Để bắt các sự kiện liên quan đến quảng cáo, bạn sử dụng các hàm Delegate sau: 
[AmobiSDK setDelegate:amobiBannerDelegate];
- (void) adViewLoadSuccess:(AmobiAdView*) amobiAdView{
    // Load quảng cáo thành công.
}

- (void) adViewLoadError:(AmobiAdView*) amobiAdView{
    // Quảng cáo thất bại
    // (do lỗi mạng hoặc không có quảng cáo từ server)
}

- (void) adViewClose:(AmobiAdView*) amobiAdView{
    // Khi quảng cáo được đóng lại
}
 
 
Tích hợp với Swift
 

Bước 1: import SDK vào trong project:

Để thêm thư viện AmobiSDk vào project Swift. Thực hiện tương tự như hướng dẫn trên website với Objoective C.

Bước 2: tạo file Bridging trong Project :

Sau khi hoàn thành import SDK vào project bước tiếp theo như sau:

Sau khi tạo thành công thì làm tương tự như trường hợp trên.

Giao diện sau khi thêm file header Bridging và import quảng cáo Amobi trong file Bridging.

Description: MAC OS:Users:CEO:Desktop:Screen Shot 2016-05-20 at 11.27.45 AM.png

 

Bước 3: Gọi quảng cáo trong project:

Sau khi tạo file Bridging thành công, thực hiện gọi quảng cáo trong project như sau:

  1. Đối với video Ad:

Thêm AmbVideoAdDelegate vào trong class muốn gọi quảng cáo

Khai báo biến

var videoAd: AmobiVideoAd!

Khởi tạo trong ViewDidLoad:

        videoAd = AmobiVideoAd()

        videoAd.prepare()

        videoAd.setDelegate(self)

  • Trường hợp khởi tạo thành công. Sẽ gọi về các phương thức onAdStarted. Sau đó nếu video quảng cáo sẵn sang để play thì sẽ được gọi vào trong phương thức onAdAvailable sẽ gọi để chạy quảng cáo. Và sẽ tiếp tục gọi về phương thức onAdFinished khi video quảng cáo chạy xong.
  • Trường hợp khởi tạo thất bại sẽ được gọi tới phương thức: onPrepareError

    func onAdStarted(adView: AmobiVideoAd!) {

        print("started ad")

    }

    func onAdFinished(adView: AmobiVideoAd!) {

        print("finish ad")

    }

    func onAdAvailable(adView: AmobiVideoAd!) {

        print("ad available")

        videoAd.playVideo(self)

    }

    func onPrepareError(adView: AmobiVideoAd!) {

        print("ad error")

    }

  1. Qung cáo Banner

Thêm AmobiBannerDelegate vào trong class muốn gọi quảng cáo

Khai báo biến:

var adView: AmobiAdView!

Khởi tạo AmobiAdView + hiện:

adView = AmobiAdView(bannerSize:SizeFullScreen)

self.view.addSubview(adView) // them quảng cáo full screen

        adView.loadAd() //gọi quảng cáo

Các function delegate của AmobiBannerDelegate

func adViewLoadSuccess(amobiAdView: AmobiAdView!) {

        print("amobi success")

    }

    func adViewLoadError(amobiAdView: AmobiAdView!) {

        print("amobiAd error")

    }

    func adViewClose(amobiAdView: AmobiAdView!) {

        print("amobiAd Close")

    }

Với các banner khác bạn chỉ cần thay tham số BannerSize, set lại vị trí của quảng cáo tương thích với từng màn hình trong khi khởi tạo :

adView = AmobiAdView(bannerSize:SizeFullScreen)

Với banner loại banner size:

    SizeFullScreen,

    Size300x250,

    Size320x50


 

Bước 1: Sau khi tải xong vào project trong elipse tạo thư mục resources. Sau đó copy các file resource, ảnh và plist, trừ file libAmobiSDKxxx.a trong thư mục AmobiSDKV2.3 vào trong thư mục.

 

Bước 2: Bạn mở file AmobiInfo.plist trong resource và thay bằng widget-code của bạn. Chi tiết về việc tạo widget-code xem tại đây.

Widget Code được tạo ra khi bạn tạo ứng dụng trên hệ thống Amobi theo như hướng dẫn Tại đây .

Chú ý rằng mỗi một ứng dụng chỉ được sử dụng 1 Widget Code và ngược lại.

 

Bước 3: Thêm các framework cần thiết trong robovm.xml 
Với thẻ <frameworks> thêm: CoreGraphics, UIKit, OpenGLES, QuartzCore, OpenAL. AudioToolbox. CFNetwork, AVFoundation, CoreMedia, Foundation, MediaPlayer, SystemConfiguration
Với thẻ <weakFrameworks> thêm: AdSupport, StoreKit
 
<frameworks>
  <framework>CoreGraphics</framework>
  <framework>UIKit</framework>
  <framework>
OpenGLES</framework>
  <framework>
QuartzCore</framework>
  <framework>OpenAL</framework>
  <framework>AudioToolbox</framework>
  <framework>
CFNetwork</framework>
  <framework>
AVFoundation</framework>
  <framework>CoreMedia</framework>
  <framework>Foundation</framework>
  <framework>
MediaPlayer</framework>
  <framework>
SystemConfiguration</framework>
</frameworks>
<weakFrameworks>
  <framework>AdSupport</framework>
  <framework>
StoreKit</framework>
</weakFrameworks>
 
 

Bước 4: Khai báo thêm thẻ <resource> trong robovm.xml:

<resources>
  <ressource>
    <directory>resources</directory>
    <skipPngCrush>true</skipPngCrush>
  </resource>    
</resources>

 

Bước 5: Copy file libAmobiSDKxxx.a vào trong thư mục và khai báo thêm thẻ <lib> trong robovm.xml:

<libs>
  <lib>build/libs/ios/libAmobi23.a</lib>
</libs>

 

Bước 6: Thêm 2 file vào trong package của project:

AmobiAdView.java: nếu muốn gắn quảng cáo banner.

AmobiVideoAd.java: nếu muốn gắn quảng cáo video.

 

Bước 7: Gắn quảng cáo Banner:

// Khởi tạo bannerView:
AmobiAdView  bannerView = new AmobiAdView(BannerSize. SizeFullScreen);

// Gắn bannerView vào giao diện:
rootViewController.getView().addSubview(bannerView);

// 
Hiển thị quảng cáo: 
bannerView.loadAd();

// 
Ẩn quảng cáo gọi:
bannerView.setHidden(true);

// Quảng cáo chèn nội dung: 
bannerView.loadAd(bannerSize);

 

Để bắt các sự kiện liên quan đến quảng cáo, thì implements AmobiBannerDelegate, và sử dụng các hàm Delegate sau: 

// Tải quảng cáo thành công
@Override
@Method(selector = "adViewLoadSuccess:")
public void adViewLoadSuccess(AmobiAdView amobiAdView) {
  // TODO Auto-generated method stub
  Gdx.app.log("adViewLoadSuccess ", "adViewLoadSuccess");
}

// Không có quảng cáo hoặc lỗi mạng

@Override
@Method(selector = "adViewLoadError:")
public void adViewLoadError(AmobiAdView amobiAdView) {
  
// TODO Auto-generated method stub
  
Gdx.app.log("adViewLoadError ", "adViewLoadError");
}

// Nhấn nút close đóng quảng cáo

@Override
@Method(selector = "adViewClose:")
public void adViewClose(AmobiAdView amobiAdView) {
  // TODO Auto-generated method stub
  Gdx.app.log("adViewClose ", "adViewClose");
}

 

Bước 8: Gắn quảng cáo video:

// Khởi tạo videoAd:
AmobiVideoAd videoAd = new AmobiVideoAd();
videoAd.setDelegate(this);
videoAd.prepare();

 

Để bắt các sự kiện quảng cáo thì implements AmbVideoAdDelegate:

// quảng cáo đã tải thành công
@Override
@Method(selector = "onAdAvailable:")
public void onAdAvailable(AmobiVideoAd amobiAdView) {
  videoAd.playVideo(rootViewController);
  Gdx.app.log("onAdAvailable ", "onAdAvailable");
}


// bắt đầu chạy quảng cáo
@Override
@Method(selector = "onAdStarted:")
public void onAdStarted(AmobiVideoAd amobiAdView) {
  // bắt đầu chạy quảng cáo
  Gdx.app.log("onAdStarted ", "onAdStarted");
}


// kết thúc quảng cáo
@Override
@Method(selector = "onAdFinished:")
public void onAdFinished(AmobiVideoAd amobiAdView) {
  
Gdx.app.log("onAdFinished ", "onAdFinished" + isVideoAds);
}


// quảng cáo không có
@Override
@Method(selector = "onPrepareError:")
public void onPrepareError(AmobiVideoAd amobiAdView) {
  Gdx.app.log("onPrepareError ", "onPrepareError" + isVideoAds);
}

 

Tối ưu hiển thị



Để tăng fillrate hiển thị quảng cáo, bạn có thể xử lý hiển thị banner khác thay thế khi mỗi loại banner không có chiến dịch quảng cáo theo mô hình như sau:

  • Ưu tiên hiển thị Mobile TVC (Video Ads) trước tiên.
  • Hiện Banner Full Screen thay thế cho Video Ads khi không có quảng cáo Video Ads bằng cách bắt hàm  (void) onPrepareError:(AmobiVideoAd*) adView
  • Hiện Banner Pop-up 300x250 thay thế cho Full Screen khi không có quảng cáo Full Screen bằng cách bắt hàm - (void) adViewLoadError:(AmobiAdView*) amobiAdView


Cụ thể minh họa bằng sơ đồ hoạt động sau

 

(Nhấn hình để phóng to)

 Tin liên quan