बैनर विज्ञापन

प्लैटफ़ॉर्म चुनें: Android iOS Unity Flutter

बैनर विज्ञापन, रेक्टैंगल के आकार वाले विज्ञापन होते हैं. ये विज्ञापन, ऐप्लिकेशन के लेआउट का कुछ हिस्सा घेरते हैं. जब उपयोगकर्ता आपके ऐप्लिकेशन के साथ इंटरैक्ट करते हैं, तब स्क्रीन पर सबसे ऊपर या सबसे नीचे बैनर विज्ञापन दिखते रहते हैं. वहीं, स्क्रीन पर स्क्रोल करने के दौरान भी ये विज्ञापन इनलाइन होकर दिखते रहते हैं. बैनर विज्ञापन कुछ समय बाद अपने-आप रीफ़्रेश हो सकते हैं. ज़्यादा जानकारी के लिए, बैनर विज्ञापनों के बारे में खास जानकारी देखें.

इस गाइड में, ऐंकर किए गए अडैप्टिव बैनर विज्ञापनों का इस्तेमाल शुरू करने का तरीका बताया गया है. ये विज्ञापन, आपके तय किए गए विज्ञापन की चौड़ाई का इस्तेमाल करके, हर डिवाइस के लिए विज्ञापन के साइज़ को ऑप्टिमाइज़ करके परफ़ॉर्मेंस को बेहतर बनाते हैं.

ऐंकर किया गया अडैप्टिव बैनर

ऐंकर किए गए अडैप्टिव बैनर विज्ञापन, सामान्य तौर पर तय साइज़ के विज्ञापनों के बजाय, तय आसपेक्ट रेशियो वाले विज्ञापन होते हैं. आसपेक्ट रेशियो, इंडस्ट्री स्टैंडर्ड 320x50 जैसा ही है. उपलब्ध चौड़ाई की जानकारी देने के बाद, यह उस चौड़ाई के लिए सबसे सही ऊंचाई वाला विज्ञापन दिखाता है. एक ही डिवाइस से किए गए सभी अनुरोधों के लिए, विज्ञापन की सबसे सही ऊंचाई में बदलाव नहीं होता. साथ ही, विज्ञापन रीफ़्रेश होने पर, आस-पास के व्यू को दूसरी जगह ले जाने की ज़रूरत नहीं होती.

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

• शुरू करने के लिए गाइड को पूरा करें.

हमेशा टेस्ट विज्ञापनों की मदद से जांच करें

अपने ऐप्लिकेशन बनाते और टेस्ट करते समय, लाइव और प्रोडक्शन विज्ञापनों के बजाय, टेस्ट विज्ञापनों का इस्तेमाल करें. ऐसा न करने पर, आपके खाते को निलंबित किया जा सकता है.

टेस्ट विज्ञापनों को लोड करने का सबसे आसान तरीका, iOS बैनर के लिए हमारे खास टेस्ट विज्ञापन यूनिट आईडी का इस्तेमाल करना है:

ca-app-pub-3940256099942544/2435281174

इसे खास तौर पर, हर अनुरोध के लिए टेस्ट विज्ञापन दिखाने के लिए कॉन्फ़िगर किया गया है. साथ ही, कोडिंग, टेस्टिंग, और डीबग करने के दौरान, अपने ऐप्लिकेशन में इसका इस्तेमाल किया जा सकता है. बस पक्का करें कि ऐप्लिकेशन पब्लिश करने से पहले, आपने इसे अपने विज्ञापन यूनिट आईडी से बदल दिया हो.

Mobile Ads SDK के टेस्ट विज्ञापनों के काम करने के तरीके के बारे में ज़्यादा जानने के लिए, टेस्ट विज्ञापन लेख पढ़ें.

GADBannerView बनाना

बैनर विज्ञापन, GADBannerView ऑब्जेक्ट में दिखाए जाते हैं. इसलिए, बैनर विज्ञापनों को इंटिग्रेट करने का पहला चरण, अपने व्यू की हैरारकी में GADBannerView शामिल करना है. आम तौर पर, प्रोग्राम के ज़रिए या इंटरफ़ेस बिल्डर की मदद से ऐसा किया जाता है.

प्रोग्राम के हिसाब से

GADBannerView को सीधे इंस्टैंशिएट भी किया जा सकता है. यहां दिए गए उदाहरण में, GADBannerView बनाया गया है:

Swift

// Initialize the BannerView.
bannerView = BannerView()

bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
  // Align the banner's bottom edge with the safe area's bottom edge
  bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
  // Center the banner horizontally in the view
  bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
BannerSnippets.swift

SwiftUI

BannerView का इस्तेमाल करने के लिए, UIViewRepresentable बनाएं:

private struct BannerViewContainer: UIViewRepresentable {
  typealias UIViewType = BannerView
  let adSize: AdSize

  init(_ adSize: AdSize) {
    self.adSize = adSize
  }

  func makeUIView(context: Context) -> BannerView {
    let banner = BannerView(adSize: adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(Request())
    banner.delegate = context.coordinator
    return banner
  }

  func updateUIView(_ uiView: BannerView, context: Context) {}

  func makeCoordinator() -> BannerCoordinator {
    return BannerCoordinator(self)
  }
BannerContentView.swift

height और width वैल्यू की जानकारी देकर, व्यू हैरारकी में अपना UIViewRepresentable जोड़ें:

var body: some View {
  Spacer()
  // Request an anchored adaptive banner with a width of 375.
  let adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
  BannerViewContainer(adSize)
    .frame(width: adSize.size.width, height: adSize.size.height)
}
BannerContentView.swift

Objective-C

// Initialize the GADBannerView.
self.bannerView = [[GADBannerView alloc] init];

self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.bannerView];

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
    // Align the banner's bottom edge with the safe area's bottom edge
    [self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
    // Center the banner horizontally in the view
    [self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
BannerSnippets.m

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

किसी स्टोरीबोर्ड या xib फ़ाइल में GADBannerView जोड़ा जा सकता है. इस तरीके का इस्तेमाल करते समय, सिर्फ़ बैनर पर पोज़िशन की सीमाएं जोड़ें. उदाहरण के लिए, स्क्रीन के सबसे नीचे अडैप्टिव बैनर दिखाते समय, बैनर व्यू के सबसे नीचे की वैल्यू को सबसे नीचे मौजूद लेआउट गाइड के सबसे ऊपर की वैल्यू के बराबर सेट करें. साथ ही, centerX कंस्ट्रेंट की वैल्यू को सुपरव्यू के centerX के बराबर सेट करें.

बैनर के विज्ञापन का साइज़ अब भी प्रोग्राम के हिसाब से सेट होता है:

Swift

// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
ViewController.swift

Objective-C

// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
ViewController.m

विज्ञापन लोड करना

GADBannerView सेट होने और adUnitID जैसी उसकी प्रॉपर्टी कॉन्फ़िगर होने के बाद, विज्ञापन लोड करने का समय आ जाता है. ऐसा करने के लिए, GADRequest ऑब्जेक्ट पर loadRequest: को कॉल करें:

Swift

bannerView.load(Request())
ViewController.swift

SwiftUI

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
BannerContentView.swift

Objective-C

[self.bannerView loadRequest:[GADRequest request]];
ViewController.m

GADRequest ऑब्जेक्ट, एक विज्ञापन अनुरोध को दिखाते हैं. साथ ही, इनमें टारगेटिंग की जानकारी जैसी चीज़ों के लिए प्रॉपर्टी होती हैं.

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

विज्ञापन रीफ़्रेश करना

अगर आपने अपनी विज्ञापन यूनिट को रीफ़्रेश करने के लिए कॉन्फ़िगर किया है, तो विज्ञापन लोड न होने पर, आपको किसी दूसरे विज्ञापन का अनुरोध करने की ज़रूरत नहीं है. Google Mobile Ads SDK, AdMob यूज़र इंटरफ़ेस (यूआई) में बताए गए किसी भी रीफ़्रेश रेट का पालन करता है. अगर आपने रीफ़्रेश करने की सुविधा चालू नहीं की है, तो नया अनुरोध करें. विज्ञापन यूनिट के रीफ़्रेश होने के बारे में ज़्यादा जानकारी के लिए, जैसे कि रीफ़्रेश रेट सेट करना, बैनर विज्ञापनों के लिए, अपने-आप रीफ़्रेश होने की सुविधा का इस्तेमाल करना लेख पढ़ें.

ध्यान दें: AdMob यूज़र इंटरफ़ेस (यूआई) में रीफ़्रेश रेट सेट करते समय, अपने-आप रीफ़्रेश होने की सुविधा सिर्फ़ तब काम करती है, जब बैनर स्क्रीन पर दिख रहा हो.

विज्ञापन इवेंट

GADBannerViewDelegate का इस्तेमाल करके, लाइफ़साइकल इवेंट को ट्रैक किया जा सकता है. जैसे, जब कोई विज्ञापन बंद किया जाता है या उपयोगकर्ता ऐप्लिकेशन छोड़ता है.

बैनर इवेंट के लिए रजिस्टर करना

बैनर विज्ञापन इवेंट के लिए रजिस्टर करने के लिए, delegate प्रॉपर्टी को GADBannerView पर, GADBannerViewDelegate प्रोटोकॉल लागू करने वाले ऑब्जेक्ट पर सेट करें. आम तौर पर, बैनर विज्ञापन दिखाने वाली क्लास, डिलीगेट क्लास के तौर पर भी काम करती है. ऐसे में, delegate प्रॉपर्टी को self पर सेट किया जा सकता है.

Swift

bannerView.delegate = self
ViewController.swift

SwiftUI

banner.delegate = context.coordinator
BannerContentView.swift

Objective-C

self.bannerView.delegate = self;
ViewController.m

बैनर इवेंट लागू करना

GADBannerViewDelegate में मौजूद हर तरीके को 'ज़रूरी नहीं है' के तौर पर मार्क किया गया है. इसलिए, आपको सिर्फ़ अपने हिसाब से तरीके लागू करने होंगे. इस उदाहरण में, हर तरीके को लागू किया गया है और कंसोल में एक मैसेज को लॉग किया गया है:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print(#function)
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print(#function + ": " + error.localizedDescription)
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print(#function)
}
ViewController.swift

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidReceiveAd");
}

- (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
  NSLog(@"bannerView:didFailToReceiveAdWithError: %@", [error localizedDescription]);
}

- (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidRecordImpression");
}

- (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewWillPresentScreen");
}

- (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewWillDismissScreen");
}

- (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidDismissScreen");
}
ViewController.m

iOS API डेमो ऐप्लिकेशन में, बैनर डेलिगेट करने के तरीकों को लागू करने के लिए, विज्ञापन डेलिगेट करने का उदाहरण देखें.

Swift Objective-C

उपयोग के उदाहरण

यहां विज्ञापन इवेंट के इन तरीकों के इस्तेमाल के कुछ उदाहरण दिए गए हैं.

विज्ञापन मिलने के बाद, व्यू हैरारकी में बैनर जोड़ना

हो सकता है कि आप विज्ञापन मिलने तक, व्यू हैरारकी में GADBannerView को जोड़ने में देरी करना चाहें. bannerViewDidReceiveAd: इवेंट को सुनकर, ऐसा किया जा सकता है:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  // Add banner to view and add constraints.
  addBannerViewToView(bannerView)
}

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

बैनर विज्ञापन में ऐनिमेशन जोड़ना

bannerViewDidReceiveAd: इवेंट का इस्तेमाल, बैनर विज्ञापन के वापस आने के बाद उसे ऐनिमेट करने के लिए भी किया जा सकता है. इसका उदाहरण यहां दिया गया है:

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  bannerView.alpha = 0
  UIView.animate(withDuration: 1, animations: {
    bannerView.alpha = 1
  })
}

Objective-C

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

ऐप्लिकेशन को रोकना और फिर से शुरू करना

GADBannerViewDelegate प्रोटोकॉल में, इवेंट की सूचना देने के तरीके होते हैं. जैसे, जब किसी क्लिक की वजह से ओवरले दिखता है या हटाया जाता है. अगर आपको यह पता करना है कि ये इवेंट विज्ञापनों की वजह से हुए थे या नहीं, तो इन GADBannerViewDelegate तरीकों के लिए रजिस्टर करें.

विज्ञापन पर क्लिक करने से होने वाले ओवरले प्रज़ेंटेशन या बाहरी ब्राउज़र को शुरू करने के साथ-साथ, सभी तरह के ओवरले प्रज़ेंटेशन या बाहरी ब्राउज़र को शुरू करने के लिए, आपके ऐप्लिकेशन को UIViewController या UIApplication पर मिलते-जुलते तरीकों को सुनना बेहतर होगा. यहां एक टेबल दी गई है, जिसमें GADBannerViewDelegate के तरीकों के साथ-साथ इस्तेमाल किए जाने वाले iOS के मिलते-जुलते तरीके दिखाए गए हैं:

GADBannerViewDelegate का तरीका	iOS डिवाइसों पर
bannerViewWillPresentScreen:	UIViewController का viewWillDisappear:
bannerViewWillDismissScreen:	UIViewController का viewWillAppear:
bannerViewDidDismissScreen:	UIViewController का viewDidAppear:

अन्य संसाधन

GitHub पर मौजूद उदाहरण

• ऐंकर किए गए अडैप्टिव बैनर विज्ञापनों का उदाहरण: Swift | SwiftUI | Objective-C

• बेहतर सुविधाओं का डेमो: Swift | Objective-C

अगले चरण

छोटे हो जाने वाले बैनर विज्ञापन

छोटे किए जा सकने वाले बैनर विज्ञापन, बैनर विज्ञापन होते हैं. शुरुआत में, इन्हें बड़े ओवरले के तौर पर दिखाया जाता है. साथ ही, इनमें विज्ञापन को छोटे साइज़ में करने के लिए बटन भी होता है. अपनी परफ़ॉर्मेंस को और ऑप्टिमाइज़ करने के लिए, इसका इस्तेमाल करें. ज़्यादा जानकारी के लिए, छोटे हो जाने वाले बैनर विज्ञापन देखें.

इनलाइन अडैप्टिव बैनर

ऐंकर किए गए अडैप्टिव बैनर की तुलना में, इनलाइन अडैप्टिव बैनर बड़े और लंबे होते हैं. इनकी लंबाई कम या ज़्यादा की जा सकती है. साथ ही, ये डिवाइस की स्क्रीन जितने लंबे भी हो सकते हैं. जिन ऐप्लिकेशन में स्क्रोल किए जा सकने वाले कॉन्टेंट में बैनर विज्ञापन दिखाए जाते हैं उनके लिए, ऐंकर किए गए अडैप्टिव बैनर विज्ञापनों के बजाय, इनलाइन अडैप्टिव बैनर का सुझाव दिया जाता है. ज़्यादा जानकारी के लिए, इनलाइन ऐडैप्टिव बैनर देखें.

अन्य विषयों के बारे में जानें

• उपयोगकर्ता की निजता