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

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

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

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

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

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

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

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

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

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

/21775744923/example/adaptive-banner

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

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

GAMBannerView बनाना

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

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

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

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

AdManagerBannerView का इस्तेमाल करने के लिए, 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 फ़ाइल में GAMBannerView जोड़ा जा सकता है. इस तरीके का इस्तेमाल करते समय, पक्का करें कि आपने बैनर पर सिर्फ़ पोज़िशन से जुड़ी पाबंदियां जोड़ी हों. उदाहरण के लिए, स्क्रीन पर सबसे नीचे अडैप्टिव बैनर दिखाते समय, बैनर व्यू के सबसे नीचे वाले हिस्से को बॉटम लेआउट गाइड के सबसे ऊपर वाले हिस्से के बराबर सेट करें. साथ ही, centerX कॉन्स्ट्रेंट को सुपरव्यू के centerX के बराबर सेट करें.

विज्ञापन का साइज़ सेट करना

GADSize स्ट्रक्चर को, तय की गई चौड़ाई वाले ऐंकर किए गए अडैप्टिव बैनर टाइप पर सेट करें:

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

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

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

Swift

bannerView.load(AdManagerRequest())
ViewController.swift

SwiftUI

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

Objective-C

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

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

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

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

ओरिएंटेशन में होने वाले बदलावों को हैंडल करना

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

Swift

override func viewWillTransition(
  to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
  coordinator.animate(alongsideTransition: { _ in
    // Load a new ad for the new orientation.
  })
}
BannerSnippets.swift

Objective-C

- (void)viewWillTransitionToSize:(CGSize)size
       withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
    // Load a new ad for the new orientation.
  } completion:nil];
}
BannerSnippets.m

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

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

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

बैनर विज्ञापन के इवेंट के लिए रजिस्टर करने के लिए, delegate प्रॉपर्टी को GAMBannerView पर सेट करें. ऐसा करने के लिए, 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

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

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

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

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

Swift

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

Objective-C

- (void)bannerViewDidReceiveAd:(GAMBannerView *)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:(GAMBannerView *)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:

मैन्युअल तरीके से इंप्रेशन गिनना

अगर आपको इंप्रेशन रिकॉर्ड करने के लिए खास शर्तें तय करनी हैं, तो Ad Manager को मैन्युअल तरीके से इंप्रेशन पिंग भेजे जा सकते हैं. इसके लिए, विज्ञापन लोड करने से पहले मैन्युअल इंप्रेशन के लिए GAMBannerView को चालू करना होगा:

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

जब आपको पता चले कि विज्ञापन वापस आ गया है और स्क्रीन पर दिख रहा है, तो इंप्रेशन को मैन्युअल तरीके से ट्रिगर किया जा सकता है:

Swift

bannerView.recordImpression()

Objective-C

[self.bannerView recordImpression];

ऐप्लिकेशन इवेंट

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

GADAppEventDelegate का इस्तेमाल करके, Ad Manager के लिए खास तौर पर बनाए गए ऐप्लिकेशन इवेंट सुने जा सकते हैं. ये इवेंट, विज्ञापन के लाइफ़साइकल के दौरान कभी भी हो सकते हैं. यहां तक कि GADBannerViewDelegate ऑब्जेक्ट के bannerViewDidReceiveAd: को कॉल करने से पहले भी ऐसा हो सकता है.

Swift

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

// Called when the banner receives an app event.
optional public func bannerView(_ banner: AdManagerBannerView,
    didReceiveAppEvent name: String, withInfo info: String?)

Objective-C

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

@optional
// Called when the banner receives an app event.
-   (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info;

आपके ऐप्लिकेशन के इवेंट के तरीकों को व्यू कंट्रोलर में लागू किया जा सकता है:

Swift

import GoogleMobileAds

class ViewController: UIViewController, AppEventDelegate {}

Objective-C

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {}

@end

विज्ञापन का अनुरोध करने से पहले, appEventDelegate प्रॉपर्टी का इस्तेमाल करके डेलिगेट सेट करना न भूलें.

Swift

bannerView.appEventDelegate = self

Objective-C

self.bannerView.appEventDelegate = self;

यहां एक उदाहरण दिया गया है, जिसमें ऐप्लिकेशन इवेंट के ज़रिए रंग तय करके, ऐप्लिकेशन के बैकग्राउंड का रंग बदलने का तरीका बताया गया है:

Swift

func bannerView(_ banner: AdManagerBannerView, didReceiveAppEvent name: String,
    withInfo info: String?) {
  if name == "color" {
    guard let info = info else { return }
    switch info {
    case "green":
      // Set background color to green.
      view.backgroundColor = UIColor.green
    case "blue":
      // Set background color to blue.
      view.backgroundColor = UIColor.blue
    default:
      // Set background color to black.
      view.backgroundColor = UIColor.black
    }
  }
}

Objective-C

- (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info {
  if ([name isEqual:@"color"]) {
    if ([info isEqual:@"green"]) {
      // Set background color to green.
      self.view.backgroundColor = [UIColor greenColor];
    } else if ([info isEqual:@"blue"]) {
      // Set background color to blue.
      self.view.backgroundColor = [UIColor blueColor];
    } else {
      // Set background color to black.
      self.view.backgroundColor = [UIColor blackColor];
    }
  }
}

यहां वह क्रिएटिव दिया गया है जो appEventDelegate को रंग से जुड़े ऐप्लिकेशन इवेंट के मैसेज भेजता है:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

iOS API Demo ऐप्लिकेशन में ऐप्लिकेशन इवेंट लागू करने के लिए, Ad Manager App Events का उदाहरण देखें.

Swift Objective-C

अन्य संसाधन

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

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

अगले चरण

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

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

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

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

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