बैनर विज्ञापन, रेक्टैंगल के आकार वाले विज्ञापन होते हैं. ये विज्ञापन, ऐप्लिकेशन के लेआउट का कुछ हिस्सा घेरते हैं. जब उपयोगकर्ता आपके ऐप्लिकेशन के साथ इंटरैक्ट करते हैं, तब स्क्रीन पर सबसे ऊपर या सबसे नीचे बैनर विज्ञापन दिखते रहते हैं. इसी तरह स्क्रीन पर स्क्रोल करने के दौरान भी ये विज्ञापन इनलाइन होकर दिखते रहते हैं. बैनर विज्ञापन कुछ समय बाद अपने-आप रीफ़्रेश हो सकते हैं. ज़्यादा जानकारी के लिए, बैनर विज्ञापनों की खास जानकारी देखें.
इस गाइड में ऐंकर किए गए अडैप्टिव बैनर वाले विज्ञापनों का इस्तेमाल शुरू करने का तरीका बताया गया है. इसकी मदद से, हर डिवाइस के लिए विज्ञापन के साइज़ को ऑप्टिमाइज़ करके, आपकी तय की गई चौड़ाई के हिसाब से विज्ञापन की परफ़ॉर्मेंस बढ़ाई जा सकती है.
ऐंकर किया गया अडैप्टिव बैनर
ऐंकर किए गए अडैप्टिव बैनर विज्ञापन, सामान्य तौर पर तय साइज़ के विज्ञापनों के बजाय, तय आसपेक्ट रेशियो वाले विज्ञापन होते हैं. आसपेक्ट रेशियो, इंडस्ट्री स्टैंडर्ड 320x50 से मिलता-जुलता है. उपलब्ध चौड़ाई की जानकारी देने के बाद, यह उस चौड़ाई के लिए सबसे सही ऊंचाई वाला विज्ञापन दिखाता है. एक ही डिवाइस से किए गए सभी अनुरोधों के लिए, विज्ञापन की सबसे सही ऊंचाई में बदलाव नहीं होता. साथ ही, विज्ञापन रीफ़्रेश होने पर, आस-पास के व्यू को दूसरी जगह ले जाने की ज़रूरत नहीं होती.
ज़रूरी शर्तें
- शुरुआती निर्देशों की गाइड को पूरा करें.
हमेशा टेस्ट विज्ञापनों की मदद से जांच करें
अपने ऐप्लिकेशन बनाते और टेस्ट करते समय, लाइव और प्रोडक्शन विज्ञापनों के बजाय, टेस्ट विज्ञापनों का इस्तेमाल करें. ऐसा न करने पर, आपके खाते को निलंबित किया जा सकता है.
टेस्ट विज्ञापनों को लोड करने का सबसे आसान तरीका, iOS बैनर के लिए बनी हमारी खास टेस्ट विज्ञापन यूनिट आईडी का इस्तेमाल करना है:
ca-app-pub-3940256099942544/2435281174
इसे खास तौर पर, हर अनुरोध के लिए टेस्ट विज्ञापन दिखाने के लिए कॉन्फ़िगर किया गया है. साथ ही, कोडिंग, टेस्टिंग, और डीबग करने के दौरान, अपने ऐप्लिकेशन में इसका इस्तेमाल किया जा सकता है. अपना ऐप्लिकेशन पब्लिश करने से पहले, बस यह पक्का कर लें कि आपने उसकी जगह अपना विज्ञापन यूनिट आईडी डाल दिया हो.
Mobile Ads SDK के टेस्ट विज्ञापनों के काम करने के तरीके के बारे में ज़्यादा जानने के लिए, टेस्ट विज्ञापन लेख पढ़ें.
GADBannerView बनाना
बैनर विज्ञापन, GADBannerView
ऑब्जेक्ट में दिखाए जाते हैं. इसलिए, बैनर विज्ञापनों को इंटिग्रेट करने का पहला चरण, अपने व्यू की हैरारकी में GADBannerView
शामिल करना है. आम तौर पर, प्रोग्राम के ज़रिए या इंटरफ़ेस बिल्डर की मदद से ऐसा किया जाता है.
प्रोग्राम के हिसाब से
GADBannerView
को सीधे इंस्टैंशिएट भी किया जा सकता है.
नीचे दिए गए उदाहरण से GADBannerView
बनता है:
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
let viewWidth = view.frame.inset(by: view.safeAreaInsets).width
// Here the current interface orientation is used. Use
// GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or
// GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a
// particular orientation,
let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
bannerView = GADBannerView(adSize: adaptiveSize)
addBannerViewToView(bannerView)
}
func addBannerViewToView(_ bannerView: GADBannerView) {
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
// This example doesn't give width or height constraints, as the provided
// ad size gives the banner an intrinsic content size to size the view.
view.addConstraints(
[NSLayoutConstraint(item: bannerView,
attribute: .bottom,
relatedBy: .equal,
toItem: view.safeAreaLayoutGuide,
attribute: .bottom,
multiplier: 1,
constant: 0),
NSLayoutConstraint(item: bannerView,
attribute: .centerX,
relatedBy: .equal,
toItem: view,
attribute: .centerX,
multiplier: 1,
constant: 0)
])
}
}
स्विफ़्टयूआई
GADBannerView
का इस्तेमाल करने के लिए, UIViewRepresentable
बनाएं:
private struct BannerView: UIViewRepresentable {
let adSize: GADAdSize
init(_ adSize: GADAdSize) {
self.adSize = adSize
}
func makeUIView(context: Context) -> UIView {
// Wrap the GADBannerView in a UIView. GADBannerView automatically reloads a new ad when its
// frame size changes; wrapping in a UIView container insulates the GADBannerView from size
// changes that impact the view returned from makeUIView.
let view = UIView()
view.addSubview(context.coordinator.bannerView)
return view
}
func updateUIView(_ uiView: UIView, context: Context) {
context.coordinator.bannerView.adSize = adSize
}
func makeCoordinator() -> BannerCoordinator {
return BannerCoordinator(self)
}
GADBannerView
के शुरू होने और उसके व्यवहार को मैनेज करने के लिए, एक
Coordinator
बनाएं:
class BannerCoordinator: NSObject, GADBannerViewDelegate {
private(set) lazy var bannerView: GADBannerView = {
let banner = GADBannerView(adSize: parent.adSize)
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
banner.delegate = self
return banner
}()
let parent: BannerView
init(_ parent: BannerView) {
self.parent = parent
}
व्यू की चौड़ाई जानने के लिए, GeometryReader
का इस्तेमाल करें. यह क्लास, मौजूदा डिवाइस ओरिएंटेशन के लिए सही विज्ञापन साइज़ का हिसाब लगाती है. frame
की ऊंचाई को विज्ञापन के साइज़ से कैलकुलेट की गई ऊंचाई पर सेट किया गया है.
var body: some View {
GeometryReader { geometry in
let adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(geometry.size.width)
VStack {
Spacer()
BannerView(adSize)
.frame(height: adSize.size.height)
}
}
Objective-C
ध्यान दें कि इस मामले में, हम चौड़ाई या ऊंचाई से जुड़ी पाबंदियां नहीं देते. ऐसा इसलिए है, क्योंकि विज्ञापन के लिए दिए गए साइज़ से बैनर को कॉन्टेंट का साइज़ अपने-आप मिल जाएगा, ताकि व्यू का साइज़ तय किया जा सके.
@import GoogleMobileAds;
@interface ViewController ()
@property(nonatomic, strong) GADBannerView *bannerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Here safe area is taken into account, hence the view frame is used after the
// view has been laid out.
CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
CGFloat viewWidth = frame.size.width;
// Here the current interface orientation is used. If the ad is being preloaded
// for a future orientation change or different orientation, the function for the
// relevant orientation should be used.
GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
// In this case, we instantiate the banner with desired ad size.
self.bannerView = [[GADBannerView alloc] initWithAdSize:adaptiveSize];
[self addBannerViewToView:self.bannerView];
}
- (void)addBannerViewToView:(UIView *)bannerView {
bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:bannerView];
// This example doesn't give width or height constraints, as the provided
// ad size gives the banner an intrinsic content size to size the view.
[self.view addConstraints:@[
[NSLayoutConstraint constraintWithItem:bannerView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view.safeAreaLayoutGuide
attribute:NSLayoutAttributeBottom
multiplier:1
constant:0],
[NSLayoutConstraint constraintWithItem:bannerView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0]
]];
}
@end
इंटरफ़ेस बिल्डर
किसी स्टोरीबोर्ड या xib फ़ाइल में GADBannerView
जोड़ा जा सकता है. इस तरीके का इस्तेमाल करते समय, पक्का करें कि आपने सिर्फ़ बैनर पर पोज़िशन की सीमाएं जोड़ी हों. उदाहरण के लिए, स्क्रीन के सबसे नीचे अडैप्टिव बैनर दिखाते समय, बैनर व्यू के सबसे नीचे की वैल्यू को सबसे नीचे मौजूद लेआउट गाइड के सबसे ऊपर की वैल्यू के बराबर सेट करें. साथ ही, centerX
की वैल्यू को सुपरव्यू के centerX
के बराबर सेट करें.
बैनर का विज्ञापन साइज़ अब भी प्रोग्राम के हिसाब से सेट है:
Swift
bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
Objective-C
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
विज्ञापन लोड करें
GADBannerView
के सेट अप होने और उसकी प्रॉपर्टी कॉन्फ़िगर होने के बाद, विज्ञापन लोड करने का समय आ जाता है. ऐसा करने के लिए, GADRequest
ऑब्जेक्ट पर loadRequest:
को कॉल करें:
Swift
override func viewDidLoad() {
super.viewDidLoad()
// Set the ad unit ID and view controller that contains the GADBannerView.
bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
bannerView.rootViewController = self
bannerView.load(GADRequest())
}
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
Objective-C
- (void)viewDidLoad {
[super viewDidLoad];
// Set the ad unit ID and view controller that contains the GADBannerView.
self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
self.bannerView.rootViewController = self;
[self.bannerView loadRequest:[GADRequest request]];
}
GADRequest ऑब्जेक्ट, एक विज्ञापन अनुरोध को दिखाते हैं. साथ ही, इनमें टारगेटिंग की जानकारी जैसी प्रॉपर्टी होती हैं.
अगर आपका विज्ञापन लोड नहीं होता है, तो आपको साफ़ तौर पर किसी दूसरे विज्ञापन का अनुरोध करने की ज़रूरत नहीं है. ऐसा तब तक नहीं करना होगा, जब तक आपने अपनी विज्ञापन यूनिट को रीफ़्रेश करने के लिए कॉन्फ़िगर किया हो. Google Mobile Ads SDK, AdMob यूज़र इंटरफ़ेस (यूआई) में बताए गए किसी भी रीफ़्रेश रेट का पालन करता है. अगर आपने रीफ़्रेश करने की सुविधा चालू नहीं की है, तो आपको नया अनुरोध करना होगा.
विज्ञापन इवेंट
GADBannerViewDelegate
का इस्तेमाल करके, लाइफ़साइकल इवेंट को ट्रैक किया जा सकता है. जैसे, जब कोई विज्ञापन बंद किया जाता है या उपयोगकर्ता ऐप्लिकेशन छोड़ता है.
बैनर इवेंट के लिए रजिस्टर करना
बैनर विज्ञापन इवेंट के लिए रजिस्टर करने के लिए, delegate
प्रॉपर्टी को GADBannerView
पर, GADBannerViewDelegate
प्रोटोकॉल लागू करने वाले ऑब्जेक्ट पर सेट करें. आम तौर पर, बैनर विज्ञापनों को लागू करने वाली क्लास, डिलीगेट क्लास के तौर पर भी काम करती है. ऐसे में, delegate
प्रॉपर्टी को self
पर सेट किया जा सकता है.
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController, GADBannerViewDelegate {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// ...
bannerView.delegate = self
}
}
SwiftUI
banner.delegate = self
Objective-C
@import GoogleMobileAds;
@interface ViewController () <GADBannerViewDelegate>
@property(nonatomic, strong) GADBannerView *bannerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// ...
self.bannerView.delegate = self;
}
बैनर इवेंट लागू करना
GADBannerViewDelegate
में मौजूद हर तरीके को 'ज़रूरी नहीं है' के तौर पर मार्क किया गया है. इसलिए, आपको सिर्फ़ अपने हिसाब से तरीके लागू करने होंगे. इस उदाहरण में, हर तरीके को लागू किया गया है और कंसोल में एक मैसेज को लॉग किया गया है:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
print("bannerViewDidReceiveAd")
}
func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) {
print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}
func bannerViewDidRecordImpression(_ bannerView: GADBannerView) {
print("bannerViewDidRecordImpression")
}
func bannerViewWillPresentScreen(_ bannerView: GADBannerView) {
print("bannerViewWillPresentScreen")
}
func bannerViewWillDismissScreen(_ bannerView: GADBannerView) {
print("bannerViewWillDIsmissScreen")
}
func bannerViewDidDismissScreen(_ bannerView: GADBannerView) {
print("bannerViewDidDismissScreen")
}
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");
}
iOS API डेमो ऐप्लिकेशन में, बैनर डेलिगेट करने के तरीकों को लागू करने के लिए, विज्ञापन डेलिगेट करने का उदाहरण देखें.
उपयोग के उदाहरण
यहां विज्ञापन इवेंट के इन तरीकों के इस्तेमाल के कुछ उदाहरण दिए गए हैं.
विज्ञापन मिलने के बाद, व्यू हैरारकी में बैनर जोड़ना
विज्ञापन मिलने के बाद, व्यू हैरारकी में GADBannerView
जोड़ना मुश्किल हो सकता है. ऐसा करने के लिए, bannerViewDidReceiveAd:
इवेंट
को सुनकर ऐसा किया जा सकता है:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
// 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: GADBannerView) {
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
अगले चरण
छोटे किए जा सकने वाले बैनर
छोटे किए जा सकने वाले बैनर विज्ञापन, बैनर विज्ञापन होते हैं. शुरुआत में, इन्हें बड़े ओवरले के तौर पर दिखाया जाता है. साथ ही, इनमें विज्ञापन को छोटे साइज़ में करने के लिए बटन भी होता है. अपनी परफ़ॉर्मेंस को और ऑप्टिमाइज़ करने के लिए, इसका इस्तेमाल करें. ज़्यादा जानकारी के लिए, छोटे हो जाने वाले बैनर विज्ञापन देखें.
इनलाइन अडैप्टिव बैनर
ऐंकर किए गए अडैप्टिव बैनर की तुलना में, इनलाइन अडैप्टिव बैनर बड़े और लंबे होते हैं. इनकी लंबाई कम या ज़्यादा की जा सकती है. साथ ही, ये डिवाइस की स्क्रीन जितने लंबे भी हो सकते हैं. जिन ऐप्लिकेशन में स्क्रोल किए जा सकने वाले कॉन्टेंट में बैनर विज्ञापन दिखाए जाते हैं उनके लिए, ऐंकर किए गए अडैप्टिव बैनर विज्ञापनों के बजाय, इनलाइन अडैप्टिव बैनर का सुझाव दिया जाता है. ज़्यादा जानकारी के लिए, इनलाइन अडैप्टिव बैनर देखें.