You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在Flutter中实现Google AdMob的「Open App」广告?

Flutter集成Google AdMob「Open App」广告实现指南

嘿,我之前刚好折腾过AdMob的App Open广告(也就是你说的「Open App」广告),给你梳理下具体实现步骤,亲测可行:

1. 先配置依赖包

首先在你的pubspec.yaml里添加官方的AdMob Flutter插件:

dependencies:
  flutter:
    sdk: flutter
  google_mobile_ads: ^2.4.0 # 建议用pub上的最新版本

然后执行flutter pub get拉取依赖。

2. 初始化AdMob SDK

在App启动的时候初始化SDK,记得替换成你自己的AdMob App ID(在AdMob后台获取):

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 初始化AdMob,这里填你的App ID
  await MobileAds.instance.initialize();
  runApp(const MyApp());
}

另外别忘在原生配置里加App ID:

  • Android:在AndroidManifest.xml<application>标签里添加
    <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    
  • iOS:在Info.plist里添加
    <key>GADApplicationIdentifier</key>
    <string>ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy</string>
    

3. 实现App Open广告核心逻辑

App Open广告主要是在App启动或从后台回到前台时展示,我们可以通过监听App生命周期来触发。下面是完整的示例代码:

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
  AppOpenAd? _appOpenAd;
  bool _isShowingAd = false;
  // 可选:加个时间间隔,避免频繁展示广告(比如1分钟内只展示一次)
  DateTime? _lastAdShownTime;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _loadAppOpenAd();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    _appOpenAd?.dispose();
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 当App从后台回到前台时,判断是否展示广告
    if (state == AppLifecycleState.resumed && !_isShowingAd) {
      final now = DateTime.now();
      if (_lastAdShownTime == null || 
          now.difference(_lastAdShownTime!) > const Duration(minutes: 1)) {
        _showAppOpenAd();
      }
    }
  }

  // 加载App Open广告
  void _loadAppOpenAd() {
    AppOpenAd.load(
      // 测试用的广告单元ID,正式环境替换成你自己的
      adUnitId: 'ca-app-pub-3940256099942544/3419835294',
      request: const AdRequest(),
      adLoadCallback: AppOpenAdLoadCallback(
        onAdLoaded: (ad) {
          setState(() {
            _appOpenAd = ad;
          });
          // 监听广告的全屏事件
          ad.fullScreenContentCallback = FullScreenContentCallback(
            onAdDismissedFullScreenContent: (ad) {
              setState(() {
                _isShowingAd = false;
                _lastAdShownTime = DateTime.now();
              });
              ad.dispose();
              _loadAppOpenAd(); // 加载下一个广告,以备下次展示
            },
            onAdFailedToShowFullScreenContent: (ad, error) {
              debugPrint('广告展示失败: $error');
              ad.dispose();
              _loadAppOpenAd();
            },
          );
        },
        onAdFailedToLoad: (error) {
          debugPrint('广告加载失败: $error');
        },
      ),
      orientation: AppOpenAd.orientationPortrait, // 可选:指定广告方向
    );
  }

  // 展示广告
  void _showAppOpenAd() {
    if (_appOpenAd != null) {
      setState(() {
        _isShowingAd = true;
      });
      _appOpenAd!.show();
    } else {
      // 如果没有已加载的广告,就重新加载
      _loadAppOpenAd();
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('AdMob Open App 示例')),
        body: const Center(child: Text('欢迎使用')),
      ),
    );
  }
}

几个关键注意点

  • 测试与正式环境区分:上面用的是AdMob官方提供的测试广告ID,正式上线前一定要替换成你在AdMob后台创建的App Open广告单元ID,否则会违反AdMob政策。
  • 避免内存泄漏:一定要在dispose方法里移除生命周期监听并销毁广告实例。
  • 用户体验优化:添加时间间隔限制,避免用户频繁切换后台时反复弹出广告,引起反感。
  • 权限配置:Android需要在AndroidManifest.xml里添加INTERNET权限;iOS如果用测试广告,需要在Info.plist里允许HTTP请求(正式环境建议用HTTPS)。

内容的提问来源于stack exchange,提问作者avafab

火山引擎 最新活动