Hướng dẫn tích hợp SDK – Nền tảng quảng cáo AI-driven cho ứng dụng di động

Android 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 và link store → bấm Save.

Tạo ứng dụng

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

Tạo zone

- Lấy ZoneAppID

Zone App ID

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.jar')
	implementation(libs.okhttp)
}

3. Cập nhật AndroidManifest.xml

- Trong thẻ <application> của file AndroidManifest.xml, chèn meta-data sau (thay bằng ZoneAPPID của bạn)

- 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" />
	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32" tools:ignore="ScopedStorage"/>
	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />

 	<application>
 		<meta-data android:value=" " android:name="clevernet_site_token" />
  	</application>
</manifest>

4. Khởi tạo SDK

4.1 Cấu hình layout

- Thêm ClevernetView vào layout như mẫu dưới đây

<?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>

4.2 Thiết lập Callback Listener

- Trong file Activity cài đặt ClevernetViewCallbackListener

import vn.clevernet.android.sdk.ClevernetView;
import vn.clevernet.android.sdk.ClevernetView.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 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() {}

@Override
public String getAdvertisingId() {
	return "";
}
}

4.3 Thực hiện LoadAd

- Trong hàm onCreate của Activity

ClevernetView clevernetView = (ClevernetView)findViewById(R.id.cadad);
clevernetView.setCleverNetViewCallbackListener(this); 
clevernetView.setZoneAppID("TEST_BANNER_MMA"); //Optional : Nếu không gọi hàm này thì giá trị sẽ lấy từ clevernet_site_token trong AndroidManifest.xml ở bước 3
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);

6. 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

- 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

iOS 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à IOS → điền tên app và link store → bấm Save.

Tạo ứng dụng

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

Tạo zone

- Lấy ZoneAppID

Zone App ID

2. Import SDK

- Download CleverNET iOS SDK và thêm toàn bộ thư mục SDKLib 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 SDKLib (tải ở trên) và bấm nút Add

Import IOS SDK

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. CleverNet-iOS-SDK-1.0.a
2. WebKit.framework
3. AdSupport.framework
4. CoreGraphics.framework
5. CoreTelephony.framework
6. QuartzCore.framework
7. SystemConfiguration.framework
8. CoreLocation.framework
9. UIKit.framework
10. Foundation.framework

- Ảnh mẫu

Add Frameworks

4. Khởi tạo SDK

4.1 Cài đặt và khởi tạo delegate

- Tạo class Delegate để cấu hình tham số cho SDK và đón nhận các sự kiện CallBack từ SDK

- Kế thừa (inheritance) và cài đặt (implement) giao thức CleverNetDelegationProtocol theo mẫu

✓	File CleverNetViewDelegate.h : 
#import <Foundation/Foundation.h>
#import "CleverNetDelegationProtocol.h"

@interface CleverNetViewDelegate : NSObject <CleverNetDelegationProtocol> {
	- (void)setAppID:(NSString *) appID;
}
@end

---

✓	File CleverNetViewDelegate.m : 
#import "CleverNetViewDelegate.h"

@implementation CleverNetViewDelegate

#pragma mark -
#pragma mark CleverNetDelegateProtocol Methods

NSString *mappId;

- (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;
}

#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");
}

@end

4.2 Thực hiện LoadAd

- Trong (void)viewDidLoad thực hiện khởi tạo CleverNetView và gọi loadAdWithDelegate với delegate trong bước 4.1

(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:5 includeFullscreen:false];
	[cad place_at_x:25 y:50];

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

5. 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 *ad2 = [[CleverNetView alloc] init];
ad2 = [CleverNetView loadOneAdWithDelegate:clevernetDelegate onlyFullscreen:true];
[ad2 release];

6. 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

- (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

7. 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 -all_load

Flutter 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/iOS → điền tên app và link store → bấm Save.

Tạo ứng dụng

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

Tạo ứng dụng

- Lấy ZoneAppID

Tạo ứng dụng

- 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à cấu hình pubspec.yaml → flutter pub get

dependencies:
	clevernet_flutter_sdk:
		hosted:
			name: my_flutter_sdk
			url: file:///full/path/to/clevernet_flutter_sdk-1.0.0.tar.gz
			version: "1.0.0"

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

4.1 Android

a. Cấu hình Gradle

- App-level build.gradle: thêm dependency okhttp

dependencies {
	...
	implementation("com.squareup.okhttp3:okhttp:4.12.0")
}
b. Cập nhật AndroidManifest.xml

- Trong thẻ <application> của file AndroidManifest.xml, chèn meta-data sau (thay bằng ZoneAPPID của bạn)

- 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" />
	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32" tools:ignore="ScopedStorage"/>
	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />

 	<application>
 		<meta-data android:value=" " android:name="clevernet_site_token" />
  	</application>
</manifest>

4.2 iOS

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

Add Frameworks

5. Khởi tạo SDK

5.1 Cài đặt và khởi tạo delegate

- Trong giao diện .dart khởi tạo ClevernetViewCallbackListener

import 'package:clevernet_sdk/clevernet_sdk.dart';
...
class _MyAppState extends State {
	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 initListener() async {
		_listener = ClevernetViewCallbackListener(
			onAdLoaded: (ad) {
				debugPrint('debug for flutter: onAdLoaded');
			},
				
			onAdClicked: (ad) {
				debugPrint('debug for flutter: onAdClicked');
			},
				
			onAdFailedToLoad: (ad, error) {
				debugPrint('debug for flutter: onAdFailedToLoad');
				debugPrint(error.message);
			},
				
			onAdClosed: (ad) {
			},
		);
	}
...
}

5.2 Thực hiện LoadAd

- Tạo ClevernetAdWidget và cấu hình đủ tham số như mẫu

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
				)
			)
		),
	);
}

- Chú thích :

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
			)
		),
	);
}

7. 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

7. 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 -all_load