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

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

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

מתי כדאי להשתמש במודעות באנר מותאמות המשולבות בתוכן הדף

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

הן נועדו להיות ממוקמות בתוכן נגלל, לדוגמה:

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

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

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

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

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

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

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

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

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

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

הטמעה

כך מטמיעים מודעת באנר מותאמת פשוטה בתוך השורה:

  1. קבלת גודל של מודעת באנר מותאמת בתוך השורה. הגודל שתקבלו ישמש לבקשת מודעת הבאנר המותאמת. כדי שגודל המודעה המותאם צריך:
    1. אפשר לקבוע את רוחב המכשיר בפיקסלים בלתי תלויים בדחיסות, או להגדיר רוחב משלכם אם אתם לא רוצים להשתמש ברוחב המלא של המסך. אפשר להשתמש בMediaQuery.of(context) כדי לקבל את רוחב המסך.
    2. משתמשים בשיטות הסטטיות המתאימות לסיווג גודל המודעה, כמו AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width) כדי לקבל אובייקט AdSize מותאם באופן מוטבע לכיוון הנוכחי.
    3. כדי להגביל את גובה הבאנר, אפשר להשתמש בשיטה הסטטית AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight).
  2. יוצרים אובייקט AdManagerBannerAd עם מזהה יחידת המודעות, גודל המודעה המותאם ואובייקט של בקשה להצגת מודעה.
  3. טוענים את המודעה.
  4. בקריאה החוזרת של onAdLoaded, משתמשים ב-AdManagerBannerAd.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;
  AdManagerBannerAd? _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 = AdManagerBannerAd(
      // TODO: replace with your own ad unit.
      adUnitId: '<your-ad-unit>',
      size: size,
      request: AdManagerAdRequest(),
      listener: AdManagerBannerAdListener(
        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.
          AdManagerBannerAd bannerAd = (ad as AdManagerBannerAd);
          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();
  }
}