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

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

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

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

পূর্বশর্ত

চালিয়ে যাওয়ার আগে, নিম্নলিখিতগুলি করুন:

  • ফ্লাটার ২.৪.০ বা উচ্চতর সংস্করণ।

সর্বদা টেস্ট অ্যাড দিয়ে পরীক্ষা করুন

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

  • /21775744923/example/native

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

বিজ্ঞাপন লোড করুন

নিম্নলিখিত উদাহরণটি medium আকারের নেটিভ টেমপ্লেট ব্যবহার করে একটি নেটিভ বিজ্ঞাপন লোড করে:

class NativeExampleState extends State<NativeExample> {
  NativeAd? nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final _adUnitId = '/21775744923/example/native';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            debugPrint('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            debugPrint('$NativeAd failed to load: $error');
            ad.dispose();
          },
        ),
        request: const AdManagerAdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

উপলব্ধ স্টাইলিং বিকল্পগুলির জন্য NativeTemplateStyle এবং NativeTemplateTextStyle দেখুন।

বিজ্ঞাপন কাস্টমাইজ করুন

নেটিভ টেমপ্লেট ব্যবহার করে কোনো নেটিভ বিজ্ঞাপন কাস্টমাইজ করার সময়, আপনার বিজ্ঞাপনের UI কনফিগারেশনটি NativeTemplateStyle ক্লাসে থাকবে, যা আপনাকে ডার্ট কোডে সম্পূর্ণ নেটিভ বিজ্ঞাপনটিকে স্টাইল করার সুযোগ দেবে।

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

ফ্লাটারের নেটিভ অ্যাড টেমপ্লেট দুই ধরনের হয়: TemplateType.small এবং TemplateType.medium । ছোট টেমপ্লেটটি TableView বা GridView জন্য, ইন-ফিড অ্যাডের জন্য অথবা যেখানেই আপনার একটি পাতলা আয়তাকার অ্যাড ভিউ প্রয়োজন, তার জন্য আদর্শ। মাঝারি টেমপ্লেটটি অর্ধেক থেকে তিন-চতুর্থাংশ পেজ ভিউয়ের জন্য তৈরি, যা ল্যান্ডিং বা স্প্ল্যাশ পেজের জন্য আদর্শ।

ছোট

অ্যান্ড্রয়েড

আইওএস
মাঝারি

অ্যান্ড্রয়েড

আইওএস

স্থানীয় বিজ্ঞাপন ইভেন্ট

নেটিভ অ্যাড ইন্টারঅ্যাকশন সম্পর্কিত ইভেন্টগুলোর নোটিফিকেশন পেতে, অ্যাডের listener প্রপার্টি ব্যবহার করুন। এরপর, অ্যাড ইভেন্ট কলব্যাকগুলো গ্রহণ করার জন্য NativeAdListener ইমপ্লিমেন্ট করুন।

class NativeExampleState extends State<NativeExample> {
  NativeAd? _nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final _adUnitId = '/21775744923/example/native';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            print('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            print('$NativeAd failedToLoad: $error');
            ad.dispose();
          },
          // Called when a click is recorded for a NativeAd.
          onAdClicked: (ad) {},
          // Called when an impression occurs on the ad.
          onAdImpression: (ad) {},
          // Called when an ad removes an overlay that covers the screen.
          onAdClosed: (ad) {},
          // Called when an ad opens an overlay that covers the screen.
          onAdOpened: (ad) {},
          // For iOS only. Called before dismissing a full screen view
          onAdWillDismissScreen: (ad) {},
          // Called when an ad receives revenue value.
          onPaidEvent: (ad, valueMicros, precision, currencyCode) {},
        ),
        request: const AdManagerAdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

বিজ্ঞাপন প্রদর্শন করুন

একটি NativeAd উইজেট হিসেবে প্রদর্শন করতে হলে, load() কল করার পর আপনাকে অবশ্যই একটি সমর্থিত বিজ্ঞাপন দিয়ে একটি AdWidget ইনস্ট্যানশিয়েট করতে হবে। আপনি load() কল করার আগেও উইজেটটি তৈরি করতে পারেন, কিন্তু উইজেট ট্রি-তে যোগ করার আগে অবশ্যই load() কল করতে হবে।

AdWidget Flutter-এর Widget ক্লাস থেকে ইনহেরিট করে এবং অন্য যেকোনো উইজেটের মতোই ব্যবহার করা যায়। iOS-এ, উইজেটটিকে একটি নির্দিষ্ট প্রস্থ ও উচ্চতাযুক্ত কন্টেইনারের মধ্যে রাখতে হবে। অন্যথায়, আপনার বিজ্ঞাপন প্রদর্শিত নাও হতে পারে।

// Small template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 90, // minimum recommended height
    maxWidth: 400,
    maxHeight: 200,
  ),
  child: AdWidget(ad: _nativeAd!),
);

// Medium template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 320, // minimum recommended height
    maxWidth: 400,
    maxHeight: 400,
  ),
  child: AdWidget(ad: _nativeAd!),
);

বিজ্ঞাপন নিষ্পত্তি করুন

যখন একটি NativeAd আর প্রয়োজন হয় না, তখন সেটিকে ডিসপোজ (dispose) করতে হবে। কখন dispose() কল করতে হবে তার সর্বোত্তম পদ্ধতি হলো, নেটিভ অ্যাডের সাথে যুক্ত AdWidget উইজেট ট্রি থেকে সরিয়ে ফেলার পরে এবং AdListener.onAdFailedToLoad() কলব্যাকে।