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

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

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

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

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

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

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

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

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

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

দুটি টেমপ্লেট সাইজ আছে: ছোট এবং মাঝারি। প্রতিটি টেমপ্লেট একটি ক্লাস দ্বারা চিহ্নিত করা হয়। ক্লাসগুলো হলো GADTSmallTemplateView এবং GADTMediumTemplateView । উভয় ক্লাসই GADTTemplateView এক্সটেন্ড করে। উভয় টেমপ্লেটের একটি নির্দিষ্ট অ্যাসপেক্ট রেশিও আছে, যা শুধুমাত্র addHorizontalConstraintsToSuperviewWidth কল করলেই তাদের প্যারেন্ট ভিউয়ের প্রস্থ অনুযায়ী স্কেল হবে। যদি আপনি addHorizontalConstraintsToSuperviewWidth কল না করেন, তাহলে প্রতিটি টেমপ্লেট তার ডিফল্ট সাইজে রেন্ডার হবে।

GADTSmallTemplateView

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

GADTMediumTemplateView

মিডিয়াম টেমপ্লেটটি একটি ১/২ থেকে ৩/৪ পৃষ্ঠার ভিউ হিসেবে তৈরি করা হয়েছে। এটি ল্যান্ডিং বা স্প্ল্যাশ পেজের জন্য ভালো, তবে UITableViews তেও অন্তর্ভুক্ত করা যায়। এই টেমপ্লেটের ডিফল্ট সাইজ হলো উচ্চতায় ৩৭০ পয়েন্ট এবং প্রস্থে ৩৫৫ পয়েন্ট।

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

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

নেটিভ টেমপ্লেটগুলো ইনস্টল করতে, শুধু জিপ ফাইলটি ডাউনলোড করে আপনার এক্সকোড প্রজেক্টে ড্র্যাগ করুন। প্রয়োজনে ‘কপি আইটেমস’ অপশনটি চেক করতে ভুলবেন না।

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

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

উদ্দেশ্য-সি

/// Step 1: Import the templates that you need.
#import "NativeTemplates/GADTSmallTemplateView.h"
#import "NativeTemplates/GADTTemplateView.h"
...

// STEP 2: Initialize your template view object.
GADTSmallTemplateView *templateView =
    [[NSBundle mainBundle] loadNibNamed:@"GADTSmallTemplateView" owner:nil options:nil]
      .firstObject;

// STEP 3: Template views are just GADNativeAdViews.
_nativeAdView = templateView;
nativeAd.delegate = self;

// STEP 4: Add your template as a subview of whichever view you'd like.
// This must be done before calling addHorizontalConstraintsToSuperviewWidth.
// Please note: Our template objects are subclasses of GADNativeAdView so
// you can insert them into whatever type of view you’d like, and don’t need to
// create your own.
[self.view addSubview:templateView];

// STEP 5 (Optional): Create your styles dictionary. Set your styles dictionary
// on the template property. A default dictionary is created for you if you do
// not set this. Note - templates do not currently respect style changes in the
// xib.

NSString *myBlueColor = @"#5C84F0";
NSDictionary *styles = @{
    GADTNativeTemplateStyleKeyCallToActionFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyCallToActionFontColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyCallToActionBackgroundColor :
        [GADTTemplateView colorFromHexString:myBlueColor],
    GADTNativeTemplateStyleKeySecondaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeySecondaryFontColor : UIColor.grayColor,
    GADTNativeTemplateStyleKeySecondaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyPrimaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyPrimaryFontColor : UIColor.blackColor,
    GADTNativeTemplateStyleKeyPrimaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyTertiaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyTertiaryFontColor : UIColor.grayColor,
    GADTNativeTemplateStyleKeyTertiaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyMainBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyCornerRadius : [NSNumber numberWithFloat:7.0],
};

templateView.styles = styles;

// STEP 6: Set the ad for your template to render.
templateView.nativeAd = nativeAd;

// STEP 7 (Optional): If you'd like your template view to span the width of your
// superview call this method.
[templateView addHorizontalConstraintsToSuperviewWidth];
[templateView addVerticalCenterConstraintToSuperview];

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

আপনার টেমপ্লেটগুলো কাস্টমাইজ করার সবচেয়ে দ্রুত উপায় হলো নিম্নলিখিত কী-গুলো দিয়ে একটি ডিকশনারি তৈরি করা:

উদ্দেশ্য-সি

/// Call to action font. Expects a UIFont.
GADTNativeTemplateStyleKeyCallToActionFont

/// Call to action font color. Expects a UIColor.
GADTNativeTemplateStyleKeyCallToActionFontColor;

/// Call to action background color. Expects a UIColor.
GADTNativeTemplateStyleKeyCallToActionBackgroundColor;

/// The font, font color and background color for the first row of text in the
/// template.

/// All templates have a primary text area which is populated by the native ad's
/// headline.

/// Primary text font. Expects a UIFont.
GADTNativeTemplateStyleKeyPrimaryFont;

/// Primary text font color. Expects a UIFont.
GADTNativeTemplateStyleKeyPrimaryFontColor;

/// Primary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeyPrimaryBackgroundColor;

/// The font, font color and background color for the second row of text in the
/// template.

/// All templates have a secondary text area which is populated either by the
/// body of the ad, or by the rating of the app.

/// Secondary text font. Expects a UIFont.
GADTNativeTemplateStyleKeySecondaryFont;

/// Secondary text font color. Expects a UIColor.
GADTNativeTemplateStyleKeySecondaryFontColor;

/// Secondary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeySecondaryBackgroundColor;

/// The font, font color and background color for the third row of text in the
/// template. The third row is used to display store name or the default
/// tertiary text.

/// Tertiary text font. Expects a UIFont.
GADTNativeTemplateStyleKeyTertiaryFont;

/// Tertiary text font color. Expects a UIColor.
GADTNativeTemplateStyleKeyTertiaryFontColor;

/// Tertiary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeyTertiaryBackgroundColor;

/// The background color for the bulk of the ad. Expects a UIColor.
GADTNativeTemplateStyleKeyMainBackgroundColor;

/// The corner rounding radius for the icon view and call to action. Expects an
/// NSNumber.
GADTNativeTemplateStyleKeyCornerRadius;

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

টেমপ্লেট অবজেক্টটি ইনস্ট্যানশিয়েট করার চেষ্টা করলে কেন এক্সেপশন আসে?

এমনটা হতে পারে যদি আপনি xib ফাইলে ভিউ-এর সাইজ পরিবর্তন করে থাকেন কিন্তু সাবক্লাসের 'setup' মেথডে তৈরি করা ফ্রেমের সাইজ পরিবর্তন না করে থাকেন।

আমি কীভাবে এই টেমপ্লেটগুলো আরও কাস্টমাইজ করতে পারি?

এই টেমপ্লেটগুলো হলো সংশ্লিষ্ট ভিউ অবজেক্টসহ সাধারণ xib ফাইল, ঠিক যেমন iOS ডেভেলপমেন্টে আপনি ব্যবহার করে অভ্যস্ত অন্যান্য xib এবং কাস্টম ভিউ ক্লাস। আপনি যদি একেবারে গোড়া থেকে আপনার নেটিভ বিজ্ঞাপন তৈরি করতে চান, তাহলে আমাদের 'নেটিভ অ্যাডভান্সড' গাইডটি দেখুন।

আমি xib-এ স্টাইলগুলো সেট করার পরেও সেগুলো আপডেট হচ্ছে না কেন?

আমরা বর্তমানে GADTTemplateView.m এ ডিফল্ট স্টাইল ডিকশনারি দ্বারা সমস্ত xib স্টাইলকে ওভাররাইড করি।

অবদান রাখুন

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