Flutter广告集成插件flutter_pangle_ads的使用
Flutter广告集成插件 flutter_pangle_ads
的使用
🚀 核心功能
📃 接入文档
📣 请升级到 GroMore
由于穿山甲官方已全面推 Gromore 融合 SDK,后续本插件也将只做小更新,推荐使用 Gromore。Gromore 可进行多家广告瀑布流竞价,让您拥有更高的广告收益。
📌 广告系列插件(FlutterAds)
插件 | 描述 |
---|---|
flutter_gromore_pro | 🏆🏆🏆 帮你大幅提升广告收益,发挥出最大的用户价值 |
flutter_gromore_ads | 字节跳动、穿山甲、GroMore 聚合 Flutter 广告开源版插件 |
flutter_pangle_ads | 字节跳动、穿山甲 Flutter 广告插件 |
flutter_qq_ads | 腾讯广告、广点通、优量汇 Flutter 广告插件 |
flutter_adspark | 巨量广告/穿山甲的广告监测、增长分析、归因上报、事件管理 Flutter 版插件 |
flutter_adcontent | 穿山甲内容输出 Flutter 版插件,支持短剧和小视频 |
示例代码
以下是一个完整的示例 demo,展示了如何使用 flutter_pangle_ads
插件来初始化广告 SDK 并显示开屏广告:
import 'package:flutter/material.dart';
import 'package:flutter_pangle_ads/flutter_pangle_ads.dart';
// 引入配置文件
import 'ads_config.dart';
import 'pages/home_page.dart';
void main() {
// 绑定引擎
WidgetsFlutterBinding.ensureInitialized();
// 设置广告监听
setAdEvent();
// 初始化广告 SDK
init().then((value) {
if (value) {
FlutterPangleAds.showSplashAd(
AdsConfig.splashId,
logo: AdsConfig.logo,
timeout: 3.5,
);
}
});
// 启动应用
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
/// 初始化广告 SDK
Future<bool> init() async {
bool result = await FlutterPangleAds.initAd(
AdsConfig.appId,
directDownloadNetworkType: [
NetworkType.kNetworkStateMobile,
NetworkType.kNetworkStateWifi,
],
);
debugPrint("广告SDK 初始化${result ? '成功' : '失败'}");
// 打开个性化广告推荐
FlutterPangleAds.setUserExtData(personalAdsType: '1');
return result;
}
/// 设置广告监听
Future<void> setAdEvent() async {
FlutterPangleAds.onEventListener((event) {
debugPrint('adId:${event.adId} action:${event.action}');
if (event is AdErrorEvent) {
// 错误事件
debugPrint(' errCode:${event.errCode} errMsg:${event.errMsg}');
} else if (event is AdRewardEvent) {
// 激励事件
debugPrint(
' rewardType:${event.rewardType} rewardVerify:${event.rewardVerify} rewardAmount:${event.rewardAmount} rewardName:${event.rewardName} errCode:${event.errCode} errMsg:${event.errMsg} customData:${event.customData} userId:${event.userId}');
}
// 测试关闭 Banner(会员场景)
if (event.action == AdEventAction.onAdClosed &&
event.adId == AdsConfig.bannerId02) {
debugPrint('仅会员可以关闭广告');
}
});
}
配置文件 ads_config.dart
在实际项目中,你需要创建一个 ads_config.dart
文件,并根据你的广告 ID 进行配置:
class AdsConfig {
static const String appId = 'YOUR_APP_ID'; // 替换为你的应用ID
static const String splashId = 'YOUR_SPLASH_AD_ID'; // 替换为你的开屏广告ID
static const String logo = 'assets/images/logo.png'; // 替换为你的logo路径
static const String bannerId02 = 'YOUR_BANNER_AD_ID'; // 替换为你的Banner广告ID
}
注意事项
- 确保依赖安装正确:在
pubspec.yaml
中添加flutter_pangle_ads
依赖。dependencies: flutter: sdk: flutter flutter_pangle_ads: ^latest_version
更多关于Flutter广告集成插件flutter_pangle_ads的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter广告集成插件flutter_pangle_ads的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中集成和使用flutter_pangle_ads
插件的详细步骤和代码示例。flutter_pangle_ads
是用于集成腾讯广点通(Pangle Ads)广告的Flutter插件。
1. 添加依赖
首先,在你的Flutter项目的pubspec.yaml
文件中添加flutter_pangle_ads
依赖:
dependencies:
flutter:
sdk: flutter
flutter_pangle_ads: ^最新版本号 # 请替换为实际最新版本号
然后运行以下命令来安装依赖:
flutter pub get
2. 配置Android
在android/app/build.gradle
文件中添加以下配置:
android {
...
defaultConfig {
...
manifestPlaceholders = [
TENCENT_AD_APP_ID: "你的腾讯广点通APP ID"
]
}
}
确保你在android/app/src/main/AndroidManifest.xml
中有以下权限配置:
<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.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
3. 配置iOS
在ios/Runner/Info.plist
中添加以下配置:
<key>IOS_AD_APP_ID</key>
<string>你的腾讯广点通APP ID</string>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
在ios/Podfile
中添加以下配置来确保使用正确的Swift版本(如果需要):
platform :ios, '10.0'
4. 初始化并展示广告
在你的Flutter代码中,你可以按照以下方式初始化并展示广告:
import 'package:flutter/material.dart';
import 'package:flutter_pangle_ads/flutter_pangle_ads.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Pangle Ads Example'),
),
body: Center(
child: MyHomePage(),
),
),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late PangleAdManager pangleAdManager;
@override
void initState() {
super.initState();
// 初始化广告管理器
pangleAdManager = PangleAdManager(
appId: "你的腾讯广点通APP ID",
debug: true, // 开发环境设置为true,生产环境设置为false
);
// 加载横幅广告示例
loadBannerAd();
}
void loadBannerAd() {
pangleAdManager.loadBannerAd(
posId: "你的横幅广告位ID",
expressViewWidth: 320,
expressViewHeight: 100,
listener: (PangleAdLoadResult result) {
if (result.code == PangleAdErrorCode.SUCCESS) {
// 广告加载成功,显示广告
showBannerAd(result.adView!);
} else {
// 广告加载失败
print("Banner Ad Load Failed: ${result.msg}");
}
},
);
}
void showBannerAd(BannerAdView bannerAdView) {
setState(() {
// 将广告视图添加到widget树中
_bannerAdView = bannerAdView;
});
}
late BannerAdView? _bannerAdView;
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
if (_bannerAdView != null)
Container(
height: 100,
child: AdWidget(adView: _bannerAdView!),
),
ElevatedButton(
onPressed: () {
// 加载插屏广告示例
loadInterstitialAd();
},
child: Text('Show Interstitial Ad'),
),
],
);
}
void loadInterstitialAd() {
pangleAdManager.loadInterstitialAd(
posId: "你的插屏广告位ID",
listener: (PangleAdLoadResult result) {
if (result.code == PangleAdErrorCode.SUCCESS) {
// 广告加载成功,显示广告
showInterstitialAd(result.adView!);
} else {
// 广告加载失败
print("Interstitial Ad Load Failed: ${result.msg}");
}
},
);
}
void showInterstitialAd(InterstitialAdView interstitialAdView) {
interstitialAdView.show().then((result) {
if (result) {
print("Interstitial Ad Shown Successfully");
} else {
print("Interstitial Ad Show Failed");
}
});
}
}
注意事项
- 广告位ID:确保你使用的是正确的广告位ID。
- 权限:确保在Android和iOS项目中配置了必要的权限。
- 调试:在开发阶段,将
debug
参数设置为true
以便调试,但在生产环境中应设置为false
。
以上就是在Flutter项目中集成和使用flutter_pangle_ads
插件的详细步骤和代码示例。希望对你有所帮助!