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

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

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

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

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

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

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

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

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


320x50 बैनर
अडैप्टिव बैनर
स्मार्ट बैनर

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

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

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

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

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

  • आपको उस व्यू की चौड़ाई पता होनी चाहिए जिसमें विज्ञापन दिखाया जाएगा. इसमें डिवाइस की चौड़ाई और लागू होने वाले सेफ़ एरिया या कटआउट को ध्यान में रखना चाहिए.
  • पक्का करें कि आपके विज्ञापन व्यू के बैकग्राउंड की जानकारी साफ़ तौर पर न दी गई हो जब छोटे विज्ञापन साइज़ के विज्ञापन से बेहतर नतीजे मिलते हैं, तब AdMob की नीतियों से विज्ञापन स्लॉट नहीं भरता.
  • पक्का करें कि आपके पास Google Mobile Ads Flutter प्लग इन का नया वर्शन हो.
  • अडैप्टिव बैनर के साइज़ इस तरह से डिज़ाइन किए गए हैं कि वे पूरी तरह से उपलब्ध चौड़ाई. ज़्यादातर मामलों में, यह इस्तेमाल किए जा रहे डिवाइस की स्क्रीन की पूरी चौड़ाई होगी. लागू होने वाले सेफ़ ज़ोन का ध्यान रखें.
  • अडैप्टिव 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.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 रिपॉज़िटरी का बैनर का उदाहरण देखें को अपनाएं.