नेटिव विज्ञापनों का इस्तेमाल करके, विज्ञापनों को अपनी पसंद के मुताबिक बनाया जा सकता है. इससे लोगों को बेहतर अनुभव मिलता है. उपयोगकर्ताओं को बेहतर अनुभव देने से, उनके जुड़ाव को बढ़ाया जा सकता है. साथ ही, इससे आपकी कुल आय में भी बढ़ोतरी हो सकती है.
नेटिव विज्ञापनों का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, अपने विज्ञापन लेआउट को इस तरह से स्टाइल करना ज़रूरी है कि वे आपके ऐप्लिकेशन के नैचुरल एक्सटेंशन की तरह दिखें. आपकी मदद करने के लिए, हमने नेटिव टेंप्लेट बनाए हैं.
नेटिव टेंप्लेट, आपके नेटिव विज्ञापनों के लिए कोड-कंप्लीट व्यू होते हैं. इन्हें तेज़ी से लागू करने और आसानी से बदलाव करने के लिए डिज़ाइन किया गया है. नेटिव टेंप्लेट की मदद से, कुछ ही मिनटों में पहला नेटिव विज्ञापन लागू किया जा सकता है. साथ ही, बिना ज़्यादा कोड के लुक और फ़ील को तुरंत पसंद के मुताबिक बनाया जा सकता है. इन टेंप्लेट को अपनी पसंद के मुताबिक किसी भी जगह पर रखा जा सकता है. जैसे, न्यूज़ फ़ीड में इस्तेमाल की गई रीसाइकलर व्यू में, डायलॉग में या ऐप्लिकेशन में किसी दूसरी जगह पर.
हमारे नेटिव टेंप्लेट, Android Studio मॉड्यूल के तौर पर उपलब्ध कराए जाते हैं. इसलिए, इन्हें अपने प्रोजेक्ट में शामिल करना और अपनी पसंद के मुताबिक इस्तेमाल करना आसान होता है.
टेंप्लेट के साइज़
ये दो टेंप्लेट उपलब्ध हैं: छोटा और मीडियम. ये दोनों TemplateView
क्लास का इस्तेमाल करते हैं और दोनों का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) तय होता है. ये अपने पैरंट व्यू की चौड़ाई के हिसाब से स्केल हो जाएंगे.
छोटा टेंप्लेट
@layout/gnt_small_template_view
छोटा टेंप्लेट, रीसाइकलर व्यू के लिए सबसे सही होता है. इसके अलावा, इसका इस्तेमाल तब भी किया जा सकता है, जब आपको आयताकार विज्ञापन का लंबा व्यू चाहिए हो. उदाहरण के लिए, इसका इस्तेमाल इन-फ़ीड विज्ञापनों के लिए किया जा सकता है.
मीडियम टेंप्लेट
@layout/gnt_medium_template_view
मीडियम टेंप्लेट, पेज व्यू के आधे से तीन-चौथाई हिस्से के लिए होता है. हालांकि, इसका इस्तेमाल फ़ीड में भी किया जा सकता है. यह लैंडिंग पेजों या स्प्लैश पेजों के लिए अच्छा है.
प्लेसमेंट में बदलाव करके देखें. ज़रूरत के हिसाब से, सोर्स कोड और एक्सएमएल फ़ाइलों में भी बदलाव किया जा सकता है.
नेटिव विज्ञापन टेंप्लेट इंस्टॉल करना
नेटिव टेंप्लेट इंस्टॉल करने के लिए, ज़िप फ़ाइल डाउनलोड करें (GitHub पर क्लोन बनाएं या डाउनलोड करें विकल्प का इस्तेमाल करके). इसके बाद, मॉड्यूल को अपने मौजूदा Android Studio प्रोजेक्ट में इंपोर्ट करें.
फ़ाइल > नया > इंपोर्ट मॉड्यूल चुनें.
nativetemplates
फ़ोल्डर चुनें.ऐप्लिकेशन-लेवल की
build.gradle
फ़ाइल में यह लाइन जोड़ें:dependencies { ... implementation project(':nativetemplates') ... }
नेटिव विज्ञापन टेंप्लेट का इस्तेमाल करना
इस टेंप्लेट का इस्तेमाल किसी भी लेआउट एक्सएमएल फ़ाइल में किया जा सकता है. जैसे, किसी अन्य व्यू ग्रुप में किया जाता है.
टेंप्लेट का इस्तेमाल करने के लिए, यह तरीका अपनाएं:
सबसे पहले, आपको टेंप्लेट को अपने लेआउट में शामिल करना होगा.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" tools:showIn="@layout/activity_main" > <!-- This is your template view --> <com.google.android.ads.nativetemplates.TemplateView android:id="@+id/my_template" <!-- this attribute determines which template is used. The other option is @layout/gnt_medium_template_view --> app:gnt_template_type="@layout/gnt_small_template_view" android:layout_width="match_parent" android:layout_height="match_parent" /> ... </LinearLayout>
इसके बाद, आपको अपने टेंप्लेट को नेटिव विज्ञापन देना होगा, ताकि वह लोड हो सके:
MobileAds.initialize(this); AdLoader adLoader = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110") .forNativeAd(new NativeAd.OnNativeAdLoadedListener() { @Override public void onNativeAdLoaded(NativeAd nativeAd) { NativeTemplateStyle styles = new NativeTemplateStyle.Builder().withMainBackgroundColor(background).build(); TemplateView template = findViewById(R.id.my_template); template.setStyles(styles); template.setNativeAd(nativeAd); } }) .build(); adLoader.loadAd(new AdRequest.Builder().build());
स्टाइल डिक्शनरी की
अपने टेंप्लेट को स्टाइल करने के दो तरीके हैं: लेआउट एक्सएमएल का इस्तेमाल करके और हमारे NativeTemplateStyle.Builder
ऑब्जेक्ट का इस्तेमाल करके. ऊपर दिए गए कोड के उदाहरण में, मुख्य बैकग्राउंड का रंग सेट करने के लिए NativeTemplateStyle.Builder
ऑब्जेक्ट का इस्तेमाल करने का तरीका बताया गया है. हालांकि, इसके अलावा भी कई अन्य विकल्प उपलब्ध हैं. यहां बिल्डर के सभी उपलब्ध तरीके दिए गए हैं. बिल्डर, NativeTemplateStyle
ऑब्जेक्ट दिखाता है. यह ऑब्जेक्ट, एक्सएमएल लेआउट की स्टाइलिंग को बदल देता है. एक्सएमएल लेआउट gnt_small_template.xml
और gnt_medium_template.xml
में, Android के उन्हीं स्टाइलिंग पैरामीटर का इस्तेमाल किया जाता है जिनके बारे में आपको पहले से पता है.
नेटिव टेंप्लेट स्टाइल के लिए बिल्डर के तरीके | |
---|---|
withCallToActionTextTypeface
|
Typeface callToActionTextTypeface
कॉल-टू-ऐक्शन के लिए टाइपफ़ेस. |
withCallToActionTextSize
|
float callToActionTextSize
कॉल-टू-ऐक्शन टेक्स्ट का साइज़. |
withCallToActionTypefaceColor
|
int callToActionTypefaceColor
कॉल-टू-ऐक्शन टेक्स्ट का रंग. |
withCallToActionBackgroundColor
|
ColorDrawable callToActionBackgroundColor
कॉल-टू-ऐक्शन के बैकग्राउंड का रंग. |
withPrimaryTextTypeface
|
Typeface primaryTextTypeface
टेक्स्ट की पहली लाइन का टाइपफ़ेस. |
withPrimaryTextSize
|
float primaryTextSize
टेक्स्ट की पहली लाइन का साइज़. |
withPrimaryTextTypefaceColor
|
int primaryTextTypefaceColor
टेक्स्ट की पहली लाइन का रंग. |
withPrimaryTextBackgroundColor
|
ColorDrawable primaryTextBackgroundColor
टेक्स्ट की पहली लाइन के बैकग्राउंड का रंग. |
withSecondaryTextTypeface
|
Typeface secondaryTextTypeface
टेक्स्ट की दूसरी लाइन का टाइपफ़ेस. |
withSecondaryTextSize
|
float secondaryTextSize
टेक्स्ट की दूसरी लाइन का साइज़. |
withSecondaryTextTypefaceColor
|
int secondaryTextTypefaceColor
टेक्स्ट की दूसरी लाइन के टेक्स्ट का रंग. |
withSecondaryTextBackgroundColor
|
ColorDrawable secondaryTextBackgroundColor
टेक्स्ट की दूसरी लाइन के बैकग्राउंड का रंग. |
withTertiaryTextTypeface
|
Typeface tertiaryTextTypeface
टेक्स्ट की तीसरी लाइन का टाइपफ़ेस. |
withTertiaryTextSize
|
float tertiaryTextSize
टेक्स्ट की तीसरी लाइन का साइज़. |
withTertiaryTextTypefaceColor
|
int tertiaryTextTypefaceColor
टेक्स्ट की तीसरी लाइन का रंग. |
withTertiaryTextBackgroundColor
|
ColorDrawable tertiaryTextBackgroundColor
टेक्स्ट की तीसरी लाइन के बैकग्राउंड का रंग. |
withMainBackgroundColor
|
ColorDrawable mainBackgroundColor
बैकग्राउंड का मुख्य रंग. |
योगदान दें
हमने नेटिव टेंप्लेट बनाए हैं, ताकि आप नेटिव विज्ञापन जल्दी बना सकें. हमें खुशी होगी, अगर आप नए टेंप्लेट या सुविधाएं जोड़ने के लिए, हमारे GitHub रिपो में योगदान करें. हमें पुल करने का अनुरोध भेजें. हम इस पर ध्यान देंगे.