באנר

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

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

מודעות באנר מותאמות ומעוגנות הן מודעות ביחס גובה-רוחב קבוע, ולא מודעות בגודל קבוע. יחס הגובה-רוחב דומה ל-320x50. אחרי שציינתם את רוחב המסך המלא שזמין, ערכת Google Mobile Ads SDK תחזיר מודעה עם גובה אופטימלי לרוחב הזה. הגובה האופטימלי של המודעה נשאר קבוע בכל בקשות להצגת מודעות, והתוכן שמקיף את המודעה נשאר במקום כשהמודעה מתעדכנת.

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

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

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

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

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

אחזור גודל המודעה

כדי לבקש מודעת באנר בגודל הנכון, פועלים לפי השלבים הבאים:

1. אפשר לקבל את רוחב המסך של המכשיר בפיקסלים שלא תלויים בדחיסות (dp) באמצעות הפונקציה MediaQuery.of(context). אם אתם לא רוצים להשתמש ברוחב המסך המלא, תוכלו להגדיר רוחב משלכם.

2. משתמשים ב-method הסטטי המתאים בכיתה AdSize כדי לקבל אובייקט AdSize. לדוגמה, אפשר להשתמש ב-AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) כדי לקבל את גודל המודעה לכיוון הנוכחי.

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
    MediaQuery.sizeOf(context).width.truncate());

טעינת מודעה

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

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/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';

  /// Loads a banner ad.
  void loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      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();
  }
}

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

באמצעות 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/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';


  /// Loads a banner ad.
  void loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      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();
  }
}

רענון מודעה

אם הגדרתם את יחידת המודעות להתחדשות, לא תצטרכו לבקש מודעה אחרת אם המודעה לא נטענת. ‏Google Mobile Ads SDK מתייחס לכל קצב רענון שציינתם בממשק המשתמש של AdMob. אם לא הפעלתם את הרענון, צריך לשלוח בקשה חדשה. לפרטים נוספים על רענון של יחידות מודעות, למשל הגדרת קצב רענון, אפשר לעיין במאמר שימוש ברענון אוטומטי במודעות באנר.

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

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

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

AdWidget עובר בירושה מ-Widget class של 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 ואילך. מודעות באנר במיקום קבוע, כמו מודעות באנר מעוגנות, לא מושפעות מהשינוי הזה וניתן להשתמש בהן עם ביצועים אופטימליים בכל רמות Android API.

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

דוגמה מלאה לשילוב של מודעות הבאנר שמתואר בדף הזה מופיעה בקובץ banner_example.

מידע על סוגי באנר אחרים

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

מודעות באנר מותאמות שמוצגות בתוך הטקסט

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

מודעות באנר שאפשר לכווץ

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