728x90
반응형
안녕하세요 이번글에서는 애드몹을 이용하여 플러터 앱에 광고를 달아보겠습니다.
먼저 애드몹 싸이트에 접속하여 줍시다.
https://admob.google.com/intl/ko/home/
Google AdMob: 모바일 앱 수익 창출
인앱 광고를 사용하여 모바일 앱에서 더 많은 수익을 창출하고, 사용이 간편한 도구를 통해 유용한 분석 정보를 얻고 앱을 성장시켜 보세요.
admob.google.com
오른쪽 상단의 가입 후 로그인을 해주세요
그 다음 위 화면처럼 앱 클릭 후 앱 추가를 눌러 주세요
플랫폼을 선택한 다음 스토어 등록여부를 선택하여 줍시다.
앱 이름을 입력한 뒤 앱을 추가 하여 줍시다.
만들어진 앱에 광고를 추가하기 위해 광고단위를 추가하여 줍시다.
원하는 광고형태를 선택하여 줍시다. 글쓴이는 배너를 선택 하겠습니다.
광고단위의 이름을 작성한 다음 광고단위를 만들어 줍시다.
광고 단위가 완성이 되면 위처럼 앱ID에 들어갈 키와 배너광고에 대한 키가 생성이 됩니다.
이제 광고를 받아올 준비가 끝났으니 앱에 광고를 띄울수 있도록 합시다
먼저 pub.dev로 들어가서 애드몹 디펜던시를 가지고 옵니다.
https://pub.dev/packages/admob_flutter
admob_flutter | Flutter Package
Admob plugin that shows banner ads using native platform views.
pub.dev
admob_flutter: ^3.0.0
위 코드를 pubspec.yaml 파일에 추가하여 줍니다.
<manifest>
<application>
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="앱ID key 를 입력해 주세요"/>
</application>
</manifest>안드로이드의 경우 AndroidManifest.xml 파일에 위 코드를 추가한 다음 애드몹 사이트에서 받아온 앱ID key 를 추가하여 줍시다.
<key>GADApplicationIdentifier</key>
<string>앱ID key</string>
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSUserTrackingUsageDescription</key>
<string>This identifier will be used to deliver personalized ads to you.</string>IOS 의 경우 info.plist 파일에 해당 코드를 작성하여 줍시다.
import 'dart:io';
import 'package:admob_flutter/admob_flutter.dart';
// import 'package:admob_flutter_example/extensions.dart';
import 'package:admob_flutter_example/new_page.dart';
import 'package:flutter/material.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
// Initialize without device test ids
Admob.initialize();
// Add a list of test ids.
// Admob.initialize(testDeviceIds: ['YOUR DEVICE ID']);
runApp(MyMaterialApp());
}
class MyMaterialApp extends StatefulWidget {
@override
_MyMaterialAppState createState() => _MyMaterialAppState();
}
class _MyMaterialAppState extends State<MyMaterialApp> {
GlobalKey<ScaffoldState> scaffoldState = GlobalKey();
AdmobBannerSize? bannerSize;
late AdmobInterstitial interstitialAd;
late AdmobReward rewardAd;
@override
void initState() {
super.initState();
// You should execute `Admob.requestTrackingAuthorization()` here before showing any ad.
bannerSize = AdmobBannerSize.BANNER;
interstitialAd = AdmobInterstitial(
adUnitId: getInterstitialAdUnitId()!,
listener: (AdmobAdEvent event, Map<String, dynamic>? args) {
if (event == AdmobAdEvent.closed) interstitialAd.load();
handleEvent(event, args, 'Interstitial');
},
);
rewardAd = AdmobReward(
adUnitId: getRewardBasedVideoAdUnitId()!,
listener: (AdmobAdEvent event, Map<String, dynamic>? args) {
if (event == AdmobAdEvent.closed) rewardAd.load();
handleEvent(event, args, 'Reward');
},
);
interstitialAd.load();
rewardAd.load();
}
void handleEvent(
AdmobAdEvent event, Map<String, dynamic>? args, String adType) {
switch (event) {
case AdmobAdEvent.loaded:
showSnackBar('New Admob $adType Ad loaded!');
break;
case AdmobAdEvent.opened:
showSnackBar('Admob $adType Ad opened!');
break;
case AdmobAdEvent.closed:
showSnackBar('Admob $adType Ad closed!');
break;
case AdmobAdEvent.failedToLoad:
showSnackBar('Admob $adType failed to load. :(');
break;
case AdmobAdEvent.rewarded:
showDialog(
context: scaffoldState.currentContext!,
builder: (BuildContext context) {
return WillPopScope(
onWillPop: () async {
ScaffoldMessenger.of(context).hideCurrentSnackBar();
return true;
},
child: AlertDialog(
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('Reward callback fired. Thanks Andrew!'),
Text('Type: ${args!['type']}'),
Text('Amount: ${args['amount']}'),
],
),
),
);
},
);
break;
default:
}
}
void showSnackBar(String content) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(content),
duration: Duration(milliseconds: 1500),
),
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blueGrey,
),
home: Builder(
builder: (BuildContext context) => Scaffold(
key: scaffoldState,
appBar: AppBar(
title: const Text('AdmobFlutter'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
fullscreenDialog: true,
builder: (BuildContext context) {
return NewPage(title: 'Full Screen Dialog');
},
),
);
},
child: Text(
'FullscreenDialog',
style: TextStyle(
color: Colors.white,
),
),
)
],
), // .withBottomAdmobBanner(context),
bottomNavigationBar: Builder(
builder: (BuildContext context) {
return Container(
color: Colors.blueGrey,
child: SafeArea(
child: SizedBox(
height: 60,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: TextButton(
onPressed: () async {
final isLoaded = await interstitialAd.isLoaded;
if (isLoaded ?? false) {
interstitialAd.show();
} else {
showSnackBar(
'Interstitial ad is still loading...');
}
},
child: Text(
'Show Interstitial',
style: TextStyle(color: Colors.white),
),
),
),
Expanded(
child: TextButton(
onPressed: () async {
if (await rewardAd.isLoaded) {
rewardAd.show();
} else {
showSnackBar('Reward ad is still loading...');
}
},
child: Text(
'Show Reward',
style: TextStyle(color: Colors.white),
),
),
),
Expanded(
child: PopupMenuButton(
initialValue: bannerSize,
offset: Offset(0, 20),
onSelected: (AdmobBannerSize newSize) {
setState(() {
bannerSize = newSize;
});
},
itemBuilder: (BuildContext context) =>
<PopupMenuEntry<AdmobBannerSize>>[
PopupMenuItem(
value: AdmobBannerSize.BANNER,
child: Text('BANNER'),
),
PopupMenuItem(
value: AdmobBannerSize.LARGE_BANNER,
child: Text('LARGE_BANNER'),
),
PopupMenuItem(
value: AdmobBannerSize.MEDIUM_RECTANGLE,
child: Text('MEDIUM_RECTANGLE'),
),
PopupMenuItem(
value: AdmobBannerSize.FULL_BANNER,
child: Text('FULL_BANNER'),
),
PopupMenuItem(
value: AdmobBannerSize.LEADERBOARD,
child: Text('LEADERBOARD'),
),
PopupMenuItem(
value: AdmobBannerSize.SMART_BANNER(context),
child: Text('SMART_BANNER'),
),
PopupMenuItem(
value: AdmobBannerSize.ADAPTIVE_BANNER(
width: MediaQuery.of(context)
.size
.width
.toInt() -
40, // considering EdgeInsets.all(20.0)
),
child: Text('ADAPTIVE_BANNER'),
),
],
child: Center(
child: Text(
'Banner size',
style: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.white),
),
),
),
),
Expanded(
child: TextButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) {
return NewPage(
title: 'Push Page',
);
}),
);
},
child: Text(
'Push Page',
style: TextStyle(color: Colors.white),
),
),
),
],
),
),
),
);
},
),
body: Column(
children: [
Expanded(
child: Scrollbar(
child: ListView.builder(
padding: EdgeInsets.all(20.0),
itemCount: 1000,
itemBuilder: (BuildContext context, int index) {
if (index != 0 && index % 6 == 0) {
return Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 20.0),
child: AdmobBanner(
adUnitId: getBannerAdUnitId()!,
adSize: bannerSize!,
listener: (AdmobAdEvent event,
Map<String, dynamic>? args) {
handleEvent(event, args, 'Banner');
},
onBannerCreated:
(AdmobBannerController controller) {
// Dispose is called automatically for you when Flutter removes the banner from the widget tree.
// Normally you don't need to worry about disposing this yourself, it's handled.
// If you need direct access to dispose, this is your guy!
// controller.dispose();
},
),
),
Container(
height: 100.0,
margin: EdgeInsets.only(bottom: 20.0),
color: Colors.cyan,
),
],
);
}
return Container(
height: 100.0,
margin: EdgeInsets.only(bottom: 20.0),
color: Colors.cyan,
);
},
),
),
),
// Another option is to fix a banner ad to the top or bottom of your content.
// Notice that banners are not scrolling, which is a violation of admob policy.
//
// See: https://github.com/kmcgill88/admob_flutter/issues/194
// "banner ads should not move as a user scrolls, as users may try to
// click on the menu but end up clicking on the ad accidentally instead.
// This specific implementation is against policy and we reserve the right
// to disable ad serving to your app."
// Builder(
// builder: (BuildContext context) {
// final size = MediaQuery.of(context).size;
// final height = max(size.height * .05, 50.0);
// return Container(
// width: size.width,
// height: height,
// child: AdmobBanner(
// adUnitId: getBannerAdUnitId(),
// adSize: AdmobBannerSize.ADAPTIVE_BANNER(
// width: size.width.toInt(),
// ),
// listener: (AdmobAdEvent event, Map<String, dynamic> args) {
// handleEvent(event, args, 'Banner');
// },
// ),
// );
// },
// ),
],
),
),
),
);
// .withBottomAdmobBanner(context);
}
@override
void dispose() {
interstitialAd.dispose();
rewardAd.dispose();
super.dispose();
}
}
/*
Test Id's from:
https://developers.google.com/admob/ios/banner
https://developers.google.com/admob/android/banner
App Id - See README where these Id's go
Android: ca-app-pub-3940256099942544~3347511713
iOS: ca-app-pub-3940256099942544~1458002511
Banner
Android: ca-app-pub-3940256099942544/6300978111
iOS: ca-app-pub-3940256099942544/2934735716
Interstitial
Android: ca-app-pub-3940256099942544/1033173712
iOS: ca-app-pub-3940256099942544/4411468910
Reward Video
Android: ca-app-pub-3940256099942544/5224354917
iOS: ca-app-pub-3940256099942544/1712485313
*/
String? getBannerAdUnitId() {
if (Platform.isIOS) {
return '광고단위 key';
} else if (Platform.isAndroid) {
return '광고단위 key';
}
return null;
}
String? getInterstitialAdUnitId() {
if (Platform.isIOS) {
return '광고단위 key';
} else if (Platform.isAndroid) {
return '광고단위 key';
}
return null;
}
String? getRewardBasedVideoAdUnitId() {
if (Platform.isIOS) {
return '광고단위 key';
} else if (Platform.isAndroid) {
return '광고단위 key';
}
return null;
}
예제 코드의 가장 마지막 부분에 광고단위 key 를 입력하여 마무리 하여 줍시다.
728x90
반응형