באנר

מודעות באנר מופיעות במיקום מסוים בפריסה של אפליקציה, בחלק העליון או התחתון של מסך המכשיר. המודעות נשארות במסך בזמן שהמשתמשים מבצעים אינטראקציה עם האפליקציה, ואפשר לרענן אותן באופן אוטומטי אחרי פרק זמן מסוים.

המדריך הזה מראה איך לשלב מודעות באנר מ-AdMob באפליקציה של Flutter. בנוסף לקטעי הקוד ולהוראות, הוא כולל גם מידע על הגודל הנכון של מודעות הבאנר.

ביצוע בדיקות באופן קבוע באמצעות מודעות בדיקה

כשאתם יוצרים ובודקים את האפליקציות שלכם, הקפידו להשתמש במודעות בדיקה ולא במודעות פעילות בשלב ההפקה. אחרת, ייתכן שהחשבון יושעה.

הדרך הקלה ביותר לטעון מודעות בדיקה היא להשתמש במזהה הייעודי של יחידת המודעות לבדיקה בשביל מודעות באנר:

Android

ca-app-pub-3940256099942544/6300978111

iOS

ca-app-pub-3940256099942544/2934735716

יחידות המודעות לבדיקה מוגדרות כך שיחזירו מודעות בדיקה לכל בקשה, ותוכלו להשתמש בהן באפליקציות שלכם בזמן קידוד, בדיקה וניפוי באגים. הקפידו להחליף אותם במזהים של יחידות המודעות שלכם לפני פרסום האפליקציה.

טעינת מודעה

הדוגמה הבאה יוצרת מודעת באנר:

class BannerExampleState extends State<BannerExample> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/6300978111'
    : 'ca-app-pub-3940256099942544/2934735716';

  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

גדלים של מודעות באנר

בטבלה הבאה מפורטים הגדלים הרגילים של מודעות באנר.

גודל ב-dp (WxH)	התיאור	קבוע AdSize
320x50	כרזות רגילות	banner
320x100	מודעת באנר גדולה	largeBanner
320x250	מלבן בינוני	mediumRectangle
468x60	מודעת באנר בגודל מלא	fullBanner
728x90	Leaderboard	leaderboard
רוחב שסופק x גובה מותאם	מודעת באנר מותאמת	לא רלוונטי

כדי להגדיר גודל באנר מותאם אישית, מגדירים את AdSize המועדף:

final AdSize adSize = AdSize(300, 50);

זהירות: אם רוחב הבאנר גדול מהרוחב של מסך המכשיר, התוצאה תהיה התנהגות בלתי צפויה של הפריסה.

אירועים של מודעות באנר

באמצעות השימוש ב-BannerAdListener, תוכלו לזהות אירועים במחזור החיים, למשל מתי מודעה נטענת. בדוגמה הזו מוטמעת כל שיטה, ומתועדת הודעה במסוף:

class BannerExampleState extends State<BannerExample> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/6300978111'
    : 'ca-app-pub-3940256099942544/2934735716';


  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
        // Called when an ad opens an overlay that covers the screen.
        onAdOpened: (Ad ad) {},
        // Called when an ad removes an overlay that covers the screen.
        onAdClosed: (Ad ad) {},
        // Called when an impression occurs on the ad.
        onAdImpression: (Ad ad) {},
      ),
    )..load();
  }
}

הצגה של מודעת באנר

כדי להציג BannerAd כווידג'ט, צריך ליצור AdWidget עם מודעה נתמכת אחרי הקריאה ל-load(). אפשר ליצור את הווידג'ט לפני שמפעילים את load(), אבל צריך להפעיל את load() לפני שמוסיפים אותו לעץ הווידג'טים.

AdWidget יורש מסיווג הווידג'ט של Flutter ואפשר להשתמש בו כמו בכל ווידג'ט אחר. ב-iOS, חשוב להקפיד למקם את הווידג'ט בווידג'ט עם רוחב וגובה שצוינו. אחרת, ייתכן שהמודעה שלך לא תוצג. אפשר להוסיף BannerAd במאגר עם גודל שתואם למודעה:

...
if (_bannerAd != null) {
  Align(
    alignment: Alignment.bottomCenter,
    child: SafeArea(
      child: SizedBox(
        width: _bannerAd!.size.width.toDouble(),
        height: _bannerAd!.size.height.toDouble(),
        child: AdWidget(ad: _bannerAd!),
      ),
    ),
  )
}
...

אי אפשר להשליך את המודעה כשלא צריך יותר גישה אליה. השיטה המומלצת מתי להפעיל את dispose() היא אחרי שמסירים את AdWidget מעץ הווידג'טים או באמצעות הקריאה החוזרת (callback) BannerAdListener.onAdFailedToLoad().

זהו! האפליקציה שלך מוכנה עכשיו להצגת מודעות באנר.

מגבלת גלילה במכשירי Android מגרסה 9 ומטה

אנחנו מודעים לכך שמכשירים ישנים יותר או פחות עוצמתיים, שבהם פועלת גרסת Android 9 ומטה, עשויים לפגוע בביצועים לא אופטימליים בעת הצגת מודעות באנר מוטבעות בתצוגות גלילה. מומלץ להשתמש בסוגים האלה של מודעות באנר רק ב-Android מגרסה 10 ואילך. מודעות באנר במיקום קבוע, כמו מודעות באנר מעוגנות, לא מושפעות וניתן להשתמש בהן כדי להשיג ביצועים אופטימליים בכל רמות ה-API ב-Android.

דוגמה מלאה ב-GitHub

מודעת באנר