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

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

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

अहम जानकारी: जारी रखने से पहले, नेटिव विज्ञापन लोड करने का तरीका जानें.

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

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

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

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

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

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

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

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

@layout/gnt_small_template_view

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

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

@layout/gnt_medium_template_view

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

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

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

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

1. File > New > Import Module चुनें.

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