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

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

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

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

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

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

מודעות באנר מותאמות הן מחליפות את הפורמט שבו משתמשים גם בתעשייה מודעת באנר בגודל סטנדרטי 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 Banner Example.