অ্যান্ড্রয়েড এবং iOS-এ নেটিভ বিজ্ঞাপন পরিচালনা করুন,অ্যান্ড্রয়েড এবং iOS-এ নেটিভ বিজ্ঞাপন পরিচালনা করুন

প্ল্যাটফর্মের নিজস্ব UI কম্পোনেন্ট ব্যবহার করে ব্যবহারকারীদের কাছে নেটিভ বিজ্ঞাপন উপস্থাপন করা হয়—উদাহরণস্বরূপ, অ্যান্ড্রয়েডে একটি View বা iOS-এ একটি UIView ।

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

পূর্বশর্ত

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

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

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

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

ca-app-pub-3940256099942544/2247696110

আইওএস 

ca-app-pub-3940256099942544/3986624511

The test ad units are configured to return test ads for every request, so you can use them in your own apps while coding, testing, and debugging—just make sure you replace them with your own ad unit IDs before publishing your app.

প্ল্যাটফর্ম-নির্দিষ্ট সেটআপ

To create your native ads, you'll need to write platform-specific code for iOS and Android, followed by modifying your Dart implementation to take advantage of the native code changes you made.

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

প্লাগইনটি আমদানি করুন

The Android implementation of the Google Mobile Ads plugin requires a class implementing the NativeAdFactory API. In order to reference this API from your Android project, add the following lines to your settings.gradle:

def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()
def plugins = new Properties()
def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
if (pluginsFile.exists()) {
    pluginsFile.withInputStream { stream -> plugins.load(stream) }
}

plugins.each { name, path ->
    def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
    include ":$name"
    project(":$name").projectDir = pluginDirectory
}

NativeAdFactory বাস্তবায়ন করুন

এরপরে, এমন একটি ক্লাস তৈরি করুন যা NativeAdFactory ইমপ্লিমেন্ট করে এবং createNativeAd() মেথডটি ওভাররাইড করে।

package io.flutter.plugins.googlemobileadsexample;

import android.graphics.Color;
import android.view.LayoutInflater;
import android.widget.TextView;
import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;
import java.util.Map;

/**
 * my_native_ad.xml can be found at
 * github.com/googleads/googleads-mobile-flutter/blob/main/packages/google_mobile_ads/
 *     example/android/app/src/main/res/layout/my_native_ad.xml
 */
class NativeAdFactoryExample implements NativeAdFactory {
  private final LayoutInflater layoutInflater;

  NativeAdFactoryExample(LayoutInflater layoutInflater) {
    this.layoutInflater = layoutInflater;
  }

  @Override
  public NativeAdView createNativeAd(
      NativeAd nativeAd, Map<String, Object> customOptions) {
    final NativeAdView adView =
        (NativeAdView) layoutInflater.inflate(R.layout.my_native_ad, null);

    // Set the media view.
    adView.setMediaView((MediaView) adView.findViewById(R.id.ad_media));

    // Set other ad assets.
    adView.setHeadlineView(adView.findViewById(R.id.ad_headline));
    adView.setBodyView(adView.findViewById(R.id.ad_body));
    adView.setCallToActionView(adView.findViewById(R.id.ad_call_to_action));
    adView.setIconView(adView.findViewById(R.id.ad_app_icon));
    adView.setPriceView(adView.findViewById(R.id.ad_price));
    adView.setStarRatingView(adView.findViewById(R.id.ad_stars));
    adView.setStoreView(adView.findViewById(R.id.ad_store));
    adView.setAdvertiserView(adView.findViewById(R.id.ad_advertiser));

    // The headline and mediaContent are guaranteed to be in every NativeAd.
    ((TextView) adView.getHeadlineView()).setText(nativeAd.getHeadline());
    adView.getMediaView().setMediaContent(nativeAd.getMediaContent());

    // These assets aren't guaranteed to be in every NativeAd, so it's important to
    // check before trying to display them.
    if (nativeAd.getBody() == null) {
      adView.getBodyView().setVisibility(View.INVISIBLE);
    } else {
      adView.getBodyView().setVisibility(View.VISIBLE);
      ((TextView) adView.getBodyView()).setText(nativeAd.getBody());
    }

    if (nativeAd.getCallToAction() == null) {
      adView.getCallToActionView().setVisibility(View.INVISIBLE);
    } else {
      adView.getCallToActionView().setVisibility(View.VISIBLE);
      ((Button) adView.getCallToActionView()).setText(nativeAd.getCallToAction());
    }

    if (nativeAd.getIcon() == null) {
      adView.getIconView().setVisibility(View.GONE);
    } else {
      ((ImageView) adView.getIconView()).setImageDrawable(nativeAd.getIcon().getDrawable());
      adView.getIconView().setVisibility(View.VISIBLE);
    }

    if (nativeAd.getPrice() == null) {
      adView.getPriceView().setVisibility(View.INVISIBLE);
    } else {
      adView.getPriceView().setVisibility(View.VISIBLE);
      ((TextView) adView.getPriceView()).setText(nativeAd.getPrice());
    }

    if (nativeAd.getStore() == null) {
      adView.getStoreView().setVisibility(View.INVISIBLE);
    } else {
      adView.getStoreView().setVisibility(View.VISIBLE);
      ((TextView) adView.getStoreView()).setText(nativeAd.getStore());
    }

    if (nativeAd.getStarRating() == null) {
      adView.getStarRatingView().setVisibility(View.INVISIBLE);
    } else {
      ((RatingBar) adView.getStarRatingView()).setRating(nativeAd.getStarRating()
          .floatValue());
      adView.getStarRatingView().setVisibility(View.VISIBLE);
    }

    if (nativeAd.getAdvertiser() == null) {
      adView.getAdvertiserView().setVisibility(View.INVISIBLE);
    } else {
      adView.getAdvertiserView().setVisibility(View.VISIBLE);
      ((TextView) adView.getAdvertiserView()).setText(nativeAd.getAdvertiser());
    }

    // This method tells Google Mobile Ads Flutter Plugin that you have finished populating your
    // native ad view with this native ad.
    adView.setNativeAd(nativeAd);

    return adView;
  }
}

আপনার NativeAdView লেআউট কনফিগার করার একটি উদাহরণের জন্য my_native_ad.xml দেখুন।

আপনার NativeAdFactory নিবন্ধন করুন

Each NativeAdFactory implementation is required to be registered with a factoryId , a unique String identifier, when calling MainActivity.configureFlutterEngine(FlutterEngine) . The factoryId will be used later when instantiating a native ad from Dart code.

আপনার অ্যাপে ব্যবহৃত প্রতিটি স্বতন্ত্র নেটিভ বিজ্ঞাপন লেআউটের জন্য একটি NativeAdFactory প্রয়োগ ও নিবন্ধন করা যেতে পারে, অথবা একটিমাত্র ফ্যাক্টরিই সমস্ত লেআউট পরিচালনা করতে পারে।

মনে রাখবেন যে add-to-app দিয়ে বিল্ড করার সময়, cleanUpFlutterEngine(engine) -এ NativeAdFactory টিকেও অনিবন্ধিত করতে হবে।

একবার আপনি NativeAdFactoryExample তৈরি করে ফেললে, আপনার MainActivity নিম্নরূপে সেট আপ করুন:

package my.app.path;

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin;

public class MainActivity extends FlutterActivity {
  @Override
  public void configureFlutterEngine(FlutterEngine flutterEngine) {
    flutterEngine.getPlugins().add(new GoogleMobileAdsPlugin());
    super.configureFlutterEngine(flutterEngine);

    GoogleMobileAdsPlugin.registerNativeAdFactory(flutterEngine,
        "adFactoryExample", NativeAdFactoryExample());
  }

  @Override
  public void cleanUpFlutterEngine(FlutterEngine flutterEngine) {
    GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "adFactoryExample");
  }
}

আইওএস

NativeAdFactory বাস্তবায়ন করুন

The iOS implementation of the Google Mobile Ads plugin requires a class implementing the FLTNativeAdFactory API. Create a class that implements NativeAdFactory and implement the createNativeAd() method.

#import "FLTGoogleMobileAdsPlugin.h"

/**
 * The example NativeAdView.xib can be found at
 * github.com/googleads/googleads-mobile-flutter/blob/main/packages/google_mobile_ads/
 *     example/ios/Runner/NativeAdView.xib
 */
@interface NativeAdFactoryExample : NSObject <FLTNativeAdFactory>
@end

@implementation NativeAdFactoryExample
- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                      customOptions:(NSDictionary *)customOptions {
  // Create and place the ad in the view hierarchy.
  GADNativeAdView *adView =
      [[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject;

  // Populate the native ad view with the native ad assets.
  // The headline is guaranteed to be present in every native ad.
  ((UILabel *)adView.headlineView).text = nativeAd.headline;

  // These assets are not guaranteed to be present. Check that they are before
  // showing or hiding them.
  ((UILabel *)adView.bodyView).text = nativeAd.body;
  adView.bodyView.hidden = nativeAd.body ? NO : YES;

  [((UIButton *)adView.callToActionView) setTitle:nativeAd.callToAction
                                         forState:UIControlStateNormal];
  adView.callToActionView.hidden = nativeAd.callToAction ? NO : YES;

  ((UIImageView *)adView.iconView).image = nativeAd.icon.image;
  adView.iconView.hidden = nativeAd.icon ? NO : YES;

  ((UILabel *)adView.storeView).text = nativeAd.store;
  adView.storeView.hidden = nativeAd.store ? NO : YES;

  ((UILabel *)adView.priceView).text = nativeAd.price;
  adView.priceView.hidden = nativeAd.price ? NO : YES;

  ((UILabel *)adView.advertiserView).text = nativeAd.advertiser;
  adView.advertiserView.hidden = nativeAd.advertiser ? NO : YES;

  // In order for the SDK to process touch events properly, user interaction
  // should be disabled.
  adView.callToActionView.userInteractionEnabled = NO;

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  // Note: this should always be done after populating the ad views.
  adView.nativeAd = nativeAd;

  return adView;
}
@end

আপনার GADNativeAdView লেআউট কনফিগার করার একটি উদাহরণের জন্য NativeAdView.xib দেখুন।

আপনার NativeAdFactory নিবন্ধন করুন

Each FLTNativeAdFactory needs to be registered with a factoryId , a unique String identifier, in registerNativeAdFactory:factoryId:nativeAdFactory: . The factoryId will be used later when instantiating a native ad from Dart code.

আপনার অ্যাপে ব্যবহৃত প্রতিটি স্বতন্ত্র নেটিভ বিজ্ঞাপন লেআউটের জন্য একটি FLTNativeAdFactory প্রয়োগ ও নিবন্ধন করা যেতে পারে, অথবা একটিমাত্র ফ্যাক্টরিই সমস্ত লেআউট পরিচালনা করতে পারে।

একবার আপনি FLTNativeAdFactory তৈরি করে ফেললে, নিম্নরূপভাবে আপনার AppDelegate সেট আপ করুন:

#import "FLTGoogleMobileAdsPlugin.h"
#import "NativeAdFactoryExample.h"

@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
      didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];

  // Must be added after GeneratedPluginRegistrant registerWithRegistry:self];
  // is called.
  NativeAdFactoryExample *nativeAdFactory = [[NativeAdFactoryExample alloc] init];
  [FLTGoogleMobileAdsPlugin registerNativeAdFactory:self
                                          factoryId:@"adFactoryExample"
                                    nativeAdFactory:nativeAdFactory];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

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

আপনার প্ল্যাটফর্ম-নির্দিষ্ট কোড যোগ করার পরে, বিজ্ঞাপন লোড করার জন্য ডার্ট (Dart) ব্যবহার করুন। নিশ্চিত করুন যে factoryID আপনার পূর্বে রেজিস্টার করা ID-র সাথে মেলে।

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

 // TODO: replace this test ad unit with your own ad unit.
 final String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        // Factory ID registered by your native ad factory implementation.
        factoryId: 'adFactoryExample',
        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();
          },
        ),
        request: const AdRequest(),
        // Optional: Pass custom options to your native ad factory implementation.
        customOptions: {'custom-option-1', 'custom-value-1'}
    );
    _nativeAd.load();
  }
}

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

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

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

 // TODO: replace this test ad unit with your own ad unit.
 final String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        // Factory ID registered by your native ad factory implementation.
        factoryId: 'adFactoryExample',
        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 AdRequest(),
        // Optional: Pass custom options to your native ad factory implementation.
        customOptions: {'custom-option-1', 'custom-value-1'}
    );
    _nativeAd.load();
        
  }
}

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

To display a NativeAd as a widget, you must instantiate an AdWidget with a supported ad after calling load() . You can create the widget before calling load() , but load() must be called before adding it to the widget tree.

AdWidget inherits from Flutter's Widget class and can be used like any other widget. On iOS, make sure you place the widget in a container with a specified width and height. Otherwise, your ad may not be displayed. 

final Container adContainer = Container(
  alignment: Alignment.center,
  child: AdWidget adWidget = AdWidget(ad: _nativeAd!),
  width: WIDTH,
  height: HEIGHT,
);

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

A NativeAd must be disposed of when access to it is no longer needed. The best practice for when to call dispose() is after the AdWidget associated with the native ad is removed from the widget tree and in the AdListener.onAdFailedToLoad() callback.

পরবর্তী পদক্ষেপ

গিটহাবে সম্পূর্ণ উদাহরণ

নেটিভ প্ল্যাটফর্ম