नेटिव टेंप्लेट आपके नेटिव विज्ञापनों के ऐसे व्यू होते हैं जिनके लिए कोड को पूरा करके, उन्हें तेज़ी से लोड किया जा सकता है और आसानी से उनमें बदलाव कर सकें. नेटिव टेंप्लेट की मदद से, प्लगिन आपको आपके लिए Android और iOS के पहले से बने लेआउट का इस्तेमाल किया जा सकता है. साथ ही, आपको होम स्क्रीन की स्टाइल को पसंद के मुताबिक बनाने की सुविधा मिलती है. Dart API का इस्तेमाल करते हुए नेटिव एसेट.
इस गाइड में डेटा को बेहतर बनाने के लिए, Dart API के इस्तेमाल का तरीका बताया गया है प्लैटफ़ॉर्म व्यू और विज्ञापन दिखाने के लिए डिज़ाइन किया गया है.
ज़रूरी शर्तें
- Flutter 2.4.0 या इसके बाद का वर्शन होना चाहिए.
- शुरुआती निर्देश के बारे में पूरी जानकारी दें.
- नेटिव विज्ञापनों के विकल्पों के बारे में जानें.
हमेशा टेस्ट विज्ञापनों से टेस्ट करें
अपने ऐप्लिकेशन बनाते और उनकी जांच करते समय पक्का करें कि आप विज्ञापनों के बजाय टेस्ट विज्ञापनों का इस्तेमाल करें लाइव, प्रोडक्शन विज्ञापन. टेस्ट विज्ञापन लोड करने का सबसे आसान तरीका है कि आप हमारे नेटिव विज्ञापनों के लिए टेस्ट विज्ञापन यूनिट आईडी:
/6499/example/native
टेस्ट विज्ञापन यूनिट को, हर अनुरोध के टेस्ट विज्ञापन दिखाने के लिए कॉन्फ़िगर किया जाता है. इसलिए, इन्हें कोडिंग, टेस्ट, और डीबग करना—बस पक्का करें कि आप आपका ऐप्लिकेशन पब्लिश करना.
विज्ञापन लोड करें
नीचे दिए गए उदाहरण में, medium
साइज़ वाले नेटिव विज्ञापन का इस्तेमाल करके नेटिव विज्ञापन को लोड किया गया है
टेम्प्लेट:
class NativeExampleState extends State<NativeExample> {
NativeAd? nativeAd;
bool _nativeAdIsLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final _adUnitId = '/6499/example/native';
/// 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 AdManagerAdRequest(),
// 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
क्लास में लाइव रहेंगे/रहेंगी, जिससे आपको पूरी स्टाइल में कॉन्टेंट बनाने में मदद मिलेगी
डार्ट कोड में नेटिव विज्ञापन के लिए.
टेंप्लेट के साइज़
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 _adUnitId = '/6499/example/native';
/// 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 AdManagerAdRequest(),
// 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
को विजेट के रूप में दिखाने के लिए, आपको एक इंस्टैंशिएट करना होगा
AdWidget
load()
को कॉल करने के बाद समर्थित विज्ञापन के साथ. इस तारीख से पहले भी विजेट बनाया जा सकता है
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
जब इसकी ज़रूरत न हो, तब इन्हें नष्ट कर देना चाहिए. सबसे सही तरीके
नेटिव विज्ञापन से जुड़े AdWidget
के बाद है, dispose()
को कब कॉल करें
विजेट ट्री और AdListener.onAdFailedToLoad()
से हटा दी जाती है
कॉलबैक.