מודעות באנר מותאמות הן הדור הבא של מודעות רספונסיביות, ביצועי המודעות באמצעות אופטימיזציה של גודל המודעות בכל מכשיר. משפרים מודעות באנר חכמות שתומכים רק בגובה קבוע. מודעות באנר מותאמות מאפשרות לכם לציין רוחב המודעה ויש להשתמש בערך הזה כדי לקבוע את הגודל האופטימלי של המודעה.
כדי לבחור את גודל המודעה המתאים ביותר, המערכת משתמשת ביחסי גובה-רוחב קבועים במקום בגבהים קבועים. התוצאה היא מודעות באנר שתופסות חלק עקבי יותר של המסך בכל המכשירים, ומספק הזדמנויות לשיפור או של ביצועים.
כשעובדים עם מודעות באנר מותאמות, שימו לב שהן תמיד יחזירו בגודל קבוע למכשיר ולרוחב נתונים. אחרי שבדקת את הפריסה בכל מכשיר, תוכל להיות בטוח שגודל המודעה לא ישתנה. אבל, הגודל של קריאייטיב הבאנר עשוי להשתנות במכשירים שונים. כתוצאה מכך, אנחנו ממליצים שהפריסה שלך תתאים להבדלים בגובה המודעה. במקרים נדירים, לא ניתן למלא את הגודל המלא המותאם, ורק קריאייטיב בגודל סטנדרטי במרכז החריץ הזה.
דרישות מוקדמות
- פועלים לפי ההוראות שמפורטות במדריך למתחילים כדי לייבא את הפלאגין של 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 פיקסלים בלתי תלויים בדחיסות.
מדריך למתחילים
כדי להטמיע מודעת באנר מעוגנת בגודל מותאם, פועלים לפי השלבים הבאים.
- קבלו גודל של מודעת באנר מותאמת. הגודל שמתקבל ישמש לבקשה שלך
מודעת הבאנר המותאמת. כדי לקבל את הגודל של המודעה המותאמת, צריך לפעול בהתאם להנחיות הבאות:
- אפשר לקבל את רוחב המכשיר בשימוש בפיקסלים בלתי תלויים בדחיסות, או להגדיר
ברוחב שלכם, אם אתם לא רוצים להשתמש ברוחב המלא של המסך.
אפשר להשתמש ב-
MediaQuery.of(context)
כדי לקבל את רוחב המסך. - משתמשים בשיטות הסטטיות המתאימות בסיווג של גודל המודעה, כמו
AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)
כדי לקבל אובייקטAdSize
דינמי לכיוון הנוכחי.
- אפשר לקבל את רוחב המכשיר בשימוש בפיקסלים בלתי תלויים בדחיסות, או להגדיר
ברוחב שלכם, אם אתם לא רוצים להשתמש ברוחב המלא של המסך.
אפשר להשתמש ב-
- יוצרים אובייקט
BannerAd
עם המזהה של יחידת המודעות, גודל המודעה המותאם אובייקט של בקשה להצגת מודעה. - טוענים את המודעה כמו שעושים במודעת באנר רגילה ומציגים אותה
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.