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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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