「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

<manifest>
<application>
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="google ads的应用id(ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy)"/>
</application>
</manifest>

  1. Android配置完成!

  2. iOS项目配置

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

    1. 如果有iOS开发证书。并且对xcode已经配置。则可以直接执行flutter build ios,打出release包。
    2. 如果没有iOS的开发证书。可以执行 flutter build ios --no-codesign.先忽略证书的打包
  4. 2.双击iOS项目的ios/Runner.xcworkspace 文件。xcode自动打开项目

  5. image

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

image

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

<key>GADApplicationIdentifier</key>
<string>谷歌申请的应用id(ca-app-pub-XXXXXX~XXXXXXXX)</string>
<key>SKAdNetworkItems</key>
<array>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>cstr6suwn9.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>4fzdc2evr5.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>2fnua5tdw4.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>ydx93a7ass.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>5a6flpkh64.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>p78axxw29g.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>v72qych5uu.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>c6k4g5qg8m.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>s39g8k73mm.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>3qy4746246.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>3sh42y64q3.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>f38h382jlk.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>hs6bdukanm.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>prcb7njmu6.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>v4nxqhlyqp.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>wzmmz9fp6w.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>yclnxrl5pm.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>t38b2kh725.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>7ug5zh24hu.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>9rd848q2bz.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>n6fk4nfna4.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>kbd757ywx3.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>9t245vhmpl.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>4468km3ulz.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>2u9pt9hc89.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>8s468mfl3y.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>av6w8kgt66.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>klf5c3l5u5.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>ppxm28t8ap.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>424m5254lk.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>uw77j35x4d.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>578prtvx9j.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>4dzt52r2t5.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>e5fvkxwrpn.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>8c4e2ghe7u.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>zq492l623r.skadnetwork</string>
</dict>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>3qcr597p9d.skadnetwork</string>
</dict>
</array>

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<MyApp> {

//请求的个性设置
static final AdRequest request = AdRequest(
keywords: <String>['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('ad loaded'); _interstitialAd = ad; _numInterstitialLoadAttempts = 0; _interstitialAd!.setImmersiveMode(true); }, onAdFailedToLoad: (LoadAdError error) { print('InterstitialAd failed to load: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 onAdDismissedFullScreenContent.'); ad.dispose(); _createInterstitialAd(); }, onAdFailedToShowFullScreenContent: (InterstitialAd ad, AdError error) { 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('ad loaded.'); _rewardedAd = ad; _numRewardedLoadAttempts = 0; }, onAdFailedToLoad: (LoadAdError error) { print('RewardedAd failed to load: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 onAdDismissedFullScreenContent.'); ad.dispose(); _createRewardedAd(); }, onAdFailedToShowFullScreenContent: (RewardedAd ad, AdError error) { print('ad onAdFailedToShowFullScreenContent: $error');
ad.dispose();
_createRewardedAd();
},
);

_rewardedAd!.setImmersiveMode(true);
_rewardedAd!.show(onUserEarnedReward: (RewardedAd ad, RewardItem reward) {
print('ad with rewardRewardItem({reward.amount},{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: <Widget>[
PopupMenuButton<String>(
onSelected: (String result) {
switch (result) {
case 'InterstitialAd':
_showInterstitialAd();
break;
case 'RewardedAd':
_showRewardedAd();
break;
default:
throw AssertionError('unexpected button: $result');
}
},
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: 'InterstitialAd',
child: Text('InterstitialAd'),
),
PopupMenuItem<String>(
value: 'RewardedAd',
child: Text('RewardedAd'),
),
],
),
],
),
body: SafeArea(child: ReusableInlineExample()),
);
}),
);
}
}

最后:
image

Nice job!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,367评论 6 512
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,959评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,750评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,226评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,252评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,975评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,592评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,497评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,027评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,147评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,274评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,953评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,623评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,143评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,260评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,607评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,271评论 2 358