באנר

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

במדריך הזה מוסבר איך לשלב מודעות באנר מ-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)	תיאור	קבוע בגודל המודעה
320x50	כרזות רגילות	banner
320x100	מודעת באנר גדולה	largeBanner
320x250	מלבן בינוני	mediumRectangle
468x60	מודעת באנר בגודל מלא	fullBanner
728x90	רשימת המובילים	leaderboard
רוחב שסופק x גובה מותאם	מודעת באנר מותאמת	לא רלוונטי

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

final AdSize adSize = AdSize(300, 50);

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

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

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

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

באנר