बैनर विज्ञापन सेट अप करना

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

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

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

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

आगे बढ़ने से पहले, सेट अप करें Google Mobile Ads SDK.

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

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

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

/21775744923/example/adaptive-banner

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

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

`GAMBannerView` बनाना

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

प्रोग्राम के ज़रिए

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

Swift

// Initialize the banner view.
bannerView = AdManagerBannerView()
bannerView.delegate = self

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),
])AdManagerBannerSnippets.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 = largeAnchoredAdaptiveBanner(width: 375)
  BannerViewContainer(adSize)
    .frame(width: adSize.size.width, height: adSize.size.height)
}BannerContentView.swift

Objective-C

// Initialize the banner view.
GAMBannerView *bannerView = [[GAMBannerView alloc] init];
bannerView.delegate = self;
UIView *view = self.view;

bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[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 activateConstraints:@[
  // Align the banner's bottom edge with the safe area's bottom edge
  [bannerView.bottomAnchor
      constraintEqualToAnchor:view.safeAreaLayoutGuide.bottomAnchor],
  // Center the banner horizontally in the view
  [bannerView.centerXAnchor constraintEqualToAnchor:view.centerXAnchor],
]];

self.bannerView = bannerView;AdManagerBannerSnippets.m

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

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

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

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

Swift

// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)AdManagerBannerSnippets.swift

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);AdManagerBannerSnippets.m

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

GAMBannerView को सही जगह पर रखने और उसकी प्रॉपर्टी (जैसे, adUnitID) को कॉन्फ़िगर करने के बाद, विज्ञापन लोड करें. इसके लिए, loadRequest: ऑब्जेक्ट पर GAMRequest को कॉल करें:

Swift

func loadBannerAd(bannerView: AdManagerBannerView) {
  // Request a large anchored adaptive banner with a width of 375.
  bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
  bannerView.load(AdManagerRequest())
}AdManagerBannerSnippets.swift

SwiftUI

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

Objective-C

// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);

[self.bannerView loadRequest:[GAMRequest request]];AdManagerBannerSnippets.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 का इस्तेमाल करके, लाइफ़साइकल इवेंट सुने जा सकते हैं. जैसे, विज्ञापन बंद होने या उपयोगकर्ता के ऐप्लिकेशन छोड़ने पर.

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

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

Swift

bannerView.delegate = selfAdManagerBannerSnippets.swift

SwiftUI

banner.delegate = context.coordinatorBannerContentView.swift

Objective-C

bannerView.delegate = self;AdManagerBannerSnippets.m

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

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

Swift

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print("Banner ad loaded.")
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print("Banner ad failed to load: \(error.localizedDescription)")
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print("Banner ad recorded an impression.")
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print("Banner ad recorded a click.")
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print("Banner ad will present screen.")
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print("Banner ad will dismiss screen.")
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print("Banner ad did dismiss screen.")
}AdManagerBannerSnippets.swift

Objective-C

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

- (void)bannerView:(GAMBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
  NSLog(@"bannerView:didFailToReceiveAdWithError: %@", error.localizedDescription);
}

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

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

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

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

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

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 में सीधे तौर पर ट्रैफ़िक किए गए क्रिएटिव) के साथ काम करती है. इसका इस्तेमाल, बैकफ़िल या तीसरे पक्ष के नेटवर्क के विज्ञापनों के लिए नहीं किया जाना चाहिए. ज़्यादा जानकारी के लिए, सहायता केंद्र का यह लेख देखें.

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

Swift

bannerView.enableManualImpressions = trueAdManagerBannerSnippets.swift

Objective-C

self.bannerView.enableManualImpressions = YES;AdManagerBannerSnippets.m

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

Swift

bannerView.recordImpression()AdManagerBannerSnippets.swift

Objective-C

[self.bannerView recordImpression];AdManagerBannerSnippets.m

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

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

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

Swift

// Set this property before making the request for an ad.
bannerView.appEventDelegate = selfAdManagerBannerSnippets.swift

Objective-C

// Set this property before making the request for an ad.
self.bannerView.appEventDelegate = self;AdManagerBannerSnippets.m

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

Swift

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

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];
    }
  }
}AdManagerBannerSnippets.m

यहां वह क्रिएटिव दिया गया है जो 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 डेमो ऐप्लिकेशन में, ऐप्लिकेशन इवेंट को लागू करने के लिए, Ad Manager के ऐप्लिकेशन इवेंट का उदाहरण देखें.

Swift Objective-C

अन्य संसाधन

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

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

ऐडवांस सुविधाओं का डेमो: Swift | Objective-C

अगले चरण

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

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

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

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

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

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