Flutter广告集成插件nestads_dev的使用
Flutter广告集成插件nestads_dev的使用
在本教程中，我们将介绍如何在Flutter项目中使用nestads_dev插件来集成广告。该插件允许开发者实时跟踪和管理数据。
下载
你可以通过以下方式将nestads_dev添加到你的pubspec.yaml文件中：
dependencies:
nestads_dev: ^1.0.0 # 请检查最新的版本号
然后运行flutter pub get命令以安装依赖。
初始化
首先，确保在main.dart文件中初始化插件。以下是初始化步骤的示例代码：
import 'package:flutter/material.dart';
import 'package:nestads_dev/nestads_dev.dart';
import 'package:visibility_detector/visibility_detector.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
// 初始化插件
await NestAds.instance
.initialize(userId: '6fbfb26a-fdff-40ff-9722-269def2e72ad', deviceInfo: {
'osName': 'Android',
'deviceBrand': 'samsung',
'deviceModel': 'SM-S926N',
});
// 设置跟踪日志选项
NestAds.instance.setTrackingLogOptions(size: 10, duration: 5);
runApp(SampleApp());
}
主要页面
接下来，我们创建一个简单的应用结构，包括主页和广告页面。
主页
主页提供了一个按钮，点击后可以跳转到广告页面。
class SampleApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('NestAds')),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => AdsPage()),
);
},
child: Text('广告页面'),
),
),
);
}
}
广告页面
广告页面展示了多个广告事件，并处理用户的点击和滚动行为。
class AdsPage extends StatelessWidget {
final List<Map<String, dynamic>> events = List.generate(
100,
(index) {
return {
'request_id': index.toString(),
'event_id': index.toString(),
'placement_id': index.toString(),
"impression_order": index + 1,
'misc': {
"request_id": index.toString(),
"impression_order": index + 1,
"model_version": "v1"
}
};
},
);
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('广告事件页面')),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // 2个并排
childAspectRatio: 1.0, // 正方形
mainAxisSpacing: 50.0, // 竖直间距
),
itemCount: events.length, // 事件数量
itemBuilder: (context, index) {
final event = events[index];
return VisibilityDetector(
key: Key('ad-${event['event_id']}'),
onVisibilityChanged: (visibilityInfo) {
if (visibilityInfo.visibleFraction >= 0.5) {
if (index < 50) {
// 处理带有响应的事件日志收集
NestAds.instance.sendTrackingLog(
type: 'VIEW',
eventId: event['event_id'],
placementId: event['placement_id'],
misc: event['misc'],
);
} else {
// 处理不带响应的事件日志收集
NestAds.instance.sendTrackingLog(
type: 'VIEW',
requestId: event['request_id'],
eventId: event['event_id'],
placementId: event['placement_id'],
impressionOrder: event['impression_order']);
}
}
},
child: GestureDetector(
onTap: () {
// 处理点击事件
if (index < 50) {
// 处理带有响应的事件日志收集
NestAds.instance.sendTrackingLog(
type: 'ENTER',
eventId: event['event_id'],
placementId: event['placement_id'],
misc: event['misc']);
} else {
// 处理不带响应的事件日志收集
NestAds.instance.sendTrackingLog(
type: 'ENTER',
requestId: event['request_id'],
eventId: event['event_id'],
placementId: event['placement_id'],
impressionOrder: event['impression_order']);
}
Navigator.push(
context,
MaterialPageRoute(builder: (context) => AdDetailPage(event: event)),
);
},
child: Container(
margin: EdgeInsets.all(8.0),
color: Colors.blueAccent,
child: Center(
child: Text(
'事件\n${event['event_id']}',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
),
);
},
),
);
}
}
详细页面
广告详细页面展示了广告的详情，并提供了进一步的操作。
class AdDetailPage extends StatelessWidget {
final Map<String, dynamic> event;
AdDetailPage({required this.event});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('广告详情页面')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'事件 ${event['event_id']}\n',
style: TextStyle(fontSize: 24),
textAlign: TextAlign.center,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
int eventId = int.parse(event['event_id']);
// 处理正在进行的事件
if (eventId < 50) {
// 处理带有响应的事件日志收集
NestAds.instance.sendTrackingLog(
type: 'INPROGRESS',
eventId: event['event_id'],
placementId: event['placement_id'],
misc: event['misc'],
);
} else {
// 处理不带响应的事件日志收集
NestAds.instance.sendTrackingLog(
type: 'INPROGRESS',
requestId: event['request_id'],
eventId: event['event_id'],
placementId: event['placement_id'],
impressionOrder: event['impression_order']);
}
},
child: Text('参与进度'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
int eventId = int.parse(event['event_id']);
// 处理完成事件
if (eventId < 50) {
// 处理带有响应的事件日志收集
NestAds.instance.sendTrackingLog(
type: 'COMPLETE',
eventId: event['event_id'],
placementId: event['placement_id'],
misc: event['misc'],
);
} else {
// 处理不带响应的事件日志收集
NestAds.instance.sendTrackingLog(
type: 'COMPLETE',
requestId: event['request_id'],
eventId: event['event_id'],
placementId: event['placement_id'],
impressionOrder: event['impression_order']);
}
},
child: Text('奖励领取'),
),
],
),
),
);
}
}
更多关于Flutter广告集成插件nestads_dev的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter广告集成插件nestads_dev的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个关于如何在Flutter项目中集成并使用nestads_dev插件来展示广告的示例代码。请注意，在实际项目中，你需要替换相关的广告位ID和配置，以确保广告能正确展示。
首先，确保你已经在pubspec.yaml文件中添加了nestads_dev依赖：
dependencies:
flutter:
sdk: flutter
nestads_dev: ^最新版本号 # 请替换为实际的最新版本号
然后运行flutter pub get来安装依赖。
接下来，在你的Flutter项目中，你可以按照以下步骤来集成广告。
1. 初始化广告SDK
在你的应用入口文件（通常是main.dart）中初始化广告SDK。假设你使用的是开屏广告（Splash Ad）：
import 'package:flutter/material.dart';
import 'package:nestads_dev/nestads_dev.dart';
void main() {
// 初始化广告SDK
NestAds.instance.init(
appId: "你的AppID", // 替换为你的实际AppID
debug: true, // 是否为调试模式
onInitSuccess: () {
print("广告SDK初始化成功");
},
onInitFail: (String error) {
print("广告SDK初始化失败: $error");
},
);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('NestAds Demo'),
),
body: Center(
child: MyHomePage(),
),
),
);
}
}
2. 展示开屏广告
在需要展示开屏广告的地方（比如应用的启动页面），你可以这样写：
import 'package:flutter/material.dart';
import 'package:nestads_dev/nestads_dev.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
super.initState();
// 展示开屏广告
showSplashAd();
}
void showSplashAd() {
NestAds.instance.loadSplashAd(
adUnitId: "你的开屏广告位ID", // 替换为你的实际广告位ID
listener: (AdStatus status, {String? errorMsg}) {
if (status == AdStatus.loaded) {
// 广告加载成功，展示广告
NestAds.instance.showSplashAd(() {
// 广告展示结束后的回调
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => NextPage()),
);
});
} else if (status == AdStatus.failedToLoad) {
// 广告加载失败
print("开屏广告加载失败: $errorMsg");
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => NextPage()),
);
}
},
);
}
@override
Widget build(BuildContext context) {
return Container(
child: CircularProgressIndicator(), // 在广告加载时显示加载指示器
);
}
}
class NextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('下一页'),
),
body: Center(
child: Text('广告已展示，进入下一页'),
),
);
}
}
3. 其他广告类型
对于其他类型的广告，如插屏广告（Interstitial Ad）或横幅广告（Banner Ad），你可以参考官方文档和SDK提供的API进行集成。以下是一个展示插屏广告的示例：
void showInterstitialAd() {
NestAds.instance.loadInterstitialAd(
adUnitId: "你的插屏广告位ID", // 替换为你的实际广告位ID
listener: (AdStatus status, {String? errorMsg}) {
if (status == AdStatus.loaded) {
// 广告加载成功，展示广告
NestAds.instance.showInterstitialAd();
} else if (status == AdStatus.failedToLoad) {
// 广告加载失败
print("插屏广告加载失败: $errorMsg");
}
},
);
}
你可以在适当的时机调用showInterstitialAd方法来展示插屏广告。
注意事项
- 确保你已经在广告平台（如NestAds）上注册并获取了相关的AppID和广告位ID。
- 在发布应用前，请将
debug模式设置为false。 - 遵循广告平台的政策和指南，确保广告的合规性。
以上代码提供了一个基本的集成框架，你可以根据实际需求进行扩展和修改。
