تبلیغات ادموب در فلاتر

[hharddy]

سرویس AdMob یکی از محبوب‌ترین پلتفرم‌ها برای نمایش تبلیغات در اپلیکیشن‌های موبایل است که توسط شرکت گوگل ارائه می‌شود.
این سرویس به توسعه‌دهندگان این امکان را می‌دهد که از طریق نمایش تبلیغات در اپلیکیشن‌های خود، درآمدزایی کنند.
۱. به بخش برنامه‌ها بروید و روی افزودن برنامه کلیک کنید.
https://flutter-learn.ir/wp-content/uploads/2024/09/flutter_google_mobile_ads_1-1024x375.webp
2. پلتفرم را انتخاب کنید و به اد موب اطلاع دهید که آیا برنامه شما در یک فروشگاه برنامه پشتیبانی شده فهرست شده است یا خیر.
3. نام برنامه خود را وارد کنید، به خاطر داشته باشید که نام برنامه را می توان تغییر داد اما خود برنامه را نمی توان حذف کرد. پس از ایجاد برنامه خود، می توانید تنظیمات Google Mobile Ads را ادامه دهید.
https://flutter-learn.ir/wp-content/uploads/2024/09/flutter_google_mobile_ads_2-1024x278.webp
پس از ایجاد برنامه خود، می توانید تنظیمات Google Mobile Ads را ادامه دهید.
شروع با گوگل فلاتر Mobile Adsساده‌ترین راه برای افزودن تبلیغات به برنامه فلاتر شما استفاده از پکیج Google Mobile Ads (https://pub.dev/packages/google_mobile_ads) است.
گوگل این پکیج را برای ساده کردن روند افزودن تبلیغات با استفاده از ادموب ایجاد کرد.
برای نصب این پکیج به فایل pubspec.yaml در پروژه فلاتر بروید و کد زیر را در آن قرار دهید.
دریافت App ID ادموبحالا که پکیج مورد نیاز را نصب کرده‌ایم، باید برنامه فلاتر خود را به AdMob متصل کنیم.
این کار با اضافه کردن شناسه برنامه (App ID) از AdMob به برنامه ما انجام می‌شود.
شناسه برنامه را می‌توان در بخش برنامه‌های AdMob پیدا کرد و به راحتی با کلیک بر روی آن کپی کرد. اطمینان حاصل کنید که هرگز شناسه برنامه را با کسی به اشتراک نگذارید.
https://flutter-learn.ir/wp-content/uploads/2024/09/flutter_google_mobile_ads_4-1024x328.webp
پس از کپی کردن شناسه برنامه، می‌توانیم آن را داخل برنامه خود اضافه کنیم. پیاده‌سازی بسته به پلتفرم متفاوت است. به توضیحات زیر توجه کنید:
برای اندروید، ما باید یک ورودی جدید meta-data را در فایل android/app/src/main/AndroidManifest.xml اضافه کنیم. اطمینان حاصل کنید که شناسه برنامه درون تگ <application> قرار دارد و نه درون تگ <activity>.







دریافت App ID ادموبحالا که پکیج مورد نیاز را نصب کرده‌ایم، باید برنامه فلاتر خود را به AdMob متصل کنیم.
این کار با اضافه کردن شناسه برنامه (App ID) از AdMob به برنامه ما انجام می‌شود.
شناسه برنامه را می‌توان در بخش برنامه‌های AdMob پیدا کرد و به راحتی با کلیک بر روی آن کپی کرد. اطمینان حاصل کنید که هرگز شناسه برنامه را با کسی به اشتراک نگذارید.
https://flutter-learn.ir/wp-content/uploads/2024/09/flutter_google_mobile_ads_4-1024x328.webp
پس از کپی کردن شناسه برنامه، می‌توانیم آن را داخل برنامه خود اضافه کنیم. پیاده‌سازی بسته به پلتفرم متفاوت است. به توضیحات زیر توجه کنید:
برای اندروید، ما باید یک ورودی جدید meta-data را در فایل android/app/src/main/AndroidManifest.xml اضافه کنیم. اطمینان حاصل کنید که شناسه برنامه درون تگ <application> قرار دارد و نه درون تگ <activity>.



کد اولیه پروژه بسیار حداقلی است و همه چیز درون فایل main.dart نوشته شده است.
از آنجا که تبلیغ بنر در پایین نمایش داده می‌شود، ما یک ویجت Column درون Scaffold داریم.
درون ویجت Column، یک ویجت Expanded وجود دارد که می‌توانید به راحتی آن را با ویجت‌های دلخواه خود جایگزین کنید.

void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State createState() => _MyAppState();
}
class _MyAppState extends State {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: [
const Expanded(child: SizedBox.shrink()),
],
),
),
);

}


import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart'; void main() { WidgetsFlutterBinding.ensureInitialized(); MobileAds.instance.initialize(); runApp(const MyApp());} class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => _MyAppState();} class _MyAppState extends State<MyApp> { BannerAd? _bannerAd; @override void initState() { super.initState(); _createBannerAd(); } Future<void> _createBannerAd() async { _bannerAd = BannerAd( adUnitId: 'ca-app-pub-3940256099942544/6300978111', size: AdSize.banner, request: const AdRequest(), listener: BannerAdListener( onAdLoaded: (Ad ad) {}, onAdFailedToLoad: (Ad advertisement, LoadAdError error) => advertisement.dispose(), ), )..load(); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Column( children: [ const Expanded(child: SizedBox.shrink()), if (_bannerAd != null) Center( child: SizedBox( width: _bannerAd?.size.width.toDouble(), height: _bannerAd?.size.height.toDouble(), child: AdWidget(ad: _bannerAd!), ), ), ], ), ), ); }}

منبع و توضیحات تکمیلی: آموزش استفاده از تبلیغات ادموب Admob در برنامه نویسی فلاتر (https://flutter-learn.ir/how-to-use-admob-in-flutter/)