如何在 Flutter 应用中集成谷歌移动广告

Question

flutter 最近宣布发布 Google Mobile Ads for Flutter 一个新的 SDK，它与 AdMob 和 AdManager 一起提供多种广告格式，包括用于 Flutter 的横幅、插页式、原生和奖励视频广告

我想通过 AdMob 展示广告来通过我的 Flutter 应用获利。我们如何在 Flutter 应用中设置和集成谷歌移动广告

Answer 1

适用于 Flutter 的 Google 移动广告 SDK 目前支持加载和显示横幅、插页式（全屏）、原生广告和激励视频广告

将 Google 移动广告 SDK 集成到 Flutter 应用中，您将在此处进行操作

先决条件：https://pub.dev/packages/google_mobile_ads#prerequisites

将 Google 移动广告插件添加为依赖项

将Google Mobile Ads 插件作为依赖项添加到位于项目根目录的pubspec.yaml 文件中。

dependencies:
  google_mobile_ads: ^0.11.0+1

导入到你的 Dart 代码中，你可以使用：

import 'package:google_mobile_ads/google_mobile_ads.dart';

特定平台的设置

iOS

更新您的 Info.plist

1. 在 Android Studio 中打开 ios/Runner/Info.plist 文件。

2. 添加一个带有您的 AdMob 应用 ID (identified in the AdMob UI) 字符串值的 GADApplicationIdentifier 键，如下所示：

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-################~##########</string>

Android

更新AndroidManifest.xml

1. 在 Android Studio 中打开 android/app/src/main/AndroidManifest.xml 文件。

2. 通过添加 <meta-data> 标签并输入 com.google.android.gms.ads.APPLICATION_ID 来添加您的 AdMob 应用 ID。如下所示。您可以在AdMob UI 中找到您的 App ID。对于android:value，请在引号中插入您自己的 AdMob 应用 ID，如下所示。

    <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
    <meta-data
         android:name="com.google.android.gms.ads.APPLICATION_ID"
         android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
   

AdMob 应用 ID 必须包含在 AndroidManifest.xml 中。否则将导致应用启动时崩溃。

初始化移动广告 SDK

在加载广告之前，让您的应用通过调用 MobileAds.instance.initialize() 来初始化 Mobile Ads SDK，这会初始化 SDK 并返回一个 Future，在初始化完成后（或在 30 秒超时后）完成。这只需执行一次，最好是在运行应用程序之前。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    // Load ads.
  }
}

这是一个添加横幅广告供所有人查看googleads-mobile-flutter

BannerAd 需要一个 adUnitId、一个 AdSize、一个 AdRequest 和一个 AdListener。下面显示了一个示例，以及有关每个参数的更多信息。

final BannerAd myBanner = BannerAd(
  adUnitId: '<ad unit id>',
  size: AdSize.banner,
  request: AdRequest(),
  listener: AdListener(),
);

要定义自定义横幅尺寸，请设置所需的 AdSize，如下所示：

final AdSize adSize = AdSize(300, 50);

横幅广告事件

通过使用AdListener，您可以监听生命周期事件，例如关闭广告或用户离开应用。此示例实现了每个方法并将消息记录到控制台：

final AdListener listener = AdListener(
 // Called when an ad is successfully received.
 onAdLoaded: (Ad ad) => print('Ad loaded.'),
 // Called when an ad request failed.
 onAdFailedToLoad: (Ad ad, LoadAdError error) {
   print('Ad failed to load: $error');
 },
 // Called when an ad opens an overlay that covers the screen.
 onAdOpened: (Ad ad) => print('Ad opened.'),
 // Called when an ad removes an overlay that covers the screen.
 onAdClosed: (Ad ad) => print('Ad closed.'),
 // Called when an ad is in the process of leaving the application.
 onApplicationExit: (Ad ad) => print('Left application.'),
);

BannerAd 实例化后，必须先调用 load() 才能在屏幕上显示。

myBanner.load();

要将BannerAd 显示为作为小部件，您必须在调用 load() 后使用支持的广告实例化 AdWidget。您可以在调用 load() 之前创建小部件，但在将其添加到小部件树之前必须调用 load()。

final AdWidget adWidget = AdWidget(ad: myBanner);

AdWidget 继承自 Flutter 的 Widget 类，可用作任何其他小部件。在 iOS 上，确保将小部件放置在具有指定宽度和高度的小部件中。否则，您的广告可能不会展示。 BannerAd 可以放置在尺寸与广告匹配的容器中：

final Container adContainer = Container(
  alignment: Alignment.center,
  child: adWidget,
  width: myBanner.size.width.toDouble(),
  height: myBanner.size.height.toDouble(),
);

最后，通过在dispose()回调方法中调用BannerAd.dispose()方法释放与BannerAd对象关联的资源。

@override
void dispose() {
  // TODO: Dispose BannerAd object
  myBanner?.dispose();
  super.dispose();
}

就是这样！您的应用现在可以展示横幅广告了。

完整示例

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


void main() {
  runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp()));
}

// You can also test with your own ad unit IDs by registering your device as a
// test device. Check the logs for your device's ID value.
const String testDevice = 'YOUR_DEVICE_ID';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  BannerAd _bannerAd;

  @override
  void initState() {
    super.initState();
    _bannerAd = BannerAd(
      adUnitId: BannerAd.testAdUnitId,
      request: AdRequest(),
      size: AdSize.banner,
      listener: AdListener(
        onAdLoaded: (Ad ad) {
          print('$BannerAd loaded.');
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('$BannerAd failedToLoad: $error');
        },
        onAdOpened: (Ad ad) => print('$BannerAd onAdOpened.'),
        onAdClosed: (Ad ad) => print('$BannerAd onAdClosed.'),
        onApplicationExit: (Ad ad) => print('$BannerAd onApplicationExit.'),
      ),
    );

    _bannerAd?.load();
  }

  @override
  void dispose() {
    super.dispose();
    _bannerAd?.dispose();
    _bannerAd = null;
  }

  @override
  Widget build(BuildContext context) {
    final AdWidget adWidget = AdWidget(ad: _bannerAd);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google Mobile Ads'),
        actions: <Widget>[
        ],
      ),
      body: Column(
        children: [
          Align(
            alignment: FractionalOffset.topCenter,
            child: Padding(
                padding: EdgeInsets.only(top: 10.0),
                child: Container(
                  alignment: Alignment.center,
                  child: adWidget,
                  width: _bannerAd.size.width.toDouble(),
                  height: _bannerAd.size.height.toDouble(),
                )
            ),
          )
        ],
      ),
    );
  }
}

Answer 2

第 1 步：将依赖项添加到 pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

  google_mobile_ads: ^0.13.0 #this

第 2 步：在 IOS 中更新 Info.plist 并在 Android 中更新 AndroidManifest.xml

IOS

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
<key>SKAdNetworkItems</key>
  <array>
    <dict>
      <key>SKAdNetworkIdentifier</key>
      <string>cstr6suwn9.skadnetwork</string>
    </dict>
  </array>

适用于安卓

<manifest>
    <application>
        <!-- Sample AdMob App ID: ca-app-pub-3940256099942544~3347511713 -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    </application>
</manifest>

第 2 步：在 main.dart 中初始化移动广告 SDK

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await MobileAds.instance.initialize().then((InitializationStatus status) {
    print('Initialization done: ${status.adapterStatuses}');
    MobileAds.instance.updateRequestConfiguration(
      RequestConfiguration(
          tagForChildDirectedTreatment:
              TagForChildDirectedTreatment.unspecified,
          testDeviceIds: <String>[]),//when you run first time you will get your test id in logs then update it here <String>["test id"]
    );
  });
  runApp(MyApp());
}

第 4 步：在 Admob 中创建广告单元，然后我们就可以实施广告了

第 5 步：确保在 app/build.gradle 文件中启用 multidex

defaultConfig {
        ....
        minSdkVersion 19
        multiDexEnabled true
    }

dependencies {
    ....
    implementation 'com.android.support:multidex:2.0.1'
}

第 6 步：创建 admanager.dart 文件

import 'package:google_mobile_ads/google_mobile_ads.dart';

AdRequest request = AdRequest(
  keywords: <String>[
    'foo',
    'bar',
    'wallpaper',
  ],
  contentUrl: 'URL',
  nonPersonalizedAds: true,
);

final BannerAd myBanner = BannerAd(
  adUnitId: 'ca-app-pub-3166882328175414/3480332744',
  size: AdSize.banner,
  request: request,
  listener: BannerAdListener(
        onAdLoaded: (Ad ad) {
          print('$BannerAd loaded.');
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('$BannerAd failedToLoad: $error');
          ad.dispose();
        },
        onAdOpened: (Ad ad) => print('$BannerAd onAdOpened.'),
        onAdClosed: (Ad ad) => print('$BannerAd onAdClosed.'),
      ),
);


final AdWidget adWidget = AdWidget(ad: myBanner);

第 7 步：现在转到主页使用它

import 'package:flutter/material.dart';
import 'package:vaccine/adManger.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    myBanner.load();
    super.initState();
  }

  final Container adContainer = Container(
    alignment: Alignment.center,
    child: adWidget,
    width: myBanner.size.width.toDouble(),
    height: myBanner.size.height.toDouble(),
  );

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [                        
                      adContainer,
                    ],
                  ),
               ),
            );
  }
}

谢谢

Answer 3

flutter 2.8 添加 Google Admobs

添加依赖项

google_mobile_ads：^1.0.1

导入

导入'package:google_mobile_ads/google_mobile_ads.dart'；

转到 android/local.properties 并添加版本

• flutter.minSdkVersion=21
• flutter.targetSdkVersion=30
• flutter.compileSdkVersion=30

转到 android/app/build.gradle 并添加

-minSdkVersion localProperties.getProperty('flutter.minSdkVersion').toInteger()

-targetSdkVersion localProperties.getProperty('flutter.targetSdkVersion').toInteger()

转到 android/build.gradle

更新 Kotlin 版本

ext.kotlin_version = '1.6.0'

完成后按照正常的创建添加的工作

Answer 4

还好有一个Ads support for Flutter 的现有文档。

使用广告通过应用获利一直是最受欢迎的请求之一 适合许多 Flutter 开发者。

可通过Google Mobile Ads SDK for Flutter (Beta) 获得 Flutter 广告支持，该地址 适用于 AdMob 和 AdManager。该插件支持多种 广告格式，包括横幅（内嵌和叠加）、插页式、 奖励视频、原生广告和自适应横幅。

以下视频教程，Monetizing apps with Flutter， 展示如何开始使用广告：

以下资源可以帮助您入门：

• 要获取适用于 Flutter 的 Google 移动广告 SDK，请下载 google_mobile_ads plugin 来自 pub.dev。
• 有关使用 AdMob 或 AdManager 创建和加载广告的说明，请参阅detailed implementation guide。
• 要了解如何实施重叠式横幅广告、插页式广告和激励广告，请参阅Adding AdMob ads to a Flutter app 代码实验室。
• 要了解如何实施内嵌横幅广告和原生广告，请参阅Adding AdMob banner and native inline ads to a Flutter app 代码实验室。
• 如果您在测试版中遇到任何问题，请file an issue。