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

प्लैटफ़ॉर्म चुनें: iOS Flutter Android (लेगसी)

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

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

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

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

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

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

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

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

@layout/gnt_small_template_view

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

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

@layout/gnt_medium_template_view

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

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

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

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