באנר

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

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

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

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

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

/21775744923/example/adaptive-banner

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

טעינת מודעה

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

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

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/21775744923/example/adaptive-banner';

  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: AdSize.banner,
      listener: AdManagerBannerAdListener(
        // 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('AdManagerBannerAd 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);

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

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

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

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

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/21775744923/example/adaptive-banner';


  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: AdSize.banner,
      listener: AdManagerBannerAdListener(
        // 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('AdManagerBannerAd 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();
  }
}

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

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

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

...
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 בעץ הווידג'ט או ב-AdManagerBannerAdListener.onAdFailedToLoad() קריאה חוזרת.

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

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

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