如何在 flutter 應用程序中集成谷歌移動廣告

Question

Recently flutter announcing the release of Google Mobile Ads for Flutter a new SDK that works with AdMob and AdManager to offer a variety of ad formats, including banner, interstitial, native, and rewarded video ads for flutter

我想通過 AdMob 展示廣告來通過我的 flutter 應用獲利。 我們如何在我們的 flutter 應用程序中設置和集成谷歌移動廣告

Answer 1

適用於 Flutter 的 Google 移動廣告 SDK 目前支持加載和顯示橫幅、插頁式（全屏）、原生廣告和激勵視頻廣告

將 Google 移動廣告 SDK 集成到 Flutter 應用程序中，您將在此處執行此操作

先決條件： https://pub.dev/packages/google_mobile_ads#prerequisites

將 Google Mobile Ads 插件添加為依賴項

將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. 添加一個GADApplicationIdentifier鍵，其字符串值為 AdMob 應用程序 ID（在 AdMob UI 中標識），如下所示：

<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 App 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 App ID 必須包含在AndroidManifest.xml中。 否則將導致應用程序啟動時崩潰。

初始化移動廣告 SDK

在加載廣告之前，讓您的應用通過調用MobileAds.instance.initialize()來初始化移動廣告 SDK，該方法會初始化 SDK 並返回一個在初始化完成后（或在 30 秒超時后）完成的Future 。 這只需要做一次，最好是在運行應用程序之前。

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( load() 。

final AdWidget adWidget = AdWidget(ad: myBanner);

AdWidget繼承自 Flutter 的 Widget class，可以作為任何其他的 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>

適用於 Android

<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 {
        ....
        multiDexEnabled true
    }

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

第六步：創建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 步：現在 go 到主頁使用它

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

進口

導入“包：google_mobile_ads/google_mobile_ads.dart”；

Go 到 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

好消息是現有的 Flutter 的廣告支持文檔。

通過使用廣告從應用程序中獲利一直是許多 Flutter 開發人員最受歡迎的請求之一。

Flutter 廣告支持可通過Google 移動廣告 SDK 獲得，適用於 Flutter（測試版） ，適用於 Z61DDE80618C83306F6E 該插件支持多種廣告格式，包括橫幅（內嵌和疊加）、插頁式、獎勵視頻、原生廣告和自適應橫幅。

以下視頻教程，使用 Flutter 為應用獲利，展示了如何開始使用廣告：

以下資源可以幫助您入門：

• 要獲取適用於 Flutter 的 Google 移動廣告 SDK，請從 pub.dev 下載google_mobile_ads 插件。
• 有關使用 AdMob 或 AdManager 創建和加載廣告的說明，請參閱詳細的實施指南。
• 要了解如何實施重疊式橫幅廣告、插頁式廣告和獎勵廣告，請參閱將 AdMob 廣告添加到 Flutter 應用程序代碼實驗室。
• 要了解如何實施內嵌橫幅廣告和原生廣告，請參閱將 AdMob 橫幅和原生內嵌廣告添加到 Flutter 應用程序代碼實驗室。
• 如果您在測試版中遇到任何問題，請提交問題。