अडैप्टिव बैनर, रिस्पॉन्सिव विज्ञापनों की अगली-पीढ़ी की टेक्नोलॉजी हैं. ये हर डिवाइस के लिए विज्ञापन के साइज़ को ऑप्टिमाइज़ करके, की परफ़ॉर्मेंस को बेहतर बनाते हैं. अडैप्टिव बैनर से, सिर्फ़ तय ऊंचाई वाले स्मार्ट बैनर को बेहतर बनाया जा सकता है. आपको विज्ञापन की चौड़ाई बताने में मदद मिलती है. साथ ही, इसका इस्तेमाल करके विज्ञापन का सही साइज़ तय किया जा सकता है.
अडैप्टिव बैनर विज्ञापनों का सही साइज़ चुनने के लिए, तय ऊंचाई के बजाय, तय आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) का इस्तेमाल करते हैं. इससे ऐसे बैनर विज्ञापन बनते हैं जो सभी डिवाइसों पर, स्क्रीन के एक जैसे हिस्से को घेरते हैं. साथ ही, इससे परफ़ॉर्मेंस को बेहतर बनाने का मौका मिलता है.
अडैप्टिव बैनर का इस्तेमाल करते समय, इस बात का ध्यान रखें कि वे दिए गए डिवाइस और चौड़ाई के हिसाब से, हमेशा एक जैसा साइज़ दिखाएंगे. किसी डिवाइस पर अपने लेआउट की जांच करने के बाद, यह पक्का किया जा सकता है कि विज्ञापन का साइज़ नहीं बदलेगा. हालांकि, अलग-अलग डिवाइस पर बैनर क्रिएटिव का साइज़ बदल सकता है. इसलिए, हमारा सुझाव है कि आपके लेआउट में विज्ञापन की ऊंचाई के हिसाब से बदलाव हो. बहुत कम मामलों में ऐसा हो सकता है कि फ़ुल अडैप्टिव साइज़ न भरा जाए और इसके बजाय स्टैंडर्ड साइज़ के क्रिएटिव को इस स्लॉट में फ़ोकस किया जाए.
ज़रूरी शर्तें
- Mobile Ads Flutter प्लगिन को इंपोर्ट करने का तरीका जानने के लिए, 'शुरू करें' गाइड में दिए गए निर्देशों का पालन करें.
अडैप्टिव बैनर का इस्तेमाल कब करना चाहिए
अडैप्टिव बैनर को इस तरह से डिज़ाइन किया गया है कि यह इंडस्ट्री स्टैंडर्ड 320x50 वाले बैनर साइज़ और स्मार्ट बैनर फ़ॉर्मैट, दोनों की जगह ले लेता है.
आम तौर पर, इन बैनर साइज़ का इस्तेमाल ऐंकर वाले बैनर के तौर पर किया जाता है. ये आम तौर पर, स्क्रीन पर सबसे ऊपर या नीचे लॉक होते हैं.
ऐसे ऐंकर वाले बैनर के लिए, इस्तेमाल करते समय आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) 320x50 के स्टैंडर्ड विज्ञापन की तरह ही होगा, जैसा कि यहां दिए गए तीन उदाहरणों में दिखाया गया है:
 320x50 बैनर |
 अडैप्टिव बैनर |
 स्मार्ट बैनर |
अडैप्टिव बैनर, स्क्रीन के उपलब्ध साइज़ का बेहतर तरीके से इस्तेमाल करता है. इसके अलावा, स्मार्ट बैनर के मुकाबले, अडैप्टिव बैनर बेहतर विकल्प है, क्योंकि:
यह चौड़ाई को फ़ुल-स्क्रीन बनाने के बजाय, आपकी तय की गई चौड़ाई का इस्तेमाल करता है. इससे iOS पर सुरक्षित जगह और Android पर कटआउट दिखाने में मदद मिलती है.
यह अलग-अलग साइज़ के डिवाइसों के लिए एक समान ऊंचाई चुनने के बजाय, खास डिवाइस के लिए सही ऊंचाई चुनता है. इससे, डिवाइस फ़्रैगमेंटेशन के असर को कम किया जा सकता है.
लागू करने से जुड़ी जानकारी
अपने ऐप्लिकेशन में अडैप्टिव बैनर लागू करते समय, इन बातों का ध्यान रखें:
- आपको जिस व्यू में विज्ञापन दिखाया जाएगा उसकी चौड़ाई ज़रूर पता होनी चाहिए और इसे डिवाइस की चौड़ाई और लागू होने वाले सुरक्षित हिस्सों या कटआउट को ध्यान में रखना चाहिए.
- पक्का करें कि जब छोटे विज्ञापन साइज़ वाले विज्ञापन स्लॉट में नहीं दिखते, तो पक्का करें कि AdMob की नीतियों के मुताबिक विज्ञापन के व्यू का बैकग्राउंड साफ़ न हो.
- पक्का करें कि Google Mobile Ads Flutter प्लगिन के नए वर्शन का इस्तेमाल किया जा रहा है.
- अडैप्टिव बैनर के साइज़, इस तरह से डिज़ाइन किए गए हैं कि वे पूरी चौड़ाई का इस्तेमाल करने पर, बेहतर तरीके से काम करते हैं. ज़्यादातर मामलों में, यह इस्तेमाल किए जा रहे डिवाइस की स्क्रीन की पूरी चौड़ाई होगी. इसके लिए, सुरक्षित जगहों का ध्यान रखें.
- अडैप्टिव AdSize एपीआई का इस्तेमाल करते समय, Google Mobile Ads SDK, तय की गई चौड़ाई के हिसाब से विज्ञापन की ऊंचाई के मुताबिक बैनर का साइज़ बढ़ाएगा.
- अडैप्टिव विज्ञापन का साइज़ तय करने के दो तरीके हैं:
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) का इस्तेमाल करें और पसंद के ओरिएंटेशन को पास करें.