「Flutter」Flutter集成Google Ads廣告

image

本文檔默認(rèn)已經(jīng)申請(qǐng)了google ads的賬號(hào)。（如果有問題可以評(píng)論，互相學(xué)習(xí)~）

系統(tǒng)環(huán)境

Mac系統(tǒng)： 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 的廣告集成。還是需要科學(xué)的上網(wǎng)。

Google ads 申請(qǐng)廣告id

google ads 用的是google賬號(hào)登錄之后。開通ads后。點(diǎn)擊下面的鏈接

點(diǎn)擊開始創(chuàng)建廣告應(yīng)用

申請(qǐng)廣告應(yīng)用

image

因?yàn)榭缙脚_(tái)的。Android跟iOS無法公用一個(gè)應(yīng)用。所以如果要同時(shí)上架android、iOS。需要?jiǎng)?chuàng)建兩個(gè)應(yīng)用。

image

輸入應(yīng)用名稱就創(chuàng)建成功了

申請(qǐng)應(yīng)用下的廣告單元

添加廣告單元

image

根據(jù)需要?jiǎng)?chuàng)建不同的廣告種類

Flutter項(xiàng)目配置

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

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

image

終端執(zhí)行flutter pub get

Android項(xiàng)目配置

嘗試build包。 終端執(zhí)行flutter build apk，我這邊終端提示報(bào)錯(cuò)

image

解決方法。修改android/app/build.gradle 將compileSdkVersion 改成 31

image

在android/app/build.gradle 添加 ads服務(wù)

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的應(yīng)用id（ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy）"/>
</application>
</manifest>

  1. Android配置完成!

  2. iOS項(xiàng)目配置

  3. 1.先build出app包，這里主要是想要先讓flutter執(zhí)行一下cocoapods的install。

    1. 如果有iOS開發(fā)證書。并且對(duì)xcode已經(jīng)配置。則可以直接執(zhí)行flutter build ios，打出release包。
    2. 如果沒有iOS的開發(fā)證書?？梢詧?zhí)行 flutter build ios --no-codesign.先忽略證書的打包

  4. 2.雙擊iOS項(xiàng)目的ios/Runner.xcworkspace 文件。xcode自動(dòng)打開項(xiàng)目

  5. image

3.右擊Info.plist 選擇open As -> Source Code ；這時(shí)候xcode會(huì)將info.plist 用代碼的方式展現(xiàn)出來

image

4.將下面的代碼貼到<dict>的下面
google ads iOS

<key>GADApplicationIdentifier</key>
<string>谷歌申請(qǐng)的應(yīng)用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. 這時(shí)候在將info.plist 切換到Property list 查看是否有沒有報(bào)錯(cuò)。如果報(bào)錯(cuò)。說明黏貼的位置有問題

image

6. iOS配置完成~

Flutter項(xiàng)目調(diào)用

使用起來還是蠻簡(jiǎn)單的 根據(jù)示例來，下面是一點(diǎn)小注釋

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());
}

// 添加測(cè)試設(shè)備
const String testDevice = 'YOUR_DEVICE_ID';
const int maxFailedLoadAttempts = 3;

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

class _MyAppState extends State<MyApp> {

//請(qǐng)求的個(gè)性設(shè)置
static final AdRequest request = AdRequest(
keywords: <String>['foo', 'bar'],
contentUrl: 'http://foo.com/bar.html',
nonPersonalizedAds: true,
);

// 插頁廣告
InterstitialAd? _interstitialAd;
int _numInterstitialLoadAttempts = 0;

// 激勵(lì)廣告
RewardedAd? _rewardedAd;
int _numRewardedLoadAttempts = 0;

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

// 預(yù)加載
void _createInterstitialAd() {
InterstitialAd.load(
adUnitId: InterstitialAd.testAdUnitId, // 替換成申請(qǐng)的廣告單元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！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容