इस गाइड में, iOS ऐप्लिकेशन में ऐंकर किए गए अडैप्टिव बैनर विज्ञापन को लोड करने के बारे में बताया गया है.
ज़रूरी शर्तें
जारी रखने से पहले, Google Mobile Ads SDK सेट अप करें.
हमेशा टेस्ट विज्ञापनों का इस्तेमाल करके टेस्ट करना
अपने ऐप्लिकेशन बनाने और उनकी टेस्टिंग करने के लिए, लाइव और प्रोडक्शन विज्ञापन इस्तेमाल करने के बजाय, टेस्ट विज्ञापन इस्तेमाल करें. ऐसा न करने पर, आपका खाता निलंबित किया जा सकता है.
टेस्ट विज्ञापन लोड करने का सबसे आसान तरीका, iOS बैनर के लिए हमारे खास टेस्ट विज्ञापन यूनिट आईडी का इस्तेमाल करना है:
/21775744923/example/adaptive-banner
इसे खास तौर पर इस तरह कॉन्फ़िगर किया गया है कि हर अनुरोध के लिए टेस्ट विज्ञापन दिखाए जा सकें. इसलिए, कोडिंग, टेस्टिंग, और डीबग करने के दौरान, इसका इस्तेमाल अपने ऐप्लिकेशन में किया जा सकता है. हालांकि, ऐप्लिकेशन पब्लिश करने से पहले, इसे अपने विज्ञापन यूनिट आईडी से बदल लें.
Google Mobile Ads SDK टेस्ट विज्ञापन के काम करने के तरीके के बारे में ज़्यादा जानने के लिए, टेस्ट विज्ञापन लेख पढ़ें.
GAMBannerView बनाएं
बैनर विज्ञापन, GAMBannerView ऑब्जेक्ट में दिखाए जाते हैं. इसलिए, बैनर विज्ञापनों को इंटिग्रेट करने का पहला चरण, व्यू हैरारकी में GAMBannerView को शामिल करना है. आम तौर पर, इसे प्रोग्राम के ज़रिए या Interface Builder की मदद से किया जाता है.
प्रोग्राम के हिसाब से, अपने-आप होने वाली प्रोसेस
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),
])
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)
}
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)
}
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;
Interface Builder
किसी स्टोरीबोर्ड या xib फ़ाइल में GAMBannerView जोड़ा जा सकता है. इस तरीके का इस्तेमाल करते समय, पक्का करें कि आपने बैनर पर सिर्फ़ पोज़िशन से जुड़ी पाबंदियां जोड़ी हों. उदाहरण के लिए,
स्क्रीन पर सबसे नीचे अडैप्टिव बैनर दिखाते समय, बैनर व्यू के सबसे नीचे वाले हिस्से को बॉटम लेआउट गाइड के सबसे ऊपर वाले हिस्से के बराबर सेट करें. साथ ही, centerX
कॉन्स्ट्रेंट को सुपरव्यू के centerX के बराबर सेट करें.
विज्ञापन का साइज़ सेट करना
यहां दिए गए उदाहरण में, बड़े ऐंकर अडैप्टिव बैनर का साइज़ मिलता है:
Swift
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
Objective-C
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
विज्ञापन लोड करना
GAMBannerView को लागू करने और इसकी प्रॉपर्टी, जैसे कि adUnitID को कॉन्फ़िगर करने के बाद, विज्ञापन लोड करने का समय आ जाता है. इसके लिए, GAMRequest ऑब्जेक्ट पर loadRequest: को कॉल किया जाता है:
Swift
func loadBannerAd(bannerView: AdManagerBannerView) {
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
bannerView.load(AdManagerRequest())
}
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
Objective-C
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
[self.bannerView loadRequest:[GAMRequest request]];
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.
})
}
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];
}
विज्ञापन इवेंट
GADBannerViewDelegate का इस्तेमाल करके, लाइफ़साइकल इवेंट के बारे में सुना जा सकता है. जैसे, जब कोई विज्ञापन बंद हो जाता है या उपयोगकर्ता ऐप्लिकेशन छोड़ देता है.
बैनर इवेंट के लिए रजिस्टर करना
बैनर विज्ञापन इवेंट के लिए रजिस्टर करने के लिए, GAMBannerView पर delegate प्रॉपर्टी को ऐसे ऑब्जेक्ट पर सेट करें जो GADBannerViewDelegate प्रोटोकॉल लागू करता है. आम तौर पर, बैनर विज्ञापन लागू करने वाली क्लास, डेलिगेट क्लास के तौर पर भी काम करती है. ऐसे में, delegate प्रॉपर्टी को self पर सेट किया जा सकता है.
Swift
bannerView.delegate = self
SwiftUI
banner.delegate = context.coordinator
Objective-C
bannerView.delegate = self;
बैनर इवेंट लागू करना
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.")
}
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");
}
iOS API Demo ऐप्लिकेशन में बैनर डेलिगेट के तरीकों को लागू करने के लिए, विज्ञापन डेलिगेट का उदाहरण देखें.
उपयोग के उदाहरण
यहां विज्ञापन इवेंट के इन तरीकों के इस्तेमाल के कुछ उदाहरण दिए गए हैं.
विज्ञापन मिलने के बाद, व्यू हैरारकी में बैनर जोड़ना
आपको विज्ञापन मिलने तक, व्यू हैरारकी में 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: को कॉल करने से पहले भी हो सकते हैं.
ऐप्लिकेशन इवेंट के लिए रजिस्टर करने के लिए, GAMBannerView पर डेलिगेट प्रॉपर्टी को ऐसे ऑब्जेक्ट पर सेट करें जो GADAppEventDelegate प्रोटोकॉल लागू करता है. आम तौर पर, बैनर विज्ञापन दिखाने वाली क्लास, डेलिगेट क्लास के तौर पर भी काम करती है. ऐसे में, डेलिगेट प्रॉपर्टी को self पर सेट किया जा सकता है.
Swift
// Set this property before making the request for an ad.
bannerView.appEventDelegate = self
Objective-C
// Set this property before making the request for an ad.
self.bannerView.appEventDelegate = self;
यहां एक उदाहरण दिया गया है, जिसमें ऐप्लिकेशन इवेंट से कलर तय करके, ऐप्लिकेशन के बैकग्राउंड का रंग बदलने का तरीका बताया गया है:
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
}
}
}
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 डेमो ऐप्लिकेशन में ऐप्लिकेशन इवेंट लागू करने के लिए, Ad Manager ऐप्लिकेशन इवेंट का उदाहरण देखें.
अन्य संसाधन
GitHub पर उदाहरण
- ऐंकर किए गए अडैप्टिव बैनर विज्ञापनों का उदाहरण: Swift | SwiftUI | Objective-C
- ऐडवांस सुविधाओं का डेमो: Swift | Objective-C
अगले चरण
छोटे हो जाने वाले बैनर विज्ञापन
छोटे हो जाने वाले बैनर विज्ञापन, ऐसे बैनर विज्ञापन होते हैं जो शुरुआत में बड़े ओवरले के तौर पर दिखते हैं. इनमें एक बटन होता है, जिसकी मदद से विज्ञापन को छोटे साइज़ पर वापस लाया जा सकता है. अपनी परफ़ॉर्मेंस को और बेहतर बनाने के लिए, इसका इस्तेमाल करें. ज़्यादा जानकारी के लिए, छोटे हो जाने वाले बैनर विज्ञापन देखें.
इनलाइन अडैप्टिव बैनर
इनलाइन अडैप्टिव बैनर, ऐंकर किए गए अडैप्टिव बैनर की तुलना में बड़े और लंबे होते हैं. इनकी लंबाई कम या ज़्यादा की जा सकती है. अपनी इस विशेषता की वजह से ये बैनर, डिवाइस की स्क्रीन जितने लंबे भी हो सकते हैं. स्क्रोल किए जा सकने वाले कॉन्टेंट में बैनर विज्ञापन दिखाने वाले ऐप्लिकेशन के लिए, ऐंकर किए गए अडैप्टिव बैनर विज्ञापनों के बजाय इनलाइन अडैप्टिव बैनर विज्ञापनों का इस्तेमाल करने का सुझाव दिया जाता है. ज़्यादा जानकारी के लिए, इनलाइन अडैप्टिव बैनर देखें.