מודעות באנר מותאמות בגוף הטקסט

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

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

מתי כדאי להשתמש במודעות באנר מותאמות בגוף הטקסט

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

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

דרישות מוקדמות

• פועלים לפי ההוראות שמפורטות במדריך למתחילים כדי לייבא את הפלאגין של Mobile Ads ל-Flutter.

לפני שמתחילים

כשאתם מטמיעים מודעות באנר מותאמות באפליקציה, חשוב לשים לב לנקודות הבאות:

• חשוב לוודא שאתם משתמשים בגרסה העדכנית ביותר של Google Mobile Ads SDK, ואם אתם משתמשים בתהליך בחירת הרשת (Mediation), מוודאים שאתם משתמשים בגרסאות העדכניות ביותר של מתאמי בחירת הרשת.

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

• השיטות לקבלת גודל המודעה הן

  • AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width)
  • AdSize.getLandscapeInlineAdaptiveBannerAdSize(int width)
  • AdSize.getPortraitInlineAdaptiveBannerAdSize(int width)
  • AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight)

• כשמשתמשים בממשקי ה-API של מודעות באנר מותאמות בתוך הטקסט, ‏Google Mobile Ads SDK מחזיר AdSize עם הרוחב שצוין ודגל inline. הגובה הוא אפס או maxHeight, בהתאם לממשק ה-API שבו אתם משתמשים. הגובה בפועל של המודעה זמין כשהיא מוחזרת.

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

הטמעה

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

1. מקבלים גודל של מודעת באנר מותאמת שמוצגת בתוך הטקסט. המערכת תשתמש בגודל הזה כדי לבקש את מודעת הבאנר המותאמת. כדי לקבל מודעות בגודל מותאם, חשוב לוודא:
   1. מקבלים את רוחב המכשיר שבשימוש בפיקסלים שלא תלויים בדחיסות (dp), או מגדירים רוחב משלכם אם לא רוצים להשתמש ברוחב המלא של המסך. אפשר להשתמש ב-MediaQuery.of(context) כדי לקבל את רוחב המסך.
   2. משתמשים בשיטות הסטטיות המתאימות במחלקה של גודל המודעה, כמו AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width) כדי לקבל אובייקט AdSize מותאם בתוך שורת טקסט לכיוון הנוכחי.
   3. אם רוצים להגביל את הגובה של הבאנר, אפשר להשתמש ב-method הסטטי AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight).
2. יוצרים אובייקט BannerAd עם מזהה יחידת המודעות, גודל המודעה המותאם אישית ואובייקט של בקשה להצגת מודעה.
3. טוענים את המודעה.
4. בקריאה החוזרת (callback) של onAdLoaded, משתמשים ב-BannerAd.getPlatformAdSize() כדי לקבל את גודל המודעה המעודכן בפלטפורמה ולעדכן את גובה הקונטיינר AdWidget.

קוד לדוגמה

הנה דוגמה לווידג'ט שטעון מודעת באנר בגודל מותאם שמתאימה לרוחב המסך, תוך התחשבות ברכיבים מוטמעים:

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

/// This example demonstrates inline adaptive banner ads.
///
/// Loads and shows an inline adaptive banner ad in a scrolling view,
/// and reloads the ad when the orientation changes.
class InlineAdaptiveExample extends StatefulWidget {
  @override
  _InlineAdaptiveExampleState createState() => _InlineAdaptiveExampleState();
}

class _InlineAdaptiveExampleState extends State<InlineAdaptiveExample> {
  static const _insets = 16.0;
  BannerAd? _inlineAdaptiveAd;
  bool _isLoaded = false;
  AdSize? _adSize;
  late Orientation _currentOrientation;

  double get _adWidth => MediaQuery.of(context).size.width - (2 * _insets);

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _currentOrientation = MediaQuery.of(context).orientation;
    _loadAd();
  }

  void _loadAd() async {
    await _inlineAdaptiveAd?.dispose();
    setState(() {
      _inlineAdaptiveAd = null;
      _isLoaded = false;
    });

    // Get an inline adaptive size for the current orientation.
    AdSize size = AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(
        _adWidth.truncate());

    _inlineAdaptiveAd = BannerAd(
      // TODO: replace this test ad unit with your own ad unit.
      adUnitId: 'ca-app-pub-3940256099942544/9214589741',
      size: size,
      request: AdRequest(),
      listener: BannerAdListener(
        onAdLoaded: (Ad ad) async {
          print('Inline adaptive banner loaded: ${ad.responseInfo}');

          // After the ad is loaded, get the platform ad size and use it to
          // update the height of the container. This is necessary because the
          // height can change after the ad is loaded.
          BannerAd bannerAd = (ad as BannerAd);
          final AdSize? size = await bannerAd.getPlatformAdSize();
          if (size == null) {
            print('Error: getPlatformAdSize() returned null for $bannerAd');
            return;
          }

          setState(() {
            _inlineAdaptiveAd = bannerAd;
            _isLoaded = true;
            _adSize = size;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('Inline adaptive banner failedToLoad: $error');
          ad.dispose();
        },
      ),
    );
    await _inlineAdaptiveAd!.load();
  }

  /// Gets a widget containing the ad, if one is loaded.
  ///
  /// Returns an empty container if no ad is loaded, or the orientation
  /// has changed. Also loads a new ad if the orientation changes.
  Widget _getAdWidget() {
    return OrientationBuilder(
      builder: (context, orientation) {
        if (_currentOrientation == orientation &&
            _inlineAdaptiveAd != null &&
            _isLoaded &&
            _adSize != null) {
          return Align(
              child: Container(
            width: _adWidth,
            height: _adSize!.height.toDouble(),
            child: AdWidget(
              ad: _inlineAdaptiveAd!,
            ),
          ));
        }
        // Reload the ad if the orientation changes.
        if (_currentOrientation != orientation) {
          _currentOrientation = orientation;
          _loadAd();
        }
        return Container();
      },
    );
  }

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(
        title: Text('Inline adaptive banner example'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: _insets),
          child: ListView.separated(
            itemCount: 20,
            separatorBuilder: (BuildContext context, int index) {
              return Container(
                height: 40,
              );
            },
            itemBuilder: (BuildContext context, int index) {
              if (index == 10) {
                return _getAdWidget();
              }
              return Text(
                'Placeholder text',
                style: TextStyle(fontSize: 24),
              );
            },
          ),
        ),
      ));

  @override
  void dispose() {
    super.dispose();
    _inlineAdaptiveAd?.dispose();
  }
}