באנר

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

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

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

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

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

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

/21775744923/example/adaptive-banner

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

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

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

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>{
  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() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

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

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

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

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() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.sizeOf(context).width.truncate());

    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: size,
      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 עובר בירושה מ-Widget class של 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 מוסר מעץ הווידג'טים או ב-callback של AdManagerBannerAdListener.onAdFailedToLoad().

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

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

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

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

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

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

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

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

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