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

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

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

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

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

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

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

हमेशा टेस्ट विज्ञापनों का इस्तेमाल करके टेस्ट करें

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

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

ca-app-pub-3940256099942544/2435281174

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

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

GADBannerView बनाएं

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

प्रोग्राम के हिसाब से, अपने-आप होने वाली प्रोसेस

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

UIViewRepresentable को व्यू हैरारकी में जोड़ें. साथ ही, height और width वैल्यू तय करें:

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

Interface Builder

किसी स्टोरीबोर्ड या 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 यूज़र इंटरफ़ेस (यूआई) में सेट की गई रीफ़्रेश दर का पालन करता है. अगर आपने रीफ़्रेश करने की सुविधा चालू नहीं की है, तो नया अनुरोध करें. विज्ञापन यूनिट के रीफ़्रेश होने के बारे में ज़्यादा जानकारी के लिए, जैसे कि रीफ़्रेश रेट सेट करना, यह लेख पढ़ें: बैनर विज्ञापनों के लिए, अपने-आप रीफ़्रेश होने की सुविधा का इस्तेमाल करना.

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

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 Demo ऐप्लिकेशन में बैनर डेलिगेट के तरीकों को लागू करने के लिए, AdDelegate का उदाहरण देखें.

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 पर उपलब्ध तरीकों का इस्तेमाल कर सकता है. यहां एक टेबल दी गई है. इसमें iOS के उन तरीकों के बारे में बताया गया है जिन्हें GADBannerViewDelegate के तरीकों के साथ ही लागू किया जाता है:

GADBannerViewDelegate तरीका iOS का तरीका
bannerViewWillPresentScreen: UIViewController का viewWillDisappear:
bannerViewWillDismissScreen: UIViewController का viewWillAppear:
bannerViewDidDismissScreen: UIViewController का viewDidAppear:

अन्य संसाधन

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

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

अगले चरण

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

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

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

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

अन्य विषय एक्सप्लोर करें