iPhone X पर विज्ञापन रेंडर करना

इस गाइड में, iPhone X पर विज्ञापनों को सही तरीके से रेंडर करने के लिए, ऐप्लिकेशन को कोड करने के सबसे सही तरीके बताए गए हैं.

ज़रूरी शर्तें

बैनर विज्ञापनों को "सुरक्षित जगह" में रखा जाना चाहिए, ताकि वे गोल कोनों, सेंसर हाउसिंग, और होम इंडिकेटर से छिप न जाएं. इस पेज पर आपको उदाहरण मिलेंगे कि बैनर को सुरक्षित क्षेत्र के सबसे ऊपर या सबसे नीचे रखने के लिए, पाबंदियां कैसे जोड़ी जाएं. स्टोरीबोर्ड और प्रोग्रामैटिक कंस्ट्रेंट, दोनों को ऐसे एनवायरमेंट में दिखाया गया है जो iOS 9 और इसके बाद के वर्शन के साथ-साथ Xcode 9 और इसके बाद के वर्शन के साथ काम करता है. iOS और Xcode के पुराने वर्शन के लिए समाधान भी बताए गए हैं.

स्टोरीबोर्ड/इंटरफ़ेस बिल्डर

अगर आपका ऐप्लिकेशन इंटरफ़ेस बिल्डर का इस्तेमाल करता है, तो सबसे पहले पक्का करें कि आपने सुरक्षित एरिया लेआउट गाइड चालू की हों. इसके लिए, आपको Xcode 9+ का इस्तेमाल करना होगा और iOS 9+ को टारगेट करना होगा.

इंटरफ़ेस बिल्डर फ़ाइल खोलें और व्यू कंट्रोलर सीन पर क्लिक करें. आपको दाईं ओर, Interface Builder Document के विकल्प दिखेंगे. Use Safe Area Layout Guides को चुनें और पक्का करें कि आपका ऐप्लिकेशन कम से कम iOS 9.0 और इसके बाद के वर्शन के लिए बनाया जा रहा हो.

हमारा सुझाव है कि आप चौड़ाई और ऊंचाई की सीमाओं का इस्तेमाल करके, बैनर को ज़रूरी साइज़ तक सीमित करें.

अब GAMBannerView की टॉप प्रॉपर्टी को सुरक्षित क्षेत्र के सबसे ऊपर वाले हिस्से तक सीमित करके, बैनर को सुरक्षित क्षेत्र के सबसे ऊपर वाले हिस्से में अलाइन किया जा सकता है:

इसी तरह, GAMBannerView की Bottom प्रॉपर्टी को सेफ़ एरिया के सबसे निचले हिस्से तक सीमित करके, बैनर को सेफ़ एरिया के सबसे निचले हिस्से में अलाइन किया जा सकता है:

अब आपकी कंस्ट्रेंट, नीचे दिए गए स्क्रीनशॉट की तरह दिखनी चाहिए. हालांकि, साइज़/पोज़िशन अलग-अलग हो सकती है:

ViewController

यहां व्यू कंट्रोलर कोड स्निपेट का एक आसान उदाहरण दिया गया है. इसमें GAMBannerView में बैनर दिखाने के लिए ज़रूरी कम से कम कोड शामिल है, जैसा कि ऊपर स्टोरीबोर्ड में कॉन्फ़िगर किया गया है:

Swift

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())
  }

}

Objective-C

@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 या इससे पहले के वर्शन के लिए सहायता चाहिए, तो आपको इंटरफ़ेस बिल्डर की फ़ाइलों और स्टोरीबोर्ड के लिए, सुरक्षित एरिया लेआउट गाइड का इस्तेमाल करें से सही का निशान हटाना चाहिए.

अब आपके पास, टॉप लेआउट गाइड के सबसे नीचे कंस्ट्रेंट जोड़ने का विकल्प है. इसके लिए, आपको सुरक्षित हिस्से के सबसे ऊपर जाने की ज़रूरत नहीं है:

साथ ही, बॉटम लेआउट गाइड के सबसे ऊपर कंस्ट्रेंट जोड़ें (सेफ़ एरिया के सबसे नीचे के बजाय):

पूरी चौड़ाई वाले बैनर के लिए, ये लेआउट गाइड मौजूद नहीं हैं. इन पर सिर्फ़ लैंडस्केप मोड में सेफ़ एरिया का असर पड़ता है. इंटरफ़ेस बिल्डर में सुरक्षित विकल्प यह है कि बाएं और दाएं किनारे की सीमाओं को मार्जिन के हिसाब से सेट किया जाए:

इससे बैनर का किनारा, सुपरव्यू/सुरक्षित इलाके के किनारे से थोड़ा ऑफ़सेट हो जाएगा. इससे यह पक्का होगा कि iPhone X पर लैंडस्केप ओरिएंटेशन में आपका बैनर धुंधला नहीं दिखेगा. प्रोग्राम के हिसाब से भी मनमुताबिक नतीजे हासिल किए जा सकते हैं.

प्रोग्रामेटिक

अगर आपका ऐप्लिकेशन प्रोग्राम के हिसाब से बैनर विज्ञापन बनाता है, तो पाबंदियां तय की जा सकती हैं. साथ ही, कोड में बैनर विज्ञापन की जगह तय की जा सकती है. इस उदाहरण (iOS के वर्शन 7.0 और इसके बाद के वर्शन के लिए) में, बैनर को सेफ़ एरिया के सबसे नीचे, हॉरिज़ॉन्टल तौर पर बीच में रखने का तरीका बताया गया है:

Swift

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))
  }

}

Objective-C

@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 Mobile Ads SDK से रेंडर किए जाते हैं. इनमें इंटरस्टीशियल और इनाम वाले विज्ञापन शामिल हैं. Google Mobile Ads SDK SDK को अपडेट किया जाएगा, ताकि यह पक्का किया जा सके कि विज्ञापन के एलिमेंट, जैसे कि 'बंद करें' बटन सही जगह पर रेंडर हों. यह बदलाव उपलब्ध होने पर, हम रिलीज़ नोट और इस दस्तावेज़ पेज को अपडेट कर देंगे.