Flutter广告集成插件flutter_pangle_ads的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter广告集成插件 flutter_pangle_ads 的使用

🚀 核心功能

  • ✅ 开屏广告
  • ✅ 插屏广告
  • ✅ 激励视频
  • ✅ Banner
  • ✅ 信息流
  • 🦥 预缓存(预加载,极速展示) 🎁 Pro 版
  • 🏆 实时价格 eCPM(上报归因,买量更有效)🎁 Pro 版

📃 接入文档

📣 请升级到 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
}

注意事项

  1. 确保依赖安装正确:在 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

1 回复

更多关于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");
      }
    });
  }
}

注意事项

  1. 广告位ID:确保你使用的是正确的广告位ID。
  2. 权限:确保在Android和iOS项目中配置了必要的权限。
  3. 调试:在开发阶段,将debug参数设置为true以便调试,但在生产环境中应设置为false

以上就是在Flutter项目中集成和使用flutter_pangle_ads插件的详细步骤和代码示例。希望对你有所帮助!

回到顶部