iPhone X বিজ্ঞাপন রেন্ডারিং

এই নির্দেশিকাটি iPhone X-এ সঠিকভাবে বিজ্ঞাপন রেন্ডার করার জন্য আপনার অ্যাপগুলিকে কীভাবে কোড করবেন তার সেরা অনুশীলনগুলি প্রদর্শন করে।

পূর্বশর্ত

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

স্টোরিবোর্ড/ইন্টারফেস বিল্ডার

যদি আপনার অ্যাপটি ইন্টারফেস বিল্ডার ব্যবহার করে, তাহলে প্রথমে নিশ্চিত করুন যে আপনি সেফ এরিয়া লেআউট গাইড সক্রিয় করেছেন। এটি করার জন্য আপনাকে Xcode 9+ চালাতে হবে এবং iOS 9+ টার্গেট করতে হবে।

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

আমরা আপনাকে প্রস্থ এবং উচ্চতার সীমাবদ্ধতা ব্যবহার করে প্রয়োজনীয় আকারে ব্যানারটি সীমাবদ্ধ করার পরামর্শ দিচ্ছি।

এখন আপনি GAMBannerView এর Top প্রপার্টিটি Safe Area এর উপরে সীমাবদ্ধ করে ব্যানারটিকে Safe Area এর উপরে সারিবদ্ধ করতে পারেন:

একইভাবে, আপনি GAMBannerView এর Bottom প্রপার্টিটি নিরাপদ এলাকার নীচে সীমাবদ্ধ করে ব্যানারটি নিরাপদ এলাকার নীচে সারিবদ্ধ করতে পারেন:

আপনার সীমাবদ্ধতাগুলি এখন নীচের স্ক্রিনশটের মতো দেখাবে (আকার/অবস্থান পরিবর্তিত হতে পারে):

ভিউকন্ট্রোলার

এখানে একটি সহজ ভিউ কন্ট্রোলার কোড স্নিপেট দেওয়া হল যা উপরের স্টোরিবোর্ডে কনফিগার করা GAMBannerView এ ব্যানার দেখানোর জন্য প্রয়োজনীয় ন্যূনতম কাজ করে:

সুইফট

class ViewController: UIViewController {

  /// The banner view.
  @IBOutlet var bannerView: AdManagerBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    // Replace this ad unit ID with your own ad unit ID.
    bannerView.adUnitID = "/21775744923/example/adaptive-banner"
    bannerView.rootViewController = self
    bannerView.load(AdManagerRequest())
  }

}

অবজেক্টিভ-সি

@interface ViewController()

@property(nonatomic, strong) IBOutlet GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

নিরাপদ এলাকার প্রান্তে ব্যানার সারিবদ্ধ করা

যদি আপনি একটি পূর্ণ-প্রস্থ, বাম- অথবা ডান-সারিবদ্ধ ব্যানার চান, তাহলে ব্যানারের বাম/ডান প্রান্তটি নিরাপদ এলাকার বাম/ডান প্রান্তে সীমাবদ্ধ করুন, সুপারভিউয়ের বাম/ডান প্রান্তে নয়।

যদি আপনার "Use Safe Area Layout Guides" সক্রিয় থাকে, তাহলে ইন্টারফেস বিল্ডার ভিউতে সীমাবদ্ধতা যোগ করার সময় নিরাপদ এলাকার প্রান্তগুলি ব্যবহার করবে।

iOS 8 এবং তার নিচের ভার্সন সাপোর্ট করে

যদি আপনি ইন্টারফেস বিল্ডার ব্যবহার করে iOS 8 বা তার নিচের ভার্সন সাপোর্ট করতে চান, তাহলে আপনার ইন্টারফেস বিল্ডার ফাইল এবং স্টোরিবোর্ডের জন্য Use Safe Area Layout Guides আনচেক করা উচিত।

এখন আপনি উপরের লেআউট গাইডের নীচে সীমাবদ্ধতা যোগ করতে পারেন (নিরাপদ এলাকার উপরে না গিয়ে):

এছাড়াও নীচের লেআউট গাইডের উপরে সীমাবদ্ধতা যোগ করুন (নিরাপদ এলাকার নীচের পরিবর্তে):

পূর্ণ-প্রস্থ ব্যানারের জন্য (শুধুমাত্র ল্যান্ডস্কেপে নিরাপদ এলাকা দ্বারা প্রভাবিত), এই লেআউট নির্দেশিকাগুলি বিদ্যমান নেই। ইন্টারফেস বিল্ডারের নিরাপদ বিকল্প হল মার্জিনের সাপেক্ষে আপনার বাম এবং ডান প্রান্তের সীমাবদ্ধতা তৈরি করা:

এটি সুপারভিউ/সেফ এরিয়ার প্রান্ত থেকে ব্যানারের প্রান্তটিকে কিছুটা দূরে রাখবে, যা নিশ্চিত করবে যে iPhone X-এ ল্যান্ডস্কেপ ওরিয়েন্টেশনে আপনার ব্যানারটি অস্পষ্ট থাকবে না। আপনি প্রোগ্রাম্যাটিকভাবেও কাঙ্ক্ষিত ফলাফল অর্জন করতে পারেন।

প্রোগ্রাম্যাটিক

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

সুইফট

class ViewController: UIViewController {

  var bannerView: AdManagerBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = AdManagerBannerView(adSize: AdSizeBanner)
    addBannerViewToView(bannerView)
    bannerView.rootViewController = self
    // Set the ad unit ID to your own ad unit ID here.
    bannerView.adUnitID = "/21775744923/example/adaptive-banner"
    bannerView.load(AdManagerRequest())
  }

  func addBannerViewToView(_ bannerView: UIView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    if #available(iOS 11.0, *) {
      positionBannerAtBottomOfSafeArea(bannerView)
    }
    else {
      positionBannerAtBottomOfView(bannerView)
    }
  }

  @available (iOS 11, *)
  func positionBannerAtBottomOfSafeArea(_ bannerView: UIView) {
    // Position the banner. Stick it to the bottom of the Safe Area.
    // Centered horizontally.
    let guide: UILayoutGuide = view.safeAreaLayoutGuide

    NSLayoutConstraint.activate(
      [bannerView.centerXAnchor.constraint(equalTo: guide.centerXAnchor),
       bannerView.bottomAnchor.constraint(equalTo: guide.bottomAnchor)]
    )
  }

  func positionBannerAtBottomOfView(_ bannerView: UIView) {
    // Center the banner horizontally.
    view.addConstraint(NSLayoutConstraint(item: bannerView,
                                          attribute: .centerX,
                                          relatedBy: .equal,
                                          toItem: view,
                                          attribute: .centerX,
                                          multiplier: 1,
                                          constant: 0))
    // Lock the banner to the top of the bottom layout guide.
    view.addConstraint(NSLayoutConstraint(item: bannerView,
                                          attribute: .bottom,
                                          relatedBy: .equal,
                                          toItem: self.bottomLayoutGuide,
                                          attribute: .top,
                                          multiplier: 1,
                                          constant: 0))
  }

}

অবজেক্টিভ-সি

@interface ViewController()

@property(nonatomic, strong) GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Instantiate the banner view with your desired banner size.
  self.bannerView = [[GAMBannerView alloc] initWithAdSize:kGADAdSizeBanner];
  [self addBannerViewToVIew:self.bannerView];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

#pragma mark - view positioning

-(void)addBannerViewToView:(UIView *_Nonnull)bannerView {
  self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:self.bannerView];
  if (@available(ios 11.0, *)) {
    [self positionBannerViewAtBottomOfSafeArea:bannerView];
  } else {
    [self positionBannerViewAtBottomOfView:bannerView];
  }
}

- (void)positionBannerViewAtBottomOfSafeArea:(UIView *_Nonnull)bannerView NS_AVAILABLE_IOS(11.0) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Centered horizontally.
  UILayoutGuide *guide = self.view.safeAreaLayoutGuide;
  [NSLayoutConstraint activateConstraints:@[
    [bannerView.centerXAnchor constraintEqualToAnchor:guide.centerXAnchor],
    [bannerView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor]
  ]];
}

- (void)positionBannerViewAtBottomOfView:(UIView *_Nonnull)bannerView {
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeCenterX
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeCenterX
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeBottom
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.bottomLayoutGuide
                                                        attribute:NSLayoutAttributeTop
                                                       multiplier:1
                                                         constant:0]];
}

@end

উপরের কৌশলগুলি সহজেই ব্যবহৃত বৈশিষ্ট্য এবং অ্যাঙ্করগুলি পরিবর্তন করে নিরাপদ এলাকার শীর্ষে সীমাবদ্ধ করার জন্য ব্যবহার করা যেতে পারে।

নেটিভ বিজ্ঞাপন

যদি আপনার অ্যাপটি স্ক্রিনের উপরে বা নীচে নেটিভ বিজ্ঞাপন পিন করে, তাহলে ব্যানার বিজ্ঞাপনের মতো নেটিভ বিজ্ঞাপনের ক্ষেত্রেও একই নীতি প্রযোজ্য। মূল পার্থক্য হল GAMBannerView এ সীমাবদ্ধতা যোগ করার পরিবর্তে, আপনাকে আপনার GADNativeAppInstallAdView এবং GADNativeContentAdView (অথবা বিজ্ঞাপনের জন্য ধারণকারী দৃশ্য) তে সীমাবদ্ধতা যোগ করতে হবে যাতে সেফ এরিয়া লেআউট নির্দেশিকাগুলি মেনে চলতে পারি। নেটিভ ভিউয়ের জন্য আমরা আরও স্পষ্ট আকারের সীমাবদ্ধতা প্রদান করার পরামর্শ দিই।

ইন্টারস্টিশিয়াল এবং পুরস্কৃত বিজ্ঞাপন

ইন্টারস্টিশিয়াল এবং পুরস্কৃত বিজ্ঞাপন সহ পূর্ণ স্ক্রিন বিজ্ঞাপন ফর্ম্যাটগুলি Google মোবাইল বিজ্ঞাপন SDK দ্বারা রেন্ডার করা হয়। বন্ধ বোতামের মতো বিজ্ঞাপন উপাদানগুলি সঠিক স্থানে রেন্ডার করা নিশ্চিত করার জন্য Google মোবাইল বিজ্ঞাপন SDK-তে একটি আপডেট করা হবে। এই পরিবর্তনটি উপলব্ধ হলে আমরা রিলিজ নোট এবং এই ডকুমেন্টেশন পৃষ্ঠাটি আপডেট করব।