নেটিভ টেমপ্লেট সহ স্টাইল বিজ্ঞাপন লেআউট

প্ল্যাটফর্ম বেছে নিন: iOS Flutter Android (Legacy)

নেটিভ টেমপ্লেট ডাউনলোড করুন

গুরুত্বপূর্ণ: চালিয়ে যাওয়ার আগে, কীভাবে নেটিভ বিজ্ঞাপন লোড করতে হয় তা জানুন। আমাদের নেটিভ বিজ্ঞাপন প্লেবুক থেকে নেটিভ বিজ্ঞাপন সম্পর্কে আরও জানুন।

নেটিভ বিজ্ঞাপন ব্যবহার করে আপনি নিজের বিজ্ঞাপন কাস্টমাইজ করতে পারবেন, এর ফলে ব্যবহারকারীর অভিজ্ঞতা আরও ভালো হবে। ব্যবহারকারীর আরও ভালো অভিজ্ঞতা এনগেজমেন্ট বাড়াতে এবং আপনার মোট উপার্জন বাড়াতে পারে।

নেটিভ বিজ্ঞাপন থেকে সবচেয়ে বেশি সুবিধা পেতে, আপনার বিজ্ঞাপন লেআউট এমনভাবে স্টাইল করা গুরুত্বপূর্ণ যাতে সেগুলি আপনার অ্যাপের স্বাভাবিক এক্সটেনশন বলে মনে হয়। আপনাকে শুরু করতে সাহায্য করার জন্য, আমরা নেটিভ টেমপ্লেট তৈরি করেছি।

নেটিভ টেমপ্লেট হল আপনার নেটিভ বিজ্ঞাপনের জন্য কোড-সম্পূর্ণ ভিউ, যা দ্রুত প্রয়োগ এবং সহজে পরিবর্তনের জন্য ডিজাইন করা হয়েছে। নেটিভ টেমপ্লেটের সাহায্যে, আপনি মাত্র কয়েক মিনিটের মধ্যেই প্রথম নেটিভ বিজ্ঞাপন প্রয়োগ করতে পারবেন এবং অনেক কোড না লিখেও দ্রুত বিজ্ঞাপন কাস্টমাইজ করতে পারবেন। আপনি এইসব টেমপ্লেট যেখানে খুশি প্লেস করতে পারবেন, যেমন নিউজ ফিডে ব্যবহৃত রিসাইকেলার ভিউ, ডায়ালগ বা আপনার অ্যাপের অন্য যেকোনও জায়গায়।

মনে রাখবেন: আপনি যদি একেবারে নতুন করে নিজের নেটিভ লেআউট ডিজাইন করতে আগ্রহী হন, তাহলে নেটিভ অ্যাডভান্সড ডকুমেন্টেশন দেখুন।

আমাদের নেটিভ টেমপ্লেট Android Studio মডিউল হিসেবে প্রদান করা হয়, তাই আপনার প্রোজেক্টে এগুলি অন্তর্ভুক্ত করা এবং আপনার পছন্দমতো ব্যবহার করা সহজ।

টেমপ্লেটের সাইজ

দুটি টেমপ্লেট আছে: ছোট ও মাঝারি। দুটিই TemplateView ক্লাস ব্যবহার করে এবং দুটিরই অ্যাস্পেক্ট রেশিও নির্দিষ্ট করা আছে। সেগুলি তাদের মূল ভিউয়ের প্রস্থ পূরণ করার জন্য স্কেল করা হবে।

ছোট টেমপ্লেট

@layout/gnt_small_template_view

ছোট টেমপ্লেটটি রিসাইকলার ভিউ বা যখনই আপনার একটি লম্বা আয়তাকার বিজ্ঞাপন ভিউ প্রয়োজন হয়, সেইসব ক্ষেত্রে আদর্শ। যেমন, আপনি এটি ইন-ফিড বিজ্ঞাপনের জন্য ব্যবহার করতে পারেন।

মাঝারি টেমপ্লেট

@layout/gnt_medium_template_view

মিডিয়াম টেমপ্লেটটি অর্ধেক থেকে তিন-চতুর্থাংশ পৃষ্ঠা দেখার জন্য তৈরি করা হয়েছে, তবে এটি ফিডেও ব্যবহার করা যেতে পারে। এটি ল্যান্ডিং পৃষ্ঠা বা স্প্ল্যাশ পৃষ্ঠার জন্য ভালো।

বিজ্ঞাপন প্লেসমেন্ট নিয়ে পরীক্ষা করতে দ্বিধা করবেন না। অবশ্যই, আপনার প্রয়োজন অনুযায়ী আপনি সোর্স কোড এবং XML ফাইল পরিবর্তন করতে পারেন।

নেটিভ বিজ্ঞাপন টেমপ্লেট ইনস্টল করা

নেটিভ টেমপ্লেট ইনস্টল করতে, শুধু জিপ ফাইল ডাউনলোড করুন (GitHub-এ ক্লোন করুন বা ডাউনলোড করুন বিকল্প ব্যবহার করে) এবং আপনার আগে থেকে থাকা Android Studio প্রোজেক্টে মডিউলটি ইম্পোর্ট করুন।

1. ফাইল > নতুন > মডিউল ইমপোর্ট করুন বিকল্প বেছে নিন।

2. nativetemplates ফোল্ডার বেছে নিন।

   

3. আপনার অ্যাপ-লেভেল build.gradle ফাইলে নিম্নলিখিত লাইনটি যোগ করুন:

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

নেটিভ বিজ্ঞাপন টেমপ্লেট ব্যবহার করা

আপনি যেকোনও লেআউট XML ফাইলে টেমপ্লেট ব্যবহার করতে পারবেন, যেমন অন্য যেকোনও ভিউ গ্রুপ।

টেমপ্লেট ব্যবহার করার প্রসেসটি দুটি ধাপে সম্পন্ন হয়:

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());
   

স্টাইল ডিকশনারি কী

আপনার টেমপ্লেট স্টাইল করার দুটি উপায় রয়েছে: প্রথাগত লেআউট XML ব্যবহার করে এবং আমাদের NativeTemplateStyle.Builder অবজেক্ট ব্যবহার করে। উপরে দেওয়া কোড স্যাম্পেল থেকে বোঝা যায় যে কীভাবে NativeTemplateStyle.Builder অবজেক্ট ব্যবহার করে মূল ব্যাকগ্রাউন্ড কালার সেট করা যায়, তবে এর পাশাপাশি আরও অনেক বিকল্পও রয়েছে। এখানে উপলভ্য সব বিল্ডার পদ্ধতি দেওয়া হল। বিল্ডার একটি NativeTemplateStyle অবজেক্ট রিটার্ন করে যা যেকোনও XML লেআউট স্টাইলিং ওভাররাইড করে। XML লেআউট 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 রিপোজিটরিতে আপনার কন্ট্রিবিউশন দেখতে পেলে আমরা খুশি হব। আমাদের একটি পুল অনুরোধ পাঠান এবং আমরা সেটি দেখব।