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

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

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

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

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

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

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

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

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

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

@layout/gnt_small_template_view

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

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

@layout/gnt_medium_template_view

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

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

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

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