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

1. Đăng ký và tạo ứng dụng

- Truy cập vào CleverNET và đăng ký tài khoản.

- Vào tab Chức năng → Thêm ứng dụng mới → chọn loại ứng dụng là Android → điền tên app, package name và link store → bấm Save.

Sau khi save thành công → truy cập lại ứng dụng sẽ lấy được Secret key

- Chọn ứng dụng vừa tạo → Tạo mới zone → để lấy Zone App ID.

- Lấy ZoneAppID

2. Cấu hình Gradle

- App-level build.gradle: thêm dependency của CleverNET SDK và okhttp

- Download CleverNET Android SDK và copy vào thư mục libs (bên trong thư mục app) của project

dependencies {
	...
	implementation files('libs/clevernet_android_sdk_1.0.6.jar')
	implementation("com.squareup.okhttp3:okhttp:4.12.0")
}

3. Cập nhật AndroidManifest.xml

- Trong thẻ <application> của file AndroidManifest.xml, chèn meta-data sau :

+ Thay SecretKey của bạn vào thẻ meta-data clevernet.ad.application.identifier

+ Thay ZoneAPPID của bạn vào thẻ meta-data clevernet_site_token

- Thêm các quyền cần thiết cho SDK

<manifest>
	...
	<uses-permission android:name="android.permission.INTERNET" />
	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
	<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
	<uses-permission android:name="android.permission.VIBRATE" />

 	<application>
 		<meta-data android:value=" " android:name="clevernet_site_token" />
		<meta-data android:value=" " android:name="clevernet.ad.application.identifier" />
  	</application>
</manifest>

4. Khởi tạo SDK

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height=" match _parent"
	android:orientation="vertical">

<TextView
	android:layout_width=" wrap_content "
	android:layout_height="wrap_content"
	android:text="@string/hello" />

<vn.clevernet.android.sdk.ClevernetView
	android:id="@+id/cadad"
	android:layout_width=" wrap_content " 
	android:layout_height="wrap_content"
/>
</LinearLayout>

import vn.clevernet.android.sdk.ClevernetView;
import vn.clevernet.android.sdk.ClevernetViewCallbackListener;

public class MainActivity extends Activity implements ClevernetViewCallbackListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
    }

    @Override
    public void onLoaded(boolean succeed, ClevernetView clevernetView) {
        System.out.println("Quảng cáo load thành công");
    }

    @Override
    public void onContentReady(double actualWidth, double actualHeight, boolean succeed, ClevernetView clevernetView) {
	    System.out.println("onContentReady " + actualWidth + "   " + actualHeight);
    }

    @Override
    public void onError(Exception exception) {
        System.out.println("Quảng cáo load lỗi");
    }

    @Override
    public void onIllegalHttpStatusCode(int statusCode, String message) {}

    @Override
    public void onAdClicked() {
        System.out.println("Có click vào quảng cáo");
    }

    @Override
    public void onAdClosed() {}

    @Override
    public void onApplicationPause() {}

    @Override
    public void onApplicationResume() {}
}
  

import vn.clevernet.android.sdk.ClevernetView
import vn.clevernet.android.sdk.ClevernetViewCallbackListener

class MainActivity : AppCompatActivity(), ClevernetViewCallbackListener {

    override fun onCreate(savedInstanceState: Bundle?) {
        ...
    }

    override fun onLoaded(p0: Boolean, p1: ClevernetView?) {
        Log.d("MainActivity", "ClevernetView đã load thành công")
    }

    override fun onContentReady(success: Boolean, clevernetView: ClevernetView?, actualWith: Double, actualHeight: Double) {
        Log.d("MainActivity", "ClevernetView đã hiện thành công")
    }

    override fun onError(p0: Exception?) {
        Log.d("MainActivity", "ClevernetView onError")
    }

    override fun onIllegalHttpStatusCode(p0: Int, p1: String?) {
        Log.d("MainActivity", "ClevernetView onIllegalHttpStatusCode")
    }

    override fun onAdClicked() {
        Log.d("MainActivity", "ClevernetView onAdClicked")
    }

    override fun onAdClosed() {
        Log.d("MainActivity", "ClevernetView onAdClosed")
    }

    override fun onApplicationPause() {
        Log.d("MainActivity", "ClevernetView onApplicationPause")
    }

    override fun onApplicationResume() {
        Log.d("MainActivity", "ClevernetView onApplicationResume")
    }
}
  

ClevernetView clevernetView = (ClevernetView)findViewById(R.id.cadad);
clevernetView.setCleverNetViewCallbackListener(this); 
clevernetView.setZoneAppID("TEST_BANNER_MMA"); //Optional : Giá trị mặc định lấy từ clevernet_site_token trong AndroidManifest.xml ở bước 3
clevernetView.loadAd(false);

val clevernetView = findViewById(R.id.cadad)
clevernetView.setCleverNetViewCallbackListener(this)
clevernetView.setZoneAppID("TEST_BANNER_MMA")
clevernetView.loadAd(false)

5. Hiển thị quảng cáo FullScreen

- Thiết lập zone quảng cáo fullscreen và gọi hàm loadOneAd

RelativeLayout layout = findViewById(R.id.main);
ClevernetView clevernetView = new ClevernetView(this);
layout.addView(clevernetView);
clevernetView.setCleverNetViewCallbackListener(this);
clevernetView.setZoneAppID("TEST_BANNER_FULLSCREEN");
clevernetView.loadOneAd(true);

val layout = findViewById(R.id.main)
val clevernetView = ClevernetView(this)
layout.addView(clevernetView)
clevernetView.setCleverNetViewCallbackListener(this)
clevernetView.setZoneAppID("TEST_BANNER_FULLSCREEN")
clevernetView.loadOneAd(true)

- Trường hợp muốn chuẩn bị trước dữ liệu sau đó hiển thị:

//set zoneId, Set callback, …
clevernetView.setCustomEventInterstitial(true);
clevernetView.loadOneAd(true);
//Khi muốn hiển thị quảng cáo fullscreen đã chuẩn bị sẵn, gọi hàm:
clevernetView.showAd();
							

//set zoneId, Set callback, …
clevernetView.isCustomEventInterstitial = true 
clevernetView.loadOneAd(true) 
//Khi muốn hiển thị quảng cáo fullscreen đã chuẩn bị sẵn, gọi hàm:
clevernetView.showAd()

6. Quảng cáo Expand, Inline, Video

- Tương tự cách hiển thị giống với quảng cáo fullscreen, ngoài ra các loại quảng cáo này còn cần set layout cho ClevernetView. Ví dụ:

RelativeLayout layout = findViewById(R.id.main); 
ClevernetView clevernetView = new ClevernetView(this); 
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams( 
	RelativeLayout.LayoutParams.WRAP_CONTENT,
	RelativeLayout.LayoutParams.WRAP_CONTENT
);
params.addRule(RelativeLayout.CENTER_HORIZONTAL);
clevernetView.setLayoutParams(params); 
layout.addView(clevernetView);
clevernetView.setCleverNetViewCallbackListener(this); 
clevernetView.setZoneAppID(“zoneID”); 
clevernetView.loadOneAd(false);
							

var layout = findViewById(R.id.main)
var clevernetView = ClevernetView(this)
val params = RelativeLayout.LayoutParams(
	RelativeLayout.LayoutParams.WRAP_CONTENT,
	RelativeLayout.LayoutParams.WRAP_CONTENT
)
params.addRule(RelativeLayout.CENTER_HORIZONTAL)
clevernetView.setLayoutParams(params);
layout.addView(clevernetView)
clevernetView.setCleverNetViewCallbackListener(this)
clevernetView.setZoneAppID("zoneID")
clevernetView.loadOneAd(false)

- Để chuyển bị trước dữ liệu cách làm tương tự với quảng cáo fullscreen, cần setCustomEventInterstitial là true và gọi hàm showAd() để hiển thị

- Các ZoneAppID để thử nghiệm:

• + Expand: TEST_BANNER_EXPAND
• + Inline: TEST_BANNER_INLINE
• + Video: TEST_BANNER_VIDEO

7. Cấu hình nâng cao

- LoadAd (boolean includeFullScreen): Thường dùng cho kiểu banner MMA. Tự động lấy banner và hiển thị theo chu kỳ (giây). Tham số includeFullScreen cấu hình lấy hoặc ko lấy banner fullscreen

- LoadOneAd(boolean onlyFullScreen): Thường dùng cho FULLSCREEN. Thực hiện lấy banner và không có chu kỳ tự động. Tham số onlyFullScreen cấu hình chỉ lấy fullscreen hoặc cả banner khác

- setZoneAppID: Dùng để thiết lập zoneAppID trong Runtime

- Thiết lập tham số: (Không bắt buộc) Có thể thiết lập các giá trị truyền lên để hiện thị quảng cáo theo ý muốn: setAge, setGender, setLocation ...

- setRefreshTime: Kết hợp với cấu hình trên server để tự động thiết lập chu kỳ refresh quảng cáo (15 - 20 - 30... giây) dưới SDK

- setHeight: Thiết lập chiều cao quảng cáo dưới SDK

- setWidth: Thiết lập chiều rộng quảng cáo dưới SDK

- Zone mẫu có sẵn: TEST_BANNER_MMA, TEST_BANNER_FULLSCREEN

...

- và nhiều hàm nâng cao khác hoặc customize riêng cho app của bạn xin liên hệ với support để được trợ giúp

1. Đăng ký và tạo ứng dụng

- Truy cập vào CleverNET và đăng ký tài khoản.

- Vào tab Chức năng → Thêm ứng dụng mới → chọn loại ứng dụng là IOS → điền tên app và link store → bấm Save.

- Chọn ứng dụng vừa tạo → Tạo mới zone → để lấy Zone App ID.

- Lấy ZoneAppID

2. Import SDK

- Download CleverNET iOS SDK và thêm CleverNet-iOS-SDKLib-1.0.xcframework vào Project của bạn

- Bước 1: Bấm chuột phải vào Project chọn "Add Files to ..."

- Bước 2: Chọn thư mục CleverNet-iOS-SDKLib-1.0.xcframework (tải ở trên) và bấm nút Add

3. Add Frameworks cần thiết

- Chọn Project → Chọn Target → Chọn tab Build Phase → Chọn Link Binary With Libraries → Bấm dấu (+)

- Thêm các Frameworks cần thiết cho SDK

1. WebKit.framework
2. AdSupport.framework
3. CoreGraphics.framework
4. CoreTelephony.framework
5. QuartzCore.framework
6. SystemConfiguration.framework
7. CoreLocation.framework
8. UIKit.framework
9. Foundation.framework

- Ảnh mẫu

4. Cập nhật Info.plist

Trong file Runner/Info.plist của ứng dụng, hãy thêm key CleverNetAdApplicationIdentifier có giá trị là Secret Key khi bạn tạo ứng dụng trên hệ thống CleverNet

<key>CleverNetAdApplicationIdentifier</key>
<string>value_secret_key</string>

5. Khởi tạo SDK

✓	File CleverNetViewDelegate.m :

#import "CleverNetViewDelegate.h"

@implementation CleverNetViewDelegate

@synthesize mappId;

#pragma mark -
#pragma mark CleverNetDelegateProtocol Methods

- (void)dealloc
{
    if (mappId) {
        [mappId release];
        mappId = nil;
    }

    [super dealloc];
}

- (void)setAppID:(NSString *) appID{
    mappId = appID;
}

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

- (bool) debugEnabled {
    return true;
}

- (bool) customEventEnabled {
    return false;
}

- (bool) CustomEventInterstitialEnabled {
    return false;
}

- (double) durationOfBannerAnimation{
    return 5.0;
}

- (UIColor *) textAdBackGroundColor{
    return [UIColor clearColor];
}

- (UIColor *) textlabelColor{
    return [UIColor whiteColor];
}

- (CleverNetAnimationClass) bannerAnimationType{
    return fade;
}

- (bool) downloadTrackerEnabled {
    return YES;
}

#pragma mark -
#pragma mark CleverNetView Callbacks

- (void)adViewDidReceiveAd:(CleverNetView *)adView {
    NSLog(@"adViewDidReceiveAd delegate");
}

- (void)adView:(CleverNetView *)view didFailToReceiveAdWithError:(NSError *)error {
    NSLog(@"didFailToReceiveAdWithError delegate");
}

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

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

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

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

- (void)adViewDidClickAd:(CleverNetView *)adView{
    NSLog(@"adViewDidClickAd delegate");
}

- (void)onContentReady:(CleverNetView *)adView actualWidth:(double)actualWidth actualHeight:(double)actualHeight succeed:(bool)succeed {
    NSLog(@"View width: %.2f, height: %.2f", actualWidth, actualHeight);
}

@end

import Foundation
import UIKit

@objc class CleverNetViewDelegate: NSObject, CleverNetDelegationProtocol {
    @objc var mappId: String?

    @objc func setAppID(_ appID: String) {
        self.mappId = appID
    }

    @objc func appId() -> String {
        return mappId ?? "TEST_BANNER_MMA"
    }

    @objc func debugEnabled() -> Bool {
        return true
    }

    @objc func customEventEnabled() -> Bool {
        return false
    }

    @objc func customEventInterstitialEnabled() -> Bool {
        return false
    }

    @objc func durationOfBannerAnimation() -> Double {
        return 5.0
    }

    @objc func textAdBackGroundColor() -> UIColor {
        return UIColor.clear
    }

    @objc func textlabelColor() -> UIColor {
        return UIColor.white
    }

    @objc func bannerAnimationType() -> CleverNetAnimationClass {
        return CleverNetAnimationClass(rawValue: leftToRight.rawValue)
    }

    @objc func downloadTrackerEnabled() -> Bool {
        return true
    }

    @objc func age() -> String {
        return "21"
    }

    @objc func gender() -> String {
        return "M"
    }

    @objc func getAdvertisingId() -> String {
        return ""
    }

    @objc func setUserID() -> String {
        return ""
    }

    @objc func setAge() -> NSNumber? {
        return 18
    }

    @objc func setGender() -> NSNumber? {
        return 0
    }

    @objc func setCity() -> String? {
        return "Hà Nội"
    }

    @objc func setLanguage() -> String? {
        return "VN"
    }

    @objc func setOS() -> String? {
        return "IOS"
    }

    @objc func setHobby() -> String? {
        return "0,1,2"
    }

    @objc func setRelationship() -> NSNumber? {
        return 0
    }

    @objc func setEducationLevel() -> NSNumber? {
        return 0
    }

    @objc func setJob() -> NSNumber? {
        return 0
    }

    // MARK: - CleverNetView Callbacks

    @objc func adViewDidReceiveAd(_ adView: CleverNetView) {
        print("adViewDidReceiveAd delegate")
    }

    @objc func adView(_ view: CleverNetView, didFailToReceiveAdWithError error: Error) {
        print("didFailToReceiveAdWithError delegate")
    }

    @objc func adViewWillPresentScreen(_ adView: CleverNetView) {}

    @objc func adViewWillDismissScreen(_ adView: CleverNetView) {}

    @objc func adViewDidDismissScreen(_ adView: CleverNetView) {}

    @objc func adViewWillLeaveApplication(_ adView: CleverNetView) {}

    @objc func adViewDidClickAd(_ adView: CleverNetView) {
        print("adViewDidClickAd delegate")
    }

    @objc func onContentReady(adView: CleverNetView, actualWidth: Double, actualHeight: Double, succeed: Bool) {
        print(String(format: "View width: %.2f, height: %.2f", actualWidth, actualHeight))
    }
}
                                      

(void)viewDidLoad {
	[super viewDidLoad];

	CleverNetViewDelegate* clevernetDelegate = [[CleverNetViewDelegate alloc] init];
	[clevernetDelegate setAppID:@"TEST_BANNER_MMA"]; //Thay bằng ZoneAppID của bạn

	CleverNetView* cad = [CleverNetView loadAdWithDelegate:clevernetDelegate secondsToRefresh:60 includeFullscreen:false];
	[cad place_at_x:25 y:50];

	[self.view addSubview:cad];
	[self.view bringSubviewToFront:cad];
}

let cadWidth: CGFloat = 320
let cadX = (screen.width - cadWidth) / 2
let appID = "TEST_BANNER_MMA"
let cleverNetDelegate = CleverNetViewDelegate()
cleverNetDelegate.setAppID(appID)


if let adView = CleverNetView.loadAd(withDelegate: cleverNetDelegate, secondsToRefresh: 60, includeFullscreen: false) {
    adView.place_(at_x: Int32(cadX), y: 50)
    view.addSubview(adView)
    view.bringSubviewToFront(adView)
}
                                     

6. Hiển thị quảng cáo FullScreen

- Thiết lập zone quảng cáo fullscreen và gọi hàm loadOneAdWithDelegate ở bất cứ đâu bạn muốn hiện FullScreen

CleverNetViewDelegate* clevernetDelegate = [[CleverNetViewDelegate alloc] init];
[clevernetDelegate setAppID:@"TEST_BANNER_FULLSCREEN"]; //Thay bằng ZoneAppID của bạn

CleverNetView* cad  = [[CleverNetView alloc] init];
cad = [CleverNetView loadOneAdWithDelegate:clevernetDelegate onlyFullscreen:true];

let appID = "TEST_BANNER_FULLSCREEN"
let delegate = CleverNetViewDelegate()
delegate.setAppID(appID)

_ = CleverNetView.loadOneAd(withDelegate: delegate, onlyFullscreen: true)
                                 

7. Quảng cáo Expand, Inline, Video

- Cách hiển thị tương tự với quảng cáo banner thường, đặc biệt khi ấn có thể mở rộng ra ở dạng popup. Ví dụ:

(void)viewDidLoad {
    [super viewDidLoad];

    NSString *appID = @"TEST_BANNER_EXPAND";  //Thay bằng ZoneAppID của bạn
        CleverNetViewDelegate* clevernetDelegate = [[CleverNetViewDelegate alloc] init];
        [clevernetDelegate setAppID:appID];
    
        CleverNetView* cad = [CleverNetView loadOneAdWithDelegate:clevernetDelegate onlyFullscreen:false];
        [self.view addSubview:cad];
        [self.view bringSubviewToFront:cad];
}

override func viewDidLoad() {
    super.viewDidLoad()
    
    let appID = "TEST_BANNER_EXPAND"  // Thay bằng ZoneAppID của bạn
    
    let clevernetDelegate = CleverNetViewDelegate()
    clevernetDelegate.setAppID(appID)
    
    if let cad = CleverNetView.loadOneAd(withDelegate: clevernetDelegate, onlyFullscreen: false) {
        self.view.addSubview(cad)
        self.view.bringSubviewToFront(cad)
    }
}								
                    	

- Để chuyển bị trước dữ liệu cách làm tương tự với quảng cáo fullscreen, cần CustomEventInterstitialEnabled là true và gọi hàm showAd để hiển thị

- Các ZoneAppID để thử nghiệm:

• + Expand: TEST_BANNER_EXPAND
• + Inline: TEST_BANNER_INLINE
• + Video: TEST_BANNER_VIDEO

8. Cấu hình nâng cao

- (CleverNetView *)loadAdWithDelegate:(id)delegate secondsToRefresh:(int)secondsToRefresh includeFullscreen:(bool)mincludeFullscreen: Thường dùng cho kiểu banner MMA. Tự động lấy banner và hiển thị theo chu kỳ (giây). Tham số includeFullscreen cấu hình lấy hoặc ko lấy banner fullscreen

- (CleverNetView *)loadOneAdWithDelegate:(id)delegate onlyFullscreen:(bool)onlyFullscreen: Thường dùng cho FULLSCREEN. Thực hiện lấy banner và không có chu kỳ tự động. Tham số onlyFullscreen cấu hình chỉ lấy fullscreen hoặc cả banner khác

- (void)setAppID:(NSString *) appID: Dùng để thiết lập zoneAppID trong Runtime

- Thiết lập tham số: (Không bắt buộc) Có thể thiết lập các giá trị truyền lên để hiện thị quảng cáo theo ý muốn: setAge, setGender, setLocation ...

- (NSString *) appId: Lấy giá trị zoneAppID

- (void) setWidth:(int)w Height:(int)h: Thiết lập chiều cao, chiều rộng quảng cáo dưới SDK

- Zone mẫu có sẵn: TEST_BANNER_MMA, TEST_BANNER_FULLSCREEN

...

- và nhiều hàm nâng cao khác hoặc customize riêng cho app của bạn xin liên hệ với support để được trợ giúp

9. Các lỗi thường gặp

- Trong quá trình tích hợp và build ứng dụng bị lỗi. Kiểm tra trong cả project và targets, chọn Build Settings các thông số:

iOS Deployment Target : iOS 12.0 trở lên

Other Linker Flags : -ObjC

1. Đăng ký và tạo ứng dụng

- Truy cập vào CleverNET và đăng ký tài khoản.

- Vào tab Chức năng → Thêm ứng dụng mới → chọn loại ứng dụng là Android/iOS → điền tên app và link store → bấm Save.

Sau khi save thành công → truy cập lại ứng dụng sẽ lấy được Secret key

- Chọn ứng dụng vừa tạo → Tạo mới zone → để lấy Zone App ID.

- Lấy ZoneAppID

- Chú ý thực hiện tạo ứng dụng / tạo zone / tạo ZoneAppID cho đủ các nền tảng mà bạn triển khai flutter. Nếu bạn triển khai cho cả Android và iOS thì bạn cần tạo 02 ứng dụng

2. Yêu cầu hệ thống

- Flutter 3.24.0 trở lên

- Android Studio Ladybug Feature Drop | 2024.2.2 trở lên

- iOS: Xcode Version 16.1 trở lên, với Command-Line Tools đã bật

3. Import plugin

- Download CleverNET Flutter SDK và giải nén → cấu hình pubspec.yaml → flutter pub get

- Với IOS : Từ thư mục gốc của dự án, cd ios và chạy lệnh pod install

dependencies:
	clevernet_sdk:
		path: path_to_clevernet_flutter_sdk_dir/clevernet_flutter_sdk-1.0.6 

4. Thiết lập cho các nền tảng cụ thể

dependencies {
	...
	implementation("com.squareup.okhttp3:okhttp:4.12.0")
}

<manifest>
	...
	<uses-permission android:name="android.permission.INTERNET" />
	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
	<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
	<uses-permission android:name="android.permission.VIBRATE" />

 	<application>
 		<meta-data android:value=" " android:name="clevernet_site_token" />
		<meta-data android:value=" " android:name="clevernet.ad.application.identifier" />
  	</application>
</manifest>

distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-all.zip

4.2 iOS

a. Kiểm tra lại các Frameworks cần thiết

- Chọn Pods → Chọn Target clevernet_sdk → Chọn tab Build Phase → Chọn Link Binary With Libraries → Bấm dấu (+) nếu thiếu

- Các Frameworks cần thiết cho SDK

1. WebKit.framework
2. AdSupport.framework
3. CoreGraphics.framework
4. CoreTelephony.framework
5. QuartzCore.framework
6. SystemConfiguration.framework
7. CoreLocation.framework
8. UIKit.framework
9. Foundation.framework

- Ảnh mẫu

b. Cấu hình Build Settings

- Xcode → Target Runner → Build Settings và đặt"Allow Non-modular Includes In Framework Modules" thành “Yes"

c. Cập nhật Info.plist

Trong file ios/Runner/Info.plist của ứng dụng, hãy thêm key CleverNetAdApplicationIdentifier có giá trị là Secret Key khi bạn tạo ứng dụng trên hệ thống CleverNet

<key>CleverNetAdApplicationIdentifier</key>
<string>value_secret_key</string>

5. Khởi tạo SDK

import 'package:clevernet_sdk/clevernet_sdk.dart';

class _MyAppState extends State<MyApp>{
  ClevernetViewCallbackListener? _listener; // Khai báo biến Callback Listener

  @override
  void initState() {
    super.initState();
    initListener(); // Gọi hàm khởi tạo Callback Listener
  }

  Future<void> initListener() async {
    _listener = ClevernetViewCallbackListener(
      onAdLoaded: (ad) {
        debugPrint('debug for flutter: onAdLoaded');
      },
      onContentReady: (ad, actualWidth, actualHeight) {
        debugPrint('debug for flutter: onContentReady $actualWidth $actualHeight');
      },
      onAdClicked: (ad) {
        debugPrint('debug for flutter: onAdClicked');
      },
      onAdFailedToLoad: (ad, error) {
        debugPrint('debug for flutter: onAdFailedToLoad');
        debugPrint(error.message);
      }
    );
  }
}

String getZoneAppID {
	if (Platform.isAndroid) {
		return 'TEST_BANNER_MMA'; //Thay bằng ZoneAppID Android của bạn
	} else if (Platform.isIOS) {
		return 'TEST_BANNER_MMA'; //Thay bằng ZoneAppID iOS của bạn
	} 
}


@override
Widget build(BuildContext context) {
	return MaterialApp(
		home: Scaffold(
			body: Container(
				margin: const EdgeInsets.only(left: 25),
				width: MediaQuery.of(context).size.width,
				child: ClevernetAdWidget(
					zoneAppID: getZoneAppID(), //Cấu hình ZoneAppID
					listener: _listener!, // Cấu hình Callback Listener
					loadOneAd: false, // Cấu hình = FALSE để hiển thị banner MMA
				)
			)
		),
	);
}

6. Hiển thị quảng cáo FullScreen

- Cấu hình loadOneAd = true cho ClevernetAdWidget và thiết lập _showAd = true bất cứ khi nào bạn muốn hiện FullScreen

String getZoneAppID {
	if (Platform.isAndroid) {
		return 'TEST_BANNER_FULLSCREEN'; //Thay bằng ZoneAppID FullScreen Android của bạn
	} else if (Platform.isIOS) {
		return 'TEST_BANNER_FULLSCREEN'; //Thay bằng ZoneAppID FullScreen iOS của bạn
	} 
}

bool _showAd = false; //Biến điều khiển hiển thị fullscreen
void _toggleAd() {
	setState(() {
		_showAd = !_showAd;
	});
}

@override
Widget build(BuildContext context) {
	return MaterialApp(
		home: Scaffold(
			body: Container(
				margin: const EdgeInsets.only(left: 25),
				width: MediaQuery.of(context).size.width,
				child: _showAd? 
					ClevernetAdWidget(
						zoneAppID: getZoneAppID(), //Cấu hình ZoneAppID
						listener: _listener!, // Cấu hình Callback Listener
						loadOneAd: true, // Cấu hình = TRUE cho hiển thị FullScreen
					)
					: SizedBox.shrink(), // không chiếm chỗ khi cần ẩn
			)
		),
	);
}

- Với trường hợp quảng cáo fullscreen muốn chuẩn bị dữ liệu trước:

@override
void initState() {
  super.initState();
  initListener();
  clevernet = ClevernetAd(
      zoneAppID: 'TEST_BANNER_FULLSCREEN', listener: _listener!);
  clevernet.loadOneAd(isFullScreen: true, isCustomInterstitial: true);
}

- Khi muốn hiển thị quảng cáo sử dụng:

clevernet.showAd();

7. Hiển thị quảng cáo Expand, Inline, Video

- Cấu hình loadOneAd = true, isFullscreen = false, includeFullscreen = false cho ClevernetAdWidget (các tham số loadOneAd, isFullscreen, includeFullscreen có giá trị mặc định là false)

@override 
Widget build(BuildContext context) { 
    return MaterialApp( 
        home: Scaffold( 
            body: Container(
                height: MediaQuery.of(context).size.height, //tuỳ chỉnh
                width: MediaQuery.of(context).size.width, //tuỳ chỉnh
                child: ClevernetAdWidget( 
                    zoneAppID: zoneAppID, //Cấu hình ZoneAppID 
                    listener: _listener!, // Cấu hình Callback Listener 
                    loadOneAd: true, // Cấu hình = TRUE
                ) 
            ) 
        )
    ); 
}
							

- Các zoneAppID để thử nghiệm hiển thị quảng cáo:

• + Định dạng Expand: TEST_BANNER_EXPAND
• + Định dạng Inline: TEST_BANNER_INLINE
• + Định dạng Video: TEST_BANNER_VIDEO

8. Cấu hình nâng cao

- Bạn có nhu cầu các hàm nâng cao hoặc customize riêng cho app của bạn xin liên hệ với support để được trợ giúp

9. Các lỗi thường gặp

- Trong quá trình tích hợp và build ứng dụng iOS bị lỗi. Kiểm tra trong cả project và targets, chọn Build Settings các thông số:

iOS Deployment Target : iOS 12.0 trở lên

Other Linker Flags : -ObjC

Allow Non-modular Includes In Framework Modules : Yes

1. Đăng ký và tạo ứng dụng

- Truy cập vào CleverNET và đăng ký tài khoản.

- Vào tab Chức năng → Thêm ứng dụng mới → chọn loại ứng dụng là Android/iOS → điền tên app và link store → bấm Save.

Sau khi save thành công → truy cập lại ứng dụng sẽ lấy được Secret key

- Chọn ứng dụng vừa tạo → Tạo mới zone → để lấy Zone App ID.

- Lấy ZoneAppID

- Chú ý thực hiện tạo ứng dụng / tạo zone / tạo ZoneAppID cho đủ các nền tảng mà bạn triển khai flutter. Nếu bạn triển khai cho cả Android và iOS thì bạn cần tạo 02 ứng dụng

2. Yêu cầu hệ thống

- React-native 0.74.3 trở lên

- Android Studio Ladybug Feature Drop | 2024.2.2 trở lên

- iOS: Xcode Version 16.1 trở lên, với Command-Line Tools đã bật

3. Import plugin

- Download CleverNET React Native SDK và giải nén → cấu hình package.json → chạy yarn install hoặc npm install

- Với Android : Từ thư mục gốc của dự án, cd android và chạy lệnh gradlew clean

- Với IOS : Từ thư mục gốc của dự án, cd ios và chạy lệnh pod install

"dependencies": {
    "clevernet-react-native-sdk": "file:path_to_clevernet_flutter_sdk_dir/clevernet-react-native-sdk",
   ...
  },

4. Thiết lập cho các nền tảng cụ thể

dependencies {
	...
	implementation("com.squareup.okhttp3:okhttp:4.12.0")
}

<manifest>
	...
	<uses-permission android:name="android.permission.INTERNET" />
	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
	<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
	<uses-permission android:name="android.permission.VIBRATE" />

 	<application>
 		<meta-data android:value="TEST_BANNER_MMA" android:name="clevernet_site_token" />
		<meta-data android:value="" android:name="clevernet.ad.application.identifier" />
  	</application>
</manifest>

distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-all.zip

4.2 iOS

a. Kiểm tra lại các Frameworks cần thiết

- Chọn Pods → Chọn Target clevernet-react-native-sdk → Chọn tab Build Phase → Chọn Link Binary With Libraries → Bấm dấu (+) nếu thiếu

- Các Frameworks cần thiết cho SDK

1. WebKit.framework
2. AdSupport.framework
3. CoreGraphics.framework
4. CoreTelephony.framework
5. QuartzCore.framework
6. SystemConfiguration.framework
7. CoreLocation.framework
8. UIKit.framework
9. Foundation.framework

- Ảnh mẫu

b. Cấu hình Build Settings

- Xcode → Target Runner → Build Settings và đặt"Allow Non-modular Includes In Framework Modules" thành “Yes"

c. Cập nhật Info.plist

Trong file ios/Runner/Info.plist của ứng dụng, hãy thêm key CleverNetAdApplicationIdentifier có giá trị là Secret Key khi bạn tạo ứng dụng trên hệ thống CleverNet

<key>CleverNetAdApplicationIdentifier</key>
<string>value_secret_key</string>

5. Khởi tạo SDK

import { ClevernetBannerView, CleverNetModule } from 'clevernet-react-native-sdk';

<ClevernetBannerView
	style={styles.bannerContainer}
	zoneId="TEST_BANNER_MMA"
	onAdLoaded={(e) => console.log('Banner Loaded:', e.success)}
	onAdClicked={() => Alert.alert('Banner Clicked!')}
	/>

6. Hiển thị quảng cáo FullScreen

- Sử dụng CleverNetModule và gọi hàm showFullScreenAd('TEST_BANNER_FULLSCREEN'). Chú ý thay TEST_BANNER_FULLSCREEN bằng ZoneAppID kiểu fullscreen ở bước 1

<View>
  <Text>Fullscreen Ad</Text>
  <Button 
	title="Show Fullscreen Ad" 
	onPress={async () => {
	  try {
		const result = await CleverNetModule.showFullScreenAd('TEST_BANNER_FULLSCREEN');
		} catch (e: any) {
		  Alert.alert('Fullscreen Error', e.message);
		}
	  }} 
  />
</View>

7. Hiển thị quảng cáo Expand, Inline, Video (Đang cập nhật)

8. Cấu hình nâng cao

- Bạn có nhu cầu các hàm nâng cao hoặc customize riêng cho app của bạn xin liên hệ với support để được trợ giúp

9. Các lỗi thường gặp

- Trong quá trình tích hợp và build ứng dụng iOS bị lỗi. Kiểm tra trong target của project và Pods, chọn Build Settings các thông số:

iOS Deployment Target : iOS 12.0 trở lên

Other Linker Flags : -ObjC

Allow Non-modular Includes In Framework Modules : Yes