ऐंकर किए गए अडैप्टिव बैनर

अडैप्टिव बैनर, रिस्पॉन्सिव विज्ञापनों की अगली-पीढ़ी की टेक्नोलॉजी हैं. ये हर डिवाइस के लिए विज्ञापन के साइज़ को ऑप्टिमाइज़ करके, परफ़ॉर्मेंस को बेहतर बनाते हैं. अडैप्टिव बैनर से, सिर्फ़ तय ऊंचाई वाले स्मार्ट बैनर में सुधार किया जा सकता है. इससे, आपको विज्ञापन की चौड़ाई तय करने की सुविधा मिलती है. साथ ही, इसका इस्तेमाल विज्ञापन का साइज़ तय करने के लिए किया जा सकता है.

अडैप्टिव बैनर, विज्ञापन का सही साइज़ चुनने के लिए तय ऊंचाई के बजाय, तय आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) का इस्तेमाल करते हैं. इससे ऐसे बैनर विज्ञापन बनते हैं जो सभी डिवाइसों की स्क्रीन का एक जैसा हिस्सा घेरते हैं. साथ ही, ये विज्ञापन की परफ़ॉर्मेंस को बेहतर बनाने के मौके देते हैं.

अडैप्टिव बैनर का इस्तेमाल करते समय, ध्यान रखें कि वे दिए गए डिवाइस और चौड़ाई के लिए, हमेशा एक जैसा साइज़ दिखाएंगे. किसी डिवाइस पर अपने लेआउट की जांच करने के बाद, यह पक्का किया जा सकता है कि विज्ञापन का साइज़ नहीं बदलेगा. हालांकि, अलग-अलग डिवाइसों पर बैनर क्रिएटिव का साइज़ बदल सकता है. इस वजह से, हमारा सुझाव है कि आपके लेआउट में विज्ञापन की ऊंचाई के हिसाब से बदलाव हो. बहुत कम मामलों में ऐसा हो सकता है कि अडैप्टिव साइज़ की पूरी जानकारी न भरी जा सके और इस स्लॉट में स्टैंडर्ड साइज़ के क्रिएटिव को सेंटर में रखा जाए.

ज़रूरी शर्तें

• Mobile Ads Flutter प्लगिन को इंपोर्ट करने का तरीका जानने के लिए, 'शुरू करें' गाइड में दिए गए निर्देशों का पालन करें.

अडैप्टिव बैनर का इस्तेमाल कब करें

अडैप्टिव बैनर को इस तरह से डिज़ाइन किया गया है कि वे इंडस्ट्री स्टैंडर्ड के हिसाब से, 320x50 साइज़ वाले बैनर साइज़ की जगह ले सकें. साथ ही, स्मार्ट बैनर फ़ॉर्मैट की जगह ले जाए.

आम तौर पर, इन बैनर साइज़ को ऐंकर बैनर के तौर पर इस्तेमाल किया जाता है. ये आम तौर पर, स्क्रीन के सबसे ऊपर या नीचे लॉक होते हैं.

ऐसे ऐंकर वाले बैनर के लिए, अडैप्टिव बैनर का इस्तेमाल करते समय आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) 320x50 के स्टैंडर्ड विज्ञापन की तरह ही होगा. इसे यहां दिए गए तीन उदाहरणों में देखा जा सकता है:

320x50 बैनर

अडैप्टिव बैनर

स्मार्ट बैनर

अडैप्टिव बैनर, स्क्रीन के उपलब्ध साइज़ का बेहतर तरीके से इस्तेमाल करता है. इसके अलावा, स्मार्ट बैनर के मुकाबले अडैप्टिव बैनर बेहतर विकल्प होता है, क्योंकि:

• यह, चौड़ाई को फ़ुल-स्क्रीन पर ज़बरदस्ती लागू करने के बजाय, आपकी दी गई किसी भी चौड़ाई का इस्तेमाल करता है. इससे, आपको iOS पर सेफ़ एरिया और Android पर कटआउट दिखाने की सुविधा मिलती है.

• यह अलग-अलग साइज़ के डिवाइसों पर एक समान ऊंचाई रखने के बजाय, खास डिवाइस के लिए सबसे सही ऊंचाई चुनता है और डिवाइस के फ़्रैगमेंटेशन के असर को कम करता है.

लागू करने से जुड़ी जानकारी

अपने ऐप्लिकेशन में अडैप्टिव बैनर लागू करते समय, इन बातों का ध्यान रखें:

• आपको उस व्यू की चौड़ाई का पता होना चाहिए जिस पर विज्ञापन दिखाया जाएगा. साथ ही, इसे डिवाइस की चौड़ाई और लागू होने वाले सुरक्षित एरिया या कटआउट को ध्यान में रखना चाहिए.
• अडैप्टिव साइज़ के साथ काम करने के लिए, आपको नए लाइन आइटम अपडेट करने या बनाने पड़ सकते हैं. ज़्यादा जानें.
• पक्का करें कि जब छोटे विज्ञापन साइज़ ऐसे दिखाए जाते हैं जो विज्ञापन स्लॉट में नहीं दिखते, तब AdMob नीतियों के मुताबिक आपके विज्ञापन व्यू का बैकग्राउंड पारदर्शी न हो.
• पक्का करें कि आप Google Mobile Ads Flutter प्लगिन के सबसे नए वर्शन का इस्तेमाल कर रहे हैं.
• अडैप्टिव बैनर के साइज़ इस तरह से डिज़ाइन किए गए हैं कि वे पूरी चौड़ाई वाले बैनर का इस्तेमाल करने पर, बेहतर तरीके से काम करें. ज़्यादातर मामलों में, यह इस्तेमाल किए जा रहे डिवाइस की स्क्रीन की पूरी चौड़ाई होगी. लागू होने वाले सुरक्षित क्षेत्रों को ध्यान में रखें.
• Adaptive AdSize API का इस्तेमाल करते समय, Google Mobile Ads SDK, दी गई चौड़ाई के हिसाब से ऑप्टिमाइज़ की गई विज्ञापन ऊंचाई के साथ बैनर का साइज़ करेगा.
• उपयोगकर्ताओं के हिसाब से विज्ञापन का साइज़ तय करने के दो तरीके हैं: AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) किसी खास ओरिएंटेशन का अनुरोध करने के लिए और AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) लागू होने के समय, मौजूदा ओरिएंटेशन के लिए अनुरोध करने के लिए.
• दिए गए डिवाइस पर, दी गई चौड़ाई के लिए नतीजे का साइज़ हमेशा एक ही रहेगा. इसलिए, किसी डिवाइस पर अपने लेआउट की जांच करने के बाद, पक्का करें कि विज्ञापन का साइज़ नहीं बदलेगा.
• ऐंकर बैनर की ऊंचाई, डिवाइस की ऊंचाई के 15% से कम या 90 डेंसिटी इंडिपेंडेंट पिक्सल से कभी ज़्यादा नहीं होती. साथ ही, यह कभी भी 50 डेंसिटी से कम नहीं होनी चाहिए.

क्विकस्टार्ट

ऐंकर वाले अडैप्टिव बैनर को लागू करने के लिए, यह तरीका अपनाएं.

1. अडैप्टिव बैनर विज्ञापन का साइज़ पाएं. आपको स्टैटिक मेथड से साइज़ की जानकारी मिलती है. अडैप्टिव बैनर का अनुरोध करते समय, इस साइज़ का इस्तेमाल किया जाता है. अडैप्टिव विज्ञापन का साइज़ पाने के लिए, पक्का करें कि:
   1. डेंसिटी इंडिपेंडेंट पिक्सल में डिवाइस की चौड़ाई का पता लगाएं. अगर आपको स्क्रीन की पूरी चौड़ाई का इस्तेमाल नहीं करना है, तो अपनी चौड़ाई खुद सेट करें. स्क्रीन की चौड़ाई पाने के लिए, MediaQuery.of(context) का इस्तेमाल किया जा सकता है.
   2. मौजूदा ओरिएंटेशन के हिसाब से AdSize ऑब्जेक्ट पाने के लिए, विज्ञापन साइज़ क्लास के सही स्टैटिक तरीकों का इस्तेमाल करें, जैसे कि AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width).
2. अपने विज्ञापन यूनिट आईडी, ज़रूरत के हिसाब से विज्ञापन का साइज़, और विज्ञापन अनुरोध ऑब्जेक्ट के साथ AdManagerBannerAd ऑब्जेक्ट बनाएं.
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> {
  AdManagerBannerAd? _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 = AdManagerBannerAd(
      // TODO: replace with your own ad unit.
      adUnitId: '<your-ad-unit>',
      sizes: [size],
      request: AdManagerAdRequest(),
      listener: AdManagerBannerAdListener(
        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 AdManagerBannerAd;
            _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) का इस्तेमाल करें और पसंद के मुताबिक ओरिएंटेशन पास करें.