באנר

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

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

מודעות באנר מותאמות ומעוגנות הן מודעות עם יחס גובה-רוחב קבוע ולא מודעות בגודל קבוע. יחס הגובה-רוחב דומה ל-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();
  }
}

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

כדי להציג 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.

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

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

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

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