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

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

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

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

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

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

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

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

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

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