「Flutter」Flutter集成Google Ads广告

image

本文档默认已经申请了google ads的账号。（如果有问题可以评论，互相学习~）

系统环境

Mac系统： macOS Big Sur 11.6.1
Flutter版本：Flutter (Channel stable, 2.5.3, on macOS 11.6.1 20G224 darwin-x64, locale
zh-Hans-CN)

ads 的广告集成。还是需要科学的上网。

Google ads 申请广告id

google ads 用的是google账号登录之后。开通ads后。点击下面的链接

点击开始创建广告应用

申请广告应用

image

因为跨平台的。Android跟iOS无法公用一个应用。所以如果要同时上架android、iOS。需要创建两个应用。

image

输入应用名称就创建成功了

申请应用下的广告单元

添加广告单元

image

根据需要创建不同的广告种类

Flutter项目配置

使用第三方的插件： google_mobile_ads：1.0.1

1.在pubspec.ymal 添加 google_mobile_ads: ^1.0.1

image

终端执行flutter pub get

Android项目配置

尝试build包。 终端执行flutter build apk，我这边终端提示报错

image

解决方法。修改android/app/build.gradle 将compileSdkVersion 改成 31

image

在android/app/build.gradle 添加 ads服务

dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
implementation 'com.google.android.gms:play-services-ads:20.5.0'
}

修改android/app/src/main/AndroidManifest.xml

android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="google ads的应用id（ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy）"/>

2. Android配置完成!

3. iOS项目配置

4. 1.先build出app包，这里主要是想要先让flutter执行一下cocoapods的install。

   1. 如果有iOS开发证书。并且对xcode已经配置。则可以直接执行flutter build ios，打出release包。
   2. 如果没有iOS的开发证书。可以执行 flutter build ios --no-codesign.先忽略证书的打包

5. 2.双击iOS项目的ios/Runner.xcworkspace 文件。xcode自动打开项目

6. image

3.右击Info.plist 选择open As -> Source Code ；这时候xcode会将info.plist 用代码的方式展现出来

image

4.将下面的代码贴到的下面
google ads iOS

GADApplicationIdentifier
谷歌申请的应用id（ca-app-pub-XXXXXX~XXXXXXXX）
SKAdNetworkItems


SKAdNetworkIdentifier
cstr6suwn9.skadnetwork


SKAdNetworkIdentifier
4fzdc2evr5.skadnetwork


SKAdNetworkIdentifier
2fnua5tdw4.skadnetwork


SKAdNetworkIdentifier
ydx93a7ass.skadnetwork


SKAdNetworkIdentifier
5a6flpkh64.skadnetwork


SKAdNetworkIdentifier
p78axxw29g.skadnetwork


SKAdNetworkIdentifier
v72qych5uu.skadnetwork


SKAdNetworkIdentifier
c6k4g5qg8m.skadnetwork


SKAdNetworkIdentifier
s39g8k73mm.skadnetwork


SKAdNetworkIdentifier
3qy4746246.skadnetwork


SKAdNetworkIdentifier
3sh42y64q3.skadnetwork


SKAdNetworkIdentifier
f38h382jlk.skadnetwork


SKAdNetworkIdentifier
hs6bdukanm.skadnetwork


SKAdNetworkIdentifier
prcb7njmu6.skadnetwork


SKAdNetworkIdentifier
v4nxqhlyqp.skadnetwork


SKAdNetworkIdentifier
wzmmz9fp6w.skadnetwork


SKAdNetworkIdentifier
yclnxrl5pm.skadnetwork


SKAdNetworkIdentifier
t38b2kh725.skadnetwork


SKAdNetworkIdentifier
7ug5zh24hu.skadnetwork


SKAdNetworkIdentifier
9rd848q2bz.skadnetwork


SKAdNetworkIdentifier
n6fk4nfna4.skadnetwork


SKAdNetworkIdentifier
kbd757ywx3.skadnetwork


SKAdNetworkIdentifier
9t245vhmpl.skadnetwork


SKAdNetworkIdentifier
4468km3ulz.skadnetwork


SKAdNetworkIdentifier
2u9pt9hc89.skadnetwork


SKAdNetworkIdentifier
8s468mfl3y.skadnetwork


SKAdNetworkIdentifier
av6w8kgt66.skadnetwork


SKAdNetworkIdentifier
klf5c3l5u5.skadnetwork


SKAdNetworkIdentifier
ppxm28t8ap.skadnetwork


SKAdNetworkIdentifier
424m5254lk.skadnetwork


SKAdNetworkIdentifier
uw77j35x4d.skadnetwork


SKAdNetworkIdentifier
578prtvx9j.skadnetwork


SKAdNetworkIdentifier
4dzt52r2t5.skadnetwork


SKAdNetworkIdentifier
e5fvkxwrpn.skadnetwork


SKAdNetworkIdentifier
8c4e2ghe7u.skadnetwork


SKAdNetworkIdentifier
zq492l623r.skadnetwork


SKAdNetworkIdentifier
3qcr597p9d.skadnetwork

5. 这时候在将info.plist 切换到Property list 查看是否有没有报错。如果报错。说明黏贴的位置有问题

image

6. iOS配置完成~

Flutter项目调用

使用起来还是蛮简单的 根据示例来，下面是一点小注释

google_model_ads示例

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'anchored_adaptive_example.dart';
import 'inline_adaptive_example.dart';
import 'fluid_example.dart';
import 'reusable_inline_example.dart';

void main() {
WidgetsFlutterBinding.ensureInitialized();
//初始化
MobileAds.instance.initialize();
runApp(MyApp());
}

// 添加测试设备
const String testDevice = 'YOUR_DEVICE_ID';
const int maxFailedLoadAttempts = 3;

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

class _MyAppState extends State {

//请求的个性设置
static final AdRequest request = AdRequest(
keywords: ['foo', 'bar'],
contentUrl: 'http://foo.com/bar.html',
nonPersonalizedAds: true,
);

// 插页广告
InterstitialAd? _interstitialAd;
int _numInterstitialLoadAttempts = 0;

// 激励广告
RewardedAd? _rewardedAd;
int _numRewardedLoadAttempts = 0;

@override
void initState() {
super.initState();
_createInterstitialAd();
_createRewardedAd();
}

// 预加载
void _createInterstitialAd() {
InterstitialAd.load(
adUnitId: InterstitialAd.testAdUnitId, // 替换成申请的广告单元id
request: request,
adLoadCallback: InterstitialAdLoadCallback(
onAdLoaded: (InterstitialAd ad) {
print('error.');
_numInterstitialLoadAttempts += 1;
_interstitialAd = null;
if (_numInterstitialLoadAttempts <= maxFailedLoadAttempts) {
_createInterstitialAd();
}
},
));
}

// 显示广告
void _showInterstitialAd() {
if (_interstitialAd == null) {
print('Warning: attempt to show interstitial before loaded.');
return;
}
_interstitialAd!.fullScreenContentCallback = FullScreenContentCallback(
onAdShowedFullScreenContent: (InterstitialAd ad) =>
print('ad onAdShowedFullScreenContent.'),
onAdDismissedFullScreenContent: (InterstitialAd ad) {
print('ad onAdFailedToShowFullScreenContent: $error');
ad.dispose();
_createInterstitialAd();
},
);
_interstitialAd!.show();
_interstitialAd = null;
}

void _createRewardedAd() {
RewardedAd.load(
adUnitId: RewardedAd.testAdUnitId,
request: request,
rewardedAdLoadCallback: RewardedAdLoadCallback(
onAdLoaded: (RewardedAd ad) {
print('error');
_rewardedAd = null;
_numRewardedLoadAttempts += 1;
if (_numRewardedLoadAttempts <= maxFailedLoadAttempts) {
_createRewardedAd();
}
},
));
}

void _showRewardedAd() {
if (_rewardedAd == null) {
print('Warning: attempt to show rewarded before loaded.');
return;
}
_rewardedAd!.fullScreenContentCallback = FullScreenContentCallback(
onAdShowedFullScreenContent: (RewardedAd ad) =>
print('ad onAdShowedFullScreenContent.'),
onAdDismissedFullScreenContent: (RewardedAd ad) {
print('ad onAdFailedToShowFullScreenContent: $error');
ad.dispose();
_createRewardedAd();
},
);

_rewardedAd!.setImmersiveMode(true);
_rewardedAd!.show(onUserEarnedReward: (RewardedAd ad, RewardItem reward) {
print('RewardItem({reward.type}');
});
_rewardedAd = null;
}

@override
void dispose() {
super.dispose();
_interstitialAd?.dispose();
_rewardedAd?.dispose();
}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Builder(builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('AdMob Plugin example app'),
actions: [
PopupMenuButton(
onSelected: (String result) {
switch (result) {
case 'InterstitialAd':
_showInterstitialAd();
break;
case 'RewardedAd':
_showRewardedAd();
break;
default:
throw AssertionError('unexpected button: $result');
}
},
itemBuilder: (BuildContext context) => >[
PopupMenuItem(
value: 'InterstitialAd',
child: Text('InterstitialAd'),
),
PopupMenuItem(
value: 'RewardedAd',
child: Text('RewardedAd'),
),
],
),
],
),
body: SafeArea(child: ReusableInlineExample()),
);
}),
);
}
}

最后：

image

Nice job！