מודעות באנר מותאמות עם עוגן

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

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

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

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

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

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

מודעות באנר מותאמות מחליפות את הפורמט המקובל גם את מודעות באנר בגודל 320x50 וגם את הפורמט של מודעות הבאנר החכמות.

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

בבאנר מעוגן כזה, יחס הגובה-רוחב של מודעות באנר מותאמות יהיה דומה לזה של מודעה רגילה בגודל 320x50, כפי שאפשר לראות בשלוש הדוגמאות הבאות:

באנר בגודל 320x50

מודעת באנר מותאמת

מודעת באנר חכמה

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

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

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

הערות להטמעה

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

• עליכם לדעת מהו רוחב התצוגה שבה המודעה תוצג, תוך התחשבות ברוחב המכשיר ובאזורים בטוחים או בקטעים חתוכים רלוונטיים.
• כדי לעמוד בדרישות המדיניות של AdMob כשמוצגות מודעות בגדלים קטנים יותר שלא ממלאות את שטח המודעה, חשוב לוודא שהרקע של תצוגת המודעה אטום.
• הקפידו להשתמש בגרסה העדכנית של הפלאגין Google Mobile Ads Flutter.
• הגדלים של מודעות הבאנר המותאמות מתוכננים כך שפועלים בצורה הכי טובה כשמשתמשים ברוחב המלא שזמין. ברוב המקרים, זה יהיה רוחב המסך המלא של המכשיר שבשימוש. חשוב להביא בחשבון את האזורים הבטוחים הרלוונטיים.
• כאשר משתמשים בממשקי ה-API המותאמים של AdSize, מודעת הבאנר נקבעת על ידי Google Mobile Ads SDK עם גובה אופטימלי של המודעה בהתאם לרוחב.
• יש שתי שיטות לבקש גודל מודעה אדפטיבי: AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) כדי לבקש כיוון ספציפי, ו-AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) לכיוון הנוכחי בזמן ההפעלה.
• הגודל שיוחזר לרוחב נתון במכשיר נתון יהיה תמיד זהה, לכן אחרי שבודקים את הפריסה במכשיר נתון, אפשר להיות בטוחים שגודל המודעה לא ישתנה.
• הגובה של מודעת הבאנר המעוגנת אף פעם לא גדול יותר מ-15% מגובה המכשיר או מהפיקסלים הבלתי תלויים בדחיסות 90, ואף פעם לא קטן מ-50 פיקסלים בלתי תלויים.

מדריך למתחילים

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

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

קוד לדוגמה

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

import 'dart:io';

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

/// This example demonstrates anchored adaptive banner ads.
class AnchoredAdaptiveExample extends StatefulWidget {
  @override
  _AnchoredAdaptiveExampleState createState() =>
      _AnchoredAdaptiveExampleState();
}

class _AnchoredAdaptiveExampleState extends State<AnchoredAdaptiveExample> {
  BannerAd? _anchoredAdaptiveAd;
  bool _isLoaded = false;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _loadAd();
  }

  Future<void> _loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final AnchoredAdaptiveBannerAdSize? size =
        await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
            MediaQuery.of(context).size.width.truncate());

    if (size == null) {
      print('Unable to get height of anchored banner.');
      return;
    }

    _anchoredAdaptiveAd = BannerAd(
      // TODO: replace these test ad units with your own ad unit.
      adUnitId: Platform.isAndroid
          ? 'ca-app-pub-3940256099942544/6300978111'
          : 'ca-app-pub-3940256099942544/2934735716',
      size: size,
      request: AdRequest(),
      listener: BannerAdListener(
        onAdLoaded: (Ad ad) {
          print('$ad loaded: ${ad.responseInfo}');
          setState(() {
            // When the ad is loaded, get the ad size and use it to set
            // the height of the ad container.
            _anchoredAdaptiveAd = ad as BannerAd;
            _isLoaded = true;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('Anchored adaptive banner failedToLoad: $error');
          ad.dispose();
        },
      ),
    );
    return _anchoredAdaptiveAd!.load();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('Anchored adaptive banner example'),
        ),
        body: Center(
          child: Stack(
            alignment: AlignmentDirectional.bottomCenter,
            children: <Widget>[
              ListView.separated(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  itemBuilder: (context, index) {
                    return Text(
                      'Placeholder text',
                      style: TextStyle(fontSize: 24),
                    );
                  },
                  separatorBuilder: (context, index) {
                    return Container(height: 40);
                  },
                  itemCount: 20),
              if (_anchoredAdaptiveAd != null && _isLoaded)
                Container(
                  color: Colors.green,
                  width: _anchoredAdaptiveAd!.size.width.toDouble(),
                  height: _anchoredAdaptiveAd!.size.height.toDouble(),
                  child: AdWidget(ad: _anchoredAdaptiveAd!),
                )
            ],
          ),
        ),
      );

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

כאן נעשה שימוש בפונקציה AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize כדי לקבל את הגודל של באנר במיקום מוצמדות בהתאם לכיוון הנוכחי של הממשק. כדי לטעון מראש באנר מוצמדים בכיוון נתון, משתמשים ב-AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) ומעבירים את הכיוון הרצוי.

דוגמה מלאה ב-GitHub

כדי לראות את הדוגמה המלאה, אפשר לעיין במאגר GitHub Banner Example.