नेटिव टेंप्लेट की मदद से विज्ञापन लेआउट को स्टाइल करना

प्लैटफ़ॉर्म चुनें: Android iOS Flutter

नेटिव विज्ञापनों का इस्तेमाल करके, अपने विज्ञापनों को पसंद के मुताबिक बनाया जा सकता है. इससे उपयोगकर्ता अनुभव बेहतर होता है. उपयोगकर्ता अनुभव बेहतर होने से, लोगों की दिलचस्पी बढ़ सकती है और आपका कुल रेवेन्यू बढ़ सकता है.

नेटिव विज्ञापनों से ज़्यादा फ़ायदा पाने के लिए, यह ज़रूरी है कि विज्ञापन लेआउट को इस तरह स्टाइल किया जाए कि वे आपके ऐप्लिकेशन के स्वाभाविक एक्सटेंशन की तरह दिखें. आपकी मदद करने के लिए, हमने नेटिव टेंप्लेट बनाए हैं.

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

हमारे नेटिव टेंप्लेट, Android Studio मॉड्यूल के तौर पर उपलब्ध हैं. इसलिए, इन्हें अपने प्रोजेक्ट में शामिल करना और अपनी पसंद के मुताबिक इस्तेमाल करना आसान है.

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

दो टेंप्लेट उपलब्ध हैं: छोटा और मीडियम. ये दोनों, TemplateView क्लास का इस्तेमाल करते हैं और दोनों का आसपेक्ट रेशियो तय होता है. ये अपने पैरंट व्यू की चौड़ाई के हिसाब से स्केल होंगे.

छोटा टेंप्लेट

@layout/gnt_small_template_view

छोटा टेंप्लेट, रीसाइक्लर व्यू के लिए या आयताकार विज्ञापन व्यू की ज़रूरत पड़ने पर सबसे सही होता है. उदाहरण के लिए, इसका इस्तेमाल इन-फ़ीड विज्ञापनों के लिए किया जा सकता है.

मीडियम टेंप्लेट

@layout/gnt_medium_template_view

मीडियम टेंप्लेट, पेज व्यू के लिए आधा से तीन-चौथाई हिस्सा होता है. हालांकि, इसका इस्तेमाल फ़ीड में भी किया जा सकता है. यह लैंडिंग पेजों या स्प्लैश पेजों के लिए सही है.

प्लेसमेंट के साथ एक्सपेरिमेंट करने के लिए बेझिझक रहें. ज़रूरत के मुताबिक, सोर्स कोड और एक्सएमएल फ़ाइलों में भी बदलाव किया जा सकता है.

नेटिव विज्ञापन टेंप्लेट इंस्टॉल करना

नेटिव टेंप्लेट इंस्टॉल करने के लिए, बस zip फ़ाइल डाउनलोड करें (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, "/21775744923/example/native")
    .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 AdManagerAdRequest.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 रेपो में योगदान दें. हमें पुल करने का अनुरोध भेजें. हम इस पर ध्यान देंगे.