מודעות באנר מותאמות הן הדור הבא של מודעות רספונסיביות. הן עוברות אופטימיזציה של גודל המודעה לכל מכשיר, כדי למקסם את הביצועים. בניגוד למודעות באנר בגודל קבוע, שתומכות רק בגבהים קבועים, מודעות באנר מותאמות מאפשרות למפתחים לציין את רוחב המודעה ולהשתמש בו כדי לקבוע את גודל המודעה האופטימלי.
כדי לבחור את גודל המודעה המתאים ביותר, במודעות באנר מותאמות שמוצגות בתוך הטקסט, נעשה שימוש בגובה מקסימלי במקום בגובה קבוע. התוצאה תהיה הזדמנויות לשיפור הביצועים.
מתי כדאי להשתמש במודעות באנר מותאמות בגוף הטקסט
מודעות באנר מותאמות שמוצגות בתוך הטקסט הן מודעות באנר גדולות וגבוהות יותר בהשוואה למודעות באנר מותאמות ומעוגנות. הגובה שלהן משתנה, והן יכולות להיות בגובה המסך של המכשיר.
הם נועדו להיות ממוקמים בתוכן גלילה, לדוגמה:
דרישות מוקדמות
- פועלים לפי ההוראות שמפורטות במדריך למתחילים כדי לייבא את הפלאגין של Mobile Ads ל-Flutter.
לפני שמתחילים
כשאתם מטמיעים מודעות באנר מותאמות באפליקציה, חשוב לשים לב לנקודות הבאות:
חשוב לוודא שאתם משתמשים בגרסה העדכנית ביותר של 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
עם הרוחב שצוין ודגל inline. הגובה הוא אפס אוmaxHeight
, בהתאם לממשק ה-API שבו אתם משתמשים. הגובה בפועל של המודעה זמין כשהיא מוחזרת.מודעת באנר מותאמת המשולבת בתוכן הדף מיועדת להופיע בתוך התוכן בזמן שהמשתמשים גוללים בדף. הגובה של הבאנר יכול להיות בגובה של מסך המכשיר או מוגבל על ידי גובה מקסימלי, בהתאם ל-API.
הטמעה
כדי להטמיע באנר פשוט מותאם בתוך הדף, פועלים לפי השלבים הבאים.
- מקבלים גודל של מודעת באנר מותאמת שמוצגת בתוך הטקסט. הגודל שתקבלו ישמש כדי לבקש את מודעת הבאנר המותאמת. כדי לקבל מודעות בגודל מותאם, חשוב לוודא:
- מקבלים את רוחב המכשיר שבשימוש בפיקסלים שלא תלויים בדחיסות (dp), או מגדירים רוחב משלכם אם לא רוצים להשתמש ברוחב המלא של המסך.
אפשר להשתמש ב-
MediaQuery.of(context)
כדי לקבל את רוחב המסך. - משתמשים בשיטות הסטטיות המתאימות במחלקה של גודל המודעה, כמו
AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width)
כדי לקבל אובייקטAdSize
מותאם בתוך שורת טקסט לכיוון הנוכחי. - אם רוצים להגביל את הגובה של הבאנר, אפשר להשתמש ב-method הסטטי
AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight)
.
- מקבלים את רוחב המכשיר שבשימוש בפיקסלים שלא תלויים בדחיסות (dp), או מגדירים רוחב משלכם אם לא רוצים להשתמש ברוחב המלא של המסך.
אפשר להשתמש ב-
- יוצרים אובייקט
AdManagerBannerAd
עם מזהה יחידת המודעות, גודל המודעה המותאם אישית ואובייקט של בקשה להצגת מודעה. - טוענים את המודעה.
- בקריאה החוזרת (callback) של
onAdLoaded
, משתמשים ב-AdManagerBannerAd.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;
AdManagerBannerAd? _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 = AdManagerBannerAd(
// TODO: replace with your own ad unit.
adUnitId: '/21775744923/example/adaptive-banner',
size: size,
request: AdManagerAdRequest(),
listener: AdManagerBannerAdListener(
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.
AdManagerBannerAd bannerAd = (ad as AdManagerBannerAd);
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();
}
}