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

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস ফ্লাটার

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

মূল বিষয়: সামনে এগোনোর আগে, জেনে নিন কীভাবে একটি নেটিভ বিজ্ঞাপন লোড করতে হয়।

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

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

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

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

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

টেমপ্লেটের আকার

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

ছোট টেমপ্লেট

@layout/gnt_small_template_view

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

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

@layout/gnt_medium_template_view

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

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

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

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

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, "/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());
   

স্টাইল অভিধানের কীগুলি

আপনার টেমপ্লেট স্টাইল করার দুটি উপায় আছে: প্রচলিত লেআউট XML ব্যবহার করে এবং আমাদের NativeTemplateStyle.Builder অবজেক্ট ব্যবহার করে। উপরের কোড নমুনাটি দেখায় কিভাবে NativeTemplateStyle.Builder অবজেক্ট ব্যবহার করে প্রধান ব্যাকগ্রাউন্ড রঙ সেট করতে হয়, তবে আরও বিভিন্ন বিকল্পও রয়েছে। এখানে উপলব্ধ সমস্ত বিল্ডার মেথড দেওয়া হলো। বিল্ডারটি একটি NativeTemplateStyle অবজেক্ট রিটার্ন করে যা যেকোনো XML লেআউট স্টাইলিংকে ওভাররাইড করে। gnt_small_template.xml এবং gnt_medium_template.xml XML লেআউটগুলো সেই একই অ্যান্ড্রয়েড স্টাইলিং প্যারামিটার ব্যবহার করে যার সাথে আপনি ইতিমধ্যেই পরিচিত।

নেটিভ টেমপ্লেট স্টাইলের জন্য বিল্ডার পদ্ধতি
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 মূল পটভূমির রঙ।

অবদান রাখুন

আপনাকে দ্রুত নেটিভ বিজ্ঞাপন তৈরি করতে সাহায্য করার জন্য আমরা নেটিভ টেমপ্লেট তৈরি করেছি। নতুন টেমপ্লেট বা ফিচার যোগ করার জন্য আমাদের গিটহাব রিপোজিটরিতে আপনার অবদান পেলে আমরা আনন্দিত হব। আমাদের একটি পুল রিকোয়েস্ট পাঠান এবং আমরা তা খতিয়ে দেখব।