关键词:
前言
上篇文章我们聊了国内各大广告平台对 Flutter 的支持程度和我为什么创建 FlutterAds 来构建优质的 Flutter 广告插件,帮助开发者获利。
本篇我们来看看Flutter 穿山甲广告插件 flutter_pangle_ads 的集成和使用。
移动端广告形式
在移动端大体分为 5 种广告形式,分别是 开屏
、插屏
、Banner
、信息流
、激励视频
。随着短视频的崛起,出现了新的全屏视频
和前面 5 种的混入视频形式
。
集成广告插件
- Flutter 穿山甲广告插件 flutter_pangle_ads
插件特点
- 🔨 接入简单快速(封装原生端配置,仅需引入即可开始)
- ♻️ 同时支持 Flutter 1x 和 2x 版本
- 📡 事件统一返回(将原生端各种重要回调事件统一返回,方便业务处理和埋点统计等需求)
- 🎁 注重优化体验(无闪烁 Logo 开屏、iOS 开屏防止事件穿透、权限申请、隐私跟踪申请、信息流自动适配宽高等)
- 🏆 极客代码封装(原生端代码不凑合,两端统一基础框架、广告事件封装抽象、易扩展新广告形式、方便开发个性化需求)
支持功能
- ✅ 开屏广告
- ✅ 插屏广告
- ✅ 半插屏
- ✅ 全屏视频(新插屏)
- ✅ 激励视频
- ✅ 全屏视频
- ✅ Banner
- ✅ 信息流
引入依赖
flutter_pangle_ads 支持
Null Safety
和非Null Safety
两个版本
dependencies:
flutter_pangle_ads: ^1.4.0 # 非 Null Safety 版本
flutter_pangle_ads: ^2.4.0 # Null Safety 版本
初始化广告
// 导包
import 'package:flutter_pangle_ads/flutter_pangle_ads.dart';
// [appId] 应用ID
FlutterPangleAds.initAd(appId);
开屏广告
半屏广告 + Logo
/// [posId] 广告位 id
/// [logo] 如果传值则展示底部logo,不传不展示,则全屏展示
/// [timeout] 加载超时时间
/// [buttonType] 开屏广告的点击区域,1:全都可以点击 2:仅有下载 Bar 区域可以点击
FlutterPangleAds.showSplashAd(
posId,
logo: 'flutterads_logo',
timeout: 3.5,
buttonType: 2,
);
全屏开屏广告
FlutterQqAds.showSplashAd(posId);
插屏广告
/// [posId] 广告位 id
/// [width] 请求模板广告素材的尺寸宽度(对应 expressViewWidth 参数)
/// [height] 请求模板广告素材的尺寸高度(对应 expressViewWidth 参数)
FlutterPangleAds.showInterstitialAd(
AdsConfig.interstitialId,
width: 300,
height: 300,
);
全屏视频
- 全屏视频
- 新插屏
/// [posId] 广告位 id
FlutterPangleAds.showFullScreenVideoAd(AdsConfig.fullScreenVideoId);
激励视频
/// [posId] 广告位 id
/// [customData] 设置服务端验证的自定义信息
/// [userId] 设置服务端验证的用户信息
FlutterPangleAds.showRewardVideoAd(
AdsConfig.rewardVideoId,
customData: 'customData',
userId: 'userId',
);
Banner
/// [posId] 广告位 id
/// [width] 创建 Banner 广告位时选择的宽度,默认值是 300
/// [height] 创建 Banner 广告位时选择的高度,默认值是 150
/// [interval] 广告轮播间隔,0 或[30~120]之间的数字,单位为 s,默认为 0 不轮播
/// [show] 是否显示广告
/// [autoClose] 是否自动关闭,一般是在用户点击不感兴趣之后的操作
AdBannerWidget(
posId: AdsConfig.bannerId,
width: 300,
height: 150,
interval: 30,
show: true,
autoClose: true,
);
Banner 是 Widget 直接嵌入Flutter 页面即可,示例如下:
AdBannerWidget(
posId: AdsConfig.bannerId,
),
SizedBox(height: 10),
AdBannerWidget(
posId: AdsConfig.bannerId01,
width: 300,
height: 75,
interval: 30,
show: true,
),
SizedBox(height: 10),
AdBannerWidget(
posId: AdsConfig.bannerId02,
width: 320,
height: 50,
autoClose: false,
),
信息流
- 获取信息流广告列表
/// [posId] 广告位 id
/// [width] 宽度
/// [height] 高度
/// [count] 获取广告数量,建议 1~3 个
List<int> feedAdList = await FlutterPangleAds.loadFeedAd(
AdsConfig.feedId,
width: 375,
height: 128,
count: 3,
);
- 清除信息流广告列表
当你的广告不再需要时,请一定执行清除操作
/// [list] 信息流广告 id 列表
bool result = await FlutterPangleAds.clearFeedAd(feedAdList);
- 页面中展示信息流广告
/// Feed 信息流广告组件
/// [posId]返回的广告 id,这里不是广告位id
/// [width]组件的宽度
/// [height]组件的高度
/// [show]是否显示
AdFeedWidget(
posId: '$feedAdList[0]',
width: 375,
height: 128,
show: true,
)
width
和height
需要根据你新建广告位的模板来设置,但是无论如何都会根据实际渲染的大小来自动适配广告的大小
设置广告事件监听
FlutterPangleAds.onEventListener((event)
// 普通广告事件
String _adEvent = 'adId:$event.adId action:$event.action';
if (event is AdErrorEvent)
// 错误事件
_adEvent += ' errCode:$event.errCode errMsg:$event.errMsg';
else if (event is AdRewardEvent)
// 激励事件
_adEvent +=
' 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)
_adEvent += '仅会员可以关闭广告';
print('onEventListener:$_adEvent');
);
事件列表
事件 | 说明 |
---|---|
onAdLoaded | 广告加载成功 |
onAdPresent | 广告填充 |
onAdExposure | 广告曝光 |
onAdClosed | 广告关闭(开屏计时结束或者用户点击关闭) |
onAdClicked | 广告点击 |
onAdSkip | 广告跳过 |
onAdComplete | 广告播放或计时完毕 |
onAdError | 广告错误 |
onAdReward | 获得广告激励 |
这里做了统一的抽象,iOS 和 Android 原生 SDK 名称不同,如果觉得对应不上,可以提 Issues(一定要加上 log 截图)
更新日志
遇到问题
如果你遇到问题请提 Issues 给我(提问前建议先搜索尝试,没有再提问)
支持开源
支持开源项目最好的方式就是点个免费的 Star ⭐️
FlutterAds 广告插件系列
插件 | 描述 |
---|---|
flutter_qq_ads | 腾讯广告、广点通、优量汇 Flutter 广告插件 |
flutter_pangle_ads | 字节跳动、穿山甲 Flutter 广告插件 |
flutter_gromore_ads | 字节跳动、穿山甲、Gromore 聚合 Flutter 广告插件 |
已开源flutter腾讯优量汇广告插件,帮助开发者获利-flutterads(代码片段)
...(优量汇、广点通、游可赢)❌否字节跳动(穿山甲、GroMore)❌否百度(百青藤)❌否快手❌否SigmobAd❌否UnityAds❌否Mintegral❌否赋能集团✅是(由我提供技术支持)其他聚合平台❓未知需要支持Flu... 查看详情
已开源flutter腾讯优量汇广告插件,帮助开发者获利-flutterads(代码片段)
...(优量汇、广点通、游可赢)❌否字节跳动(穿山甲、GroMore)❌否百度(百青藤)❌否快手❌否SigmobAd❌否UnityAds❌否Mintegral❌否赋能集团✅是(由我提供技术支持)其他聚合平台❓未知需要支持Flu... 查看详情
flutter字节跳动穿山甲广告插件发布-flutterads(代码片段)
前言Flutter已成为目前最流行的跨平台框架之一,在近期的几个大版本的发布中都提到了Flutter版本Google广告插件[google_mobile_ads]。对于“出海”应用选择官方的插件非常稳定方便,对于国内的应用虽然我们的选择比较多ÿ... 查看详情
flutter字节跳动穿山甲广告插件发布-flutterads(代码片段)
...(优量汇、广点通、游可赢)❌否字节跳动(穿山甲、GroMore)❌否百度(百青藤)❌否快手❌否SigmobAd❌否UnityAds❌否Mintegral❌否赋能集团✅是(由我提供技术支持)其他聚合平台❓未知需要支持Flu... 查看详情
flutter字节跳动穿山甲广告插件发布-flutterads(代码片段)
...(优量汇、广点通、游可赢)❌否字节跳动(穿山甲、GroMore)❌否百度(百青藤)❌否快手❌否SigmobAd❌否UnityAds❌否Mintegral❌否赋能集团✅是(由我提供技术支持)其他聚合平台❓未知需要支持Flu... 查看详情
flutter版聚合广告插件(代码片段)
Flutter版聚合广告插件flutter_universalad是一个聚合字节跳动穿山甲广告插件flutter_unionad、腾讯优量汇聚合广告flutter_tencentad插件,方便直接调用多个厂商广告,插件仓库。体验demo集成步骤1、pubspec.yamlflutter_universalad:^0.0.32、引入imp... 查看详情
已开源flutter腾讯优量汇广告插件,帮助开发者获利-flutterads(代码片段)
前言Flutter已成为目前最流行的跨平台框架之一,在近期的几个大版本的发布中都提到了Flutter版本Google广告插件[google_mobile_ads]。对于“出海”应用选择官方的插件非常稳定方便,对于国内的应用虽然我们的选择比较多ÿ... 查看详情
android如何接入穿山甲广告?(代码片段)
...provider配置运行环境配置白名单配置工具类下载SDK首先去穿山甲官网注册账号以及创建应用点击进入平台(我的是创建完账号并且登录之后是这个样子)进来之后是如下界面然后依次点击流量—>应用会进入到以下界面然后点击创... 查看详情
flutter高德地图api使用app内集成定位地图搜索功能(代码片段)
flutter高德地图api使用app内集成定位地图搜索功能amap_all_fluttify插件(现在不知道咋的没有了)这个插件就是集成了amap_map_fluttifyamap_search_fluttifyamap_location_fluttify三个插件分别在pubspec里导入就行main.dart里先注册获取andriod和i... 查看详情
解决穿山甲gromore广告在oppo上报广告病毒android.virus.adcheat.adcut.a(代码片段)
2022年12月13日20:49:54更新不是穿山甲sdk的问题,是游戏在Oppo上架需要接入oppo提供的广告sdk。因为oppo提供的广告sdk也包含了穿山甲的。当我本来只接入Gromore的游戏,再接入oppo的渠道sdk之后,会被oppo识别出修改了他们... 查看详情
解决穿山甲gromore广告在oppo上报广告病毒android.virus.adcheat.adcut.a(代码片段)
2022年12月13日20:49:54更新不是穿山甲sdk的问题,是游戏在Oppo上架需要接入oppo提供的广告sdk。因为oppo提供的广告sdk也包含了穿山甲的。当我本来只接入Gromore的游戏,再接入oppo的渠道sdk之后,会被oppo识别出修改了他们... 查看详情
lemonmob聚合广告sdk
无需上架,接入穿山甲广告和广点通广告sdk我们都知道广告是商业流量变现最重要的方式之一,所以基本所有的游戏或者app都会接入广告sdk,而我们都知道穿山甲广告sdk和广点通广告sdk是国内收益相对比较高的,但是想接入穿山... 查看详情
如何在egretnative中接入穿山甲广告,为开发者营收添砖加瓦(代码片段)
...第三方原生SDK,本文将为开发者介绍如何接入广告系统。穿山甲是字节跳动提供的广告接入SDK,提供了多种广告样式,具体信息可以参见其官方文档。穿山甲平台准备进入穿山甲平台官网,完成注册登录,并按照平台要求完成应... 查看详情
unity接入穿山甲广告sdk(代码片段)
Unity接入穿山甲广告SDK下载安装穿山甲SDK下载导入项目在Unity编辑器中打开您的项目,选择Pangle->MangeSDKs->Upgrade进行版本升级即可,详见截图从unity4100版本开始,通过Upgrade进行版本升级后,需点击Deleteoldfiles按... 查看详情
穿山甲广告sdk手动初始化解决方案(代码片段)
...p官方提出整改建议是,在用户同意隐私协议后在加载穿山甲的广告。研究了一下:2.大概思路是修改原本的UnionApplication.java脚本//手动加载初始化说明://将本脚本文件的内容替换到UnionApplication.java里面//然后将下面的代码... 查看详情
支付插件(谷歌支付)+flutter_stripe 集成
】支付插件(谷歌支付)+flutter_stripe集成【英文标题】:PayPlugin(GooglePay)+flutter_stripeIntegration【发布时间】:2021-11-0308:30:06【问题描述】:我正在尝试将Flutterpayplugin与flutter_stripe包集成。我需要帮助了解如何处理GooglePayAPI返回的Pa... 查看详情
在 Flutter 中,如何将 facebook 受众作为中介网络与 Admob 集成?
】在Flutter中,如何将facebook受众作为中介网络与Admob集成?【英文标题】:Influtter,howtointegratefacebookaudienceasmediationnetworkwithAdmob?【发布时间】:2020-08-0903:37:50【问题描述】:我是广告中介的新手。我有一个颤振应用程序,我使用... 查看详情
在测试 Web 集成时,如何让“flutter drive”显示浏览器?
】在测试Web集成时,如何让“flutterdrive”显示浏览器?【英文标题】:HowcanImake`flutterdrive`showthebrowserwhentestingawebintegration?【发布时间】:2021-05-2822:32:22【问题描述】:当您在模拟器或设备上使用flutterdrive时,您可以实际看到正在... 查看详情