Dart के नेटिव टेंप्लेट

नेटिव टेंप्लेट आपके नेटिव विज्ञापनों के लिए कोड-पूरा होने वाले व्यू हैं. इन्हें तेज़ी से लागू करने और आसानी से बदलाव करने के लिए डिज़ाइन किया गया है. नेटिव टेंप्लेट में, प्लगिन आपके लिए पहले से बने Android और iOS लेआउट उपलब्ध कराता है. साथ ही, Dart API का इस्तेमाल करके, नेटिव एसेट की स्टाइल को पसंद के मुताबिक बनाया जा सकता है.

इस गाइड में बताया गया है कि दिए गए प्लैटफ़ॉर्म के व्यू को बेहतर बनाने और विज्ञापन को रेंडर करने के लिए, Dart API का इस्तेमाल कैसे करना है.

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

  • Flutter 2.4.0 या इसके बाद का वर्शन.

हमेशा टेस्ट विज्ञापनों से टेस्ट करें

अपने ऐप्लिकेशन बनाते और टेस्ट करते समय पक्का करें कि आप लाइव, प्रोडक्शन विज्ञापनों के बजाय टेस्ट विज्ञापनों का इस्तेमाल करें. नेटिव विज्ञापनों के लिए हमारे खास टेस्ट विज्ञापन यूनिट आईडी का इस्तेमाल करना, टेस्ट विज्ञापन को लोड करने का सबसे आसान तरीका है:

Android

ca-app-pub-3940256099942544/2247696110

iOS

ca-app-pub-3940256099942544/3986624511

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

विज्ञापन लोड करें

इस उदाहरण में, medium साइज़ के नेटिव टेंप्लेट का इस्तेमाल करके, नेटिव विज्ञापन लोड करने के बारे में बताया गया है:

class NativeExampleState extends State<NativeExample> {
  NativeAd? nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            debugPrint('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            debugPrint('$NativeAd failed to load: $error');
            ad.dispose();
          },
        ),
        request: const AdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

स्टाइलिंग के उपलब्ध विकल्पों के लिए, NativeTemplateStyle और NativeTemplateTextStyle देखें.

विज्ञापन कस्टमाइज़ करें

नेटिव टेंप्लेट का इस्तेमाल करके नेटिव विज्ञापन को पसंद के मुताबिक बनाने पर, आपके विज्ञापन का यूज़र इंटरफ़ेस (यूआई) कॉन्फ़िगरेशन NativeTemplateStyle क्लास में रहेगा. इससे आप पूरे नेटिव विज्ञापन को Dart कोड में स्टाइल कर सकेंगे.

टेंप्लेट के साइज़

Flutter नेटिव विज्ञापन टेंप्लेट दो तरह के होते हैं: TemplateType.small और TemplateType.medium. TableView या GridView, इन-फ़ीड विज्ञापनों के लिए या पतले आयताकार विज्ञापन व्यू की ज़रूरत वाली किसी भी जगह के लिए, छोटा टेंप्लेट सबसे सही होता है. मीडियम टेंप्लेट, आधे से तीन तिमाही के पेज व्यू के तौर पर होना चाहिए. यह लैंडिंग या स्प्लैश पेज के लिए अच्छा है.

छोटा

Android
iOS
मीडियम

Android
iOS

नेटिव विज्ञापन इवेंट

नेटिव विज्ञापन इंटरैक्शन से जुड़े इवेंट की सूचना पाने के लिए, विज्ञापन की listener प्रॉपर्टी का इस्तेमाल करें. इसके बाद, विज्ञापन इवेंट कॉलबैक पाने के लिए, NativeAdListener लागू करें.

class NativeExampleState extends State<NativeExample> {
  NativeAd? _nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            print('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            print('$NativeAd failedToLoad: $error');
            ad.dispose();
          },
          // Called when a click is recorded for a NativeAd.
          onAdClicked: (ad) {},
          // Called when an impression occurs on the ad.
          onAdImpression: (ad) {},
          // Called when an ad removes an overlay that covers the screen.
          onAdClosed: (ad) {},
          // Called when an ad opens an overlay that covers the screen.
          onAdOpened: (ad) {},
          // For iOS only. Called before dismissing a full screen view
          onAdWillDismissScreen: (ad) {},
          // Called when an ad receives revenue value.
          onPaidEvent: (ad, valueMicros, precision, currencyCode) {},
        ),
        request: const AdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

Display Network में दिखने वाला विज्ञापन

NativeAd को विजेट के तौर पर दिखाने के लिए, आपको load() को कॉल करने के बाद, काम करने वाले विज्ञापन के साथ AdWidget को इंस्टैंशिएट करना होगा. load() को कॉल करने से पहले, विजेट बनाया जा सकता है. हालांकि, विजेट को विजेट ट्री में जोड़ने से पहले, load() को कॉल करना ज़रूरी है.

AdWidget को Flutter की Widget क्लास से इनहेरिट करता है और इसे किसी भी दूसरे विजेट की तरह इस्तेमाल किया जा सकता है. iOS पर, विजेट को किसी खास चौड़ाई और ऊंचाई वाले कंटेनर में रखें. नहीं तो, हो सकता है कि आपका विज्ञापन न दिखे.

// Small template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 90, // minimum recommended height
    maxWidth: 400,
    maxHeight: 200,
  ),
  child: AdWidget(ad: _nativeAd!),
);

// Medium template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 320, // minimum recommended height
    maxWidth: 400,
    maxHeight: 400,
  ),
  child: AdWidget(ad: _nativeAd!),
);

विज्ञापन नष्ट करें

अगर आपको NativeAd के ऐक्सेस की ज़रूरत नहीं है, तो इसे मिटा देना चाहिए. dispose() को कब कॉल करें, इसका सबसे सही तरीका यह है कि नेटिव विज्ञापन से जुड़े AdWidget को विजेट ट्री से हटा दिया जाए और AdListener.onAdFailedToLoad() कॉलबैक से हटा दिया जाए.

अगले चरण

GitHub पर पूरा उदाहरण

नेटिव टेंप्लेट