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

नेटिव टेंप्लेट डाउनलोड करना

अहम जानकारी: आगे बढ़ने से पहले, नेटिव विज्ञापन लोड करने का तरीका जानें. नेटिव विज्ञापनों के बारे में ज़्यादा जानने के लिए, हमारी नेटिव विज्ञापन प्लेबुक देखें.

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

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

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

ध्यान दें: अगर आपको अपने नेटिव लेआउट को शुरू से डिज़ाइन करना है, तो नेटिव ऐडवांस दस्तावेज़ पर वापस जाएं.

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

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

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

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

@layout/gnt_small_template_view

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

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

@layout/gnt_medium_template_view

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

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

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

नेटिव टेंप्लेट इंस्टॉल करने के लिए, GitHub पर क्लोन करें या डाउनलोड करें विकल्प का इस्तेमाल करके, ZIP फ़ाइल डाउनलोड करें और मॉड्यूल को अपने मौजूदा Android Studio प्रोजेक्ट में इंपोर्ट करें.

1. फ़ाइल > नया > इंपोर्ट मॉड्यूल चुनें.

2. nativetemplates फ़ोल्डर चुनें.

   

3. ऐप्लिकेशन-लेवल की build.gradle फ़ाइल में यह लाइन जोड़ें:

   dependencies {
           ...
           implementation project(':nativetemplates')
           ...
   }
   

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

किसी भी लेआउट एक्सएमएल फ़ाइल में टेंप्लेट का इस्तेमाल किया जा सकता है, जैसे कि किसी अन्य व्यू ग्रुप में.

टेंप्लेट का इस्तेमाल करने के लिए, दो चरणों की प्रोसेस पूरी करनी होती है:

1. सबसे पहले, आपको टेंप्लेट को अपने लेआउट में शामिल करना होगा.

   <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>
   

2. इसके बाद, आपको अपने टेंप्लेट को लोड होने पर अपना नेटिव विज्ञापन देना होगा:

   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 रिपॉज़िटरी में आपका योगदान मिलना अच्छा लगेगा. हमें डेटा पुल करने का अनुरोध भेजें. हम इस पर ध्यान देंगे.