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

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

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

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

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

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

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

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

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

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

באנר בגודל 320x50

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

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

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

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

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

הערות להטמעה

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

• עליך לדעת את רוחב התצוגה שבה תמוקם המודעה, וצריך להביא בחשבון את רוחב המכשיר ואת כל האזורים הבטוחים של גזירי גזרה רלוונטיים.
• מוודאים שהרקע של תצוגת המודעה אטום כדי לעמוד בדרישות של המדיניות של AdMob כאשר מודעות בגדלים קטנים יותר מוצגות לא ימלאו את מיקום המודעה.
• מוודאים שאתם משתמשים בגרסה העדכנית ביותר של Google Mobile Ads Flutter יישומי פלאגין.
• הגדלים של מודעות הבאנר המותאמות מתוכננים כך שיפעלו בצורה הכי טובה כשמשתמשים הרוחב הזמין. ברוב המקרים, יהיה זה הרוחב המלא של המסך, של המכשיר שבו נעשה שימוש. חשוב להביא בחשבון את האזורים הבטוחים הרלוונטיים.
• גודל מודעת הבאנר של Google Mobile Ads SDK יהיה מותאם לגובה המודעה ברוחב הנתון כשמשתמשים בממשקי ה-API המתאימים של AdSize.
• יש שתי שיטות להגדרת גודל מודעה מותאם: 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. הקצר הזה. התשובות שלך יעזרו לנו להשתפר.