ব্যানার বিজ্ঞাপন হল আয়তাকার বিজ্ঞাপন যা একটি অ্যাপের লেআউটের একটি অংশ দখল করে। ব্যবহারকারীরা অ্যাপের সাথে ইন্টারঅ্যাক্ট করার সময় এগুলি স্ক্রিনে থাকে, হয় স্ক্রিনের উপরে বা নীচে নোঙ্গর করা থাকে অথবা ব্যবহারকারী যখন স্ক্রোল করে তখন বিষয়বস্তুর সাথে ইনলাইনে থাকে। ব্যানার বিজ্ঞাপনগুলি একটি নির্দিষ্ট সময়ের পরে স্বয়ংক্রিয়ভাবে রিফ্রেশ হতে পারে। আরও তথ্যের জন্য ব্যানার বিজ্ঞাপনগুলির ওভারভিউ দেখুন।
এই নির্দেশিকাটি আপনাকে অ্যাঙ্করড অ্যাডাপ্টিভ ব্যানার বিজ্ঞাপন দিয়ে কীভাবে শুরু করবেন তা দেখায়, যা আপনার নির্দিষ্ট বিজ্ঞাপনের প্রস্থ ব্যবহার করে প্রতিটি ডিভাইসের জন্য বিজ্ঞাপনের আকার অপ্টিমাইজ করে কর্মক্ষমতা সর্বাধিক করে তোলে।
Anchored adaptive banner
Anchored adaptive banner ads are fixed aspect ratio ads rather than the regular fixed size ads. The aspect ratio is similar to 320x50 industry standard. Once you specify the full width available, it returns an ad with optimal height for that width. The optimal height doesn't change across requests from the same device, and the surrounding views don't need to move when the ad refreshes.
পূর্বশর্ত
- শুরু করুন নির্দেশিকাটি সম্পূর্ণ করুন।
Always test with test ads
আপনার অ্যাপ তৈরি এবং পরীক্ষা করার সময়, লাইভ, প্রোডাকশন বিজ্ঞাপনের পরিবর্তে পরীক্ষামূলক বিজ্ঞাপন ব্যবহার করুন। এটি না করলে আপনার অ্যাকাউন্ট সাসপেন্ড হতে পারে।
পরীক্ষামূলক বিজ্ঞাপন লোড করার সবচেয়ে সহজ উপায় হল iOS ব্যানারের জন্য আমাদের ডেডিকেটেড পরীক্ষামূলক বিজ্ঞাপন ইউনিট আইডি ব্যবহার করা:
/21775744923/example/adaptive-banner
এটি বিশেষভাবে প্রতিটি অনুরোধের জন্য পরীক্ষামূলক বিজ্ঞাপন ফেরত দেওয়ার জন্য কনফিগার করা হয়েছে এবং কোডিং, পরীক্ষা এবং ডিবাগিংয়ের সময় আপনি এটি আপনার নিজস্ব অ্যাপে ব্যবহার করতে পারেন। আপনার অ্যাপ প্রকাশ করার আগে এটি আপনার নিজস্ব বিজ্ঞাপন ইউনিট আইডি দিয়ে প্রতিস্থাপন করুন।
মোবাইল বিজ্ঞাপন SDK-এর পরীক্ষামূলক বিজ্ঞাপনগুলি কীভাবে কাজ করে সে সম্পর্কে আরও তথ্যের জন্য, পরীক্ষামূলক বিজ্ঞাপন দেখুন।
Create a GAMBannerView
ব্যানার বিজ্ঞাপনগুলি GAMBannerView অবজেক্টে প্রদর্শিত হয়, তাই ব্যানার বিজ্ঞাপনগুলিকে একীভূত করার প্রথম ধাপ হল আপনার ভিউ হায়ারার্কিতে একটি GAMBannerView অন্তর্ভুক্ত করা। এটি সাধারণত প্রোগ্রাম্যাটিকভাবে অথবা ইন্টারফেস বিল্ডারের মাধ্যমে করা হয়।
প্রোগ্রাম্যাটিকভাবে
একটি GAMBannerView সরাসরি ইনস্ট্যান্টিয়েট করা যেতে পারে। নিম্নলিখিত উদাহরণটি একটি GAMBannerView তৈরি করে:
সুইফট
// Initialize the banner view.
bannerView = AdManagerBannerView()
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),
])
সুইফটইউআই
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)
}
অবজেক্টিভ-সি
// Initialize the banner view.
GAMBannerView *bannerView = [[GAMBannerView alloc] init];
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;
ইন্টারফেস বিল্ডার
আপনি স্টোরিবোর্ড বা xib ফাইলে একটি GAMBannerView যোগ করতে পারেন। এই পদ্ধতিটি ব্যবহার করার সময়, ব্যানারে কেবল অবস্থানের সীমাবদ্ধতা যোগ করতে ভুলবেন না। উদাহরণস্বরূপ, স্ক্রিনের নীচে একটি অভিযোজিত ব্যানার প্রদর্শন করার সময়, ব্যানার ভিউয়ের নীচের অংশটি নীচের লেআউট গাইডের উপরের অংশের সমান সেট করুন এবং centerX সীমাবদ্ধতাটি সুপারভিউয়ের centerX এর সমান সেট করুন।
Set the ad size
GADSize স্ট্রাক্টটিকে একটি নির্দিষ্ট প্রস্থ সহ একটি অ্যাঙ্কর্ড অ্যাডাপটিভ ব্যানার টাইপে সেট করুন:
সুইফট
// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
অবজেক্টিভ-সি
// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
একটি বিজ্ঞাপন লোড করুন
একবার GAMBannerView তৈরি হয়ে গেলে এবং এর বৈশিষ্ট্যগুলি, যেমন adUnitID , কনফিগার করা হয়ে গেলে, একটি বিজ্ঞাপন লোড করার সময় এসেছে। এটি একটি GAMRequest অবজেক্টে loadRequest: কল করে করা হয়:
সুইফট
bannerView.load(AdManagerRequest())
সুইফটইউআই
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
অবজেক্টিভ-সি
[self.bannerView loadRequest:[GAMRequest request]];
GAMRequest অবজেক্টগুলি একটি একক বিজ্ঞাপন অনুরোধ উপস্থাপন করে এবং এতে টার্গেটিং তথ্যের মতো জিনিসের বৈশিষ্ট্য থাকে।
Refresh an ad
যদি আপনি আপনার বিজ্ঞাপন ইউনিট রিফ্রেশ করার জন্য কনফিগার করে থাকেন, তাহলে বিজ্ঞাপন লোড না হলে আপনাকে আর একটি বিজ্ঞাপনের অনুরোধ করতে হবে না। Google Mobile Ads SDK বিজ্ঞাপন পরিচালক UI-তে আপনার নির্দিষ্ট করা যেকোনো রিফ্রেশ রেট মেনে চলে। যদি আপনি রিফ্রেশ সক্ষম না করে থাকেন, তাহলে একটি নতুন অনুরোধ জারি করুন। বিজ্ঞাপন ইউনিট রিফ্রেশ সম্পর্কে আরও তথ্যের জন্য, যেমন রিফ্রেশ রেট সেট করার জন্য, মোবাইল অ্যাপে বিজ্ঞাপনের জন্য রিফ্রেশ রেট দেখুন।
Handle orientation changes
যখন আপনার অ্যাপের স্ক্রিন ওরিয়েন্টেশন পরিবর্তিত হয়, যেমন portrait মোড থেকে ল্যান্ডস্কেপে, তখন ব্যানারের জন্য উপলব্ধ প্রস্থও প্রায়শই পরিবর্তিত হয়। নতুন লেআউটের জন্য উপযুক্ত আকারের বিজ্ঞাপন প্রদর্শন করতে, একটি নতুন ব্যানারের অনুরোধ করুন। যদি আপনার ব্যানারের প্রস্থ স্থির থাকে, অথবা যদি আপনার লেআউটের সীমাবদ্ধতাগুলি আকার পরিবর্তন করতে পারে, তাহলে এই ধাপটি এড়িয়ে যান।
সুইফট
override func viewWillTransition(
to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
coordinator.animate(alongsideTransition: { _ in
// Load a new ad for the new orientation.
})
}
অবজেক্টিভ-সি
- (void)viewWillTransitionToSize:(CGSize)size
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
// Load a new ad for the new orientation.
} completion:nil];
}
Ad events
GADBannerViewDelegate ব্যবহারের মাধ্যমে, আপনি জীবনচক্রের ঘটনাগুলি শুনতে পারেন, যেমন যখন কোনও বিজ্ঞাপন বন্ধ থাকে বা ব্যবহারকারী অ্যাপটি ছেড়ে চলে যায়।
Register for banner events
ব্যানার বিজ্ঞাপন ইভেন্টের জন্য নিবন্ধন করতে, GAMBannerView এ delegate প্রপার্টিটিকে এমন একটি অবজেক্টে সেট করুন যা GADBannerViewDelegate প্রোটোকল বাস্তবায়ন করে। সাধারণত, যে ক্লাসটি ব্যানার বিজ্ঞাপন বাস্তবায়ন করে তা delegate ক্লাস হিসেবেও কাজ করে, এই ক্ষেত্রে, delegate প্রপার্টিটি self এ সেট করা যেতে পারে।
সুইফট
bannerView.delegate = self
সুইফটইউআই
banner.delegate = context.coordinator
অবজেক্টিভ-সি
self.bannerView.delegate = self;
Implement banner events
GADBannerViewDelegate এর প্রতিটি পদ্ধতি ঐচ্ছিক হিসেবে চিহ্নিত করা হয়েছে, তাই আপনাকে কেবল আপনার পছন্দসই পদ্ধতিগুলি বাস্তবায়ন করতে হবে। এই উদাহরণটি প্রতিটি পদ্ধতি বাস্তবায়ন করে এবং কনসোলে একটি বার্তা লগ করে:
সুইফট
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)
}
অবজেক্টিভ-সি
- (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 ডেমো অ্যাপে ব্যানার ডেলিগেট পদ্ধতি বাস্তবায়নের জন্য বিজ্ঞাপন প্রতিনিধির উদাহরণ দেখুন।
ব্যবহারের ক্ষেত্রে
এই বিজ্ঞাপন ইভেন্ট পদ্ধতিগুলির জন্য কিছু উদাহরণ ব্যবহারের উদাহরণ এখানে দেওয়া হল।
বিজ্ঞাপন পাওয়ার পর ভিউ হাইরার্কিতে একটি ব্যানার যোগ করুন।
আপনি বিজ্ঞাপনটি পাওয়ার পর পর্যন্ত ভিউ হায়ারার্কিতে GAMBannerView যোগ করতে বিলম্ব করতে পারেন। আপনি bannerViewDidReceiveAd: ইভেন্টটি শুনে এটি করতে পারেন:
সুইফট
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
// Add banner to view and add constraints.
addBannerViewToView(bannerView)
}
অবজেক্টিভ-সি
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
// Add bannerView to view and add constraints as above.
[self addBannerViewToView:self.bannerView];
}
Animate a banner ad
নিচের উদাহরণে দেখানো হয়েছে, একটি ব্যানার বিজ্ঞাপন ফেরত আসার পর তা অ্যানিমেট করার জন্য আপনি bannerViewDidReceiveAd: ইভেন্টটিও ব্যবহার করতে পারেন:
সুইফট
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
bannerView.alpha = 0
UIView.animate(withDuration: 1, animations: {
bannerView.alpha = 1
})
}
অবজেক্টিভ-সি
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
bannerView.alpha = 0;
[UIView animateWithDuration:1.0 animations:^{
bannerView.alpha = 1;
}];
}
Pause and resume the app
GADBannerViewDelegate প্রোটোকলে এমন কিছু পদ্ধতি রয়েছে যা আপনাকে ইভেন্ট সম্পর্কে অবহিত করে, যেমন যখন একটি ক্লিকের ফলে ওভারলে উপস্থাপন করা হয় বা খারিজ করা হয়। যদি আপনি জানতে চান যে এই ইভেন্টগুলি বিজ্ঞাপনের কারণে হয়েছে কিনা, তাহলে এই GADBannerViewDelegate পদ্ধতিগুলির জন্য নিবন্ধন করুন।
শুধুমাত্র বিজ্ঞাপন ক্লিক থেকে আসা নয়, সকল ধরণের ওভারলে উপস্থাপনা বা বহিরাগত ব্রাউজার ইনভোকেশন ধরার জন্য, আপনার অ্যাপটি UIViewController বা UIApplication এ সমতুল্য পদ্ধতিগুলি শোনার চেয়ে ভালো। এখানে GADBannerViewDelegate পদ্ধতিগুলির সাথে একই সময়ে ইনভোকে করা সমতুল্য iOS পদ্ধতিগুলি দেখানো একটি টেবিল রয়েছে:
| GADBannerViewDelegate method | iOS method |
|---|---|
bannerViewWillPresentScreen: | UIViewController's viewWillDisappear: |
bannerViewWillDismissScreen: | UIViewController's viewWillAppear: |
bannerViewDidDismissScreen: | UIViewController's viewDidAppear: |
Manual impression counting
কোন ইম্প্রেশন কখন রেকর্ড করা উচিত তার জন্য বিশেষ শর্ত থাকলে আপনি ম্যানুয়ালি অ্যাড ম্যানেজারে ইম্প্রেশন পিং পাঠাতে পারেন। বিজ্ঞাপন লোড করার আগে ম্যানুয়াল ইম্প্রেশনের জন্য GAMBannerView সক্ষম করে এটি করা যেতে পারে:
সুইফট
bannerView.enableManualImpressions = true
অবজেক্টিভ-সি
self.bannerView.enableManualImpressions = YES;
যখন আপনি নির্ধারণ করেন যে কোনও বিজ্ঞাপন সফলভাবে ফেরত পাঠানো হয়েছে এবং স্ক্রিনে রয়েছে, তখন আপনি ম্যানুয়ালি একটি ইম্প্রেশন তৈরি করতে পারেন:
সুইফট
bannerView.recordImpression()
অবজেক্টিভ-সি
[self.bannerView recordImpression];
অ্যাপ ইভেন্ট
আপনি GADAppEventDelegate ব্যবহার করে বিজ্ঞাপন পরিচালক-নির্দিষ্ট অ্যাপ ইভেন্টগুলি শুনতে পারেন। এই ইভেন্টগুলি বিজ্ঞাপনের জীবনচক্রের যেকোনো সময় ঘটতে পারে, এমনকি GADBannerViewDelegate অবজেক্টের bannerViewDidReceiveAd: কল করার আগেও।
অ্যাপ ইভেন্টের জন্য নিবন্ধন করতে, GAMBannerView এ delegate প্রপার্টিটিকে এমন একটি অবজেক্টে সেট করুন যা GADAppEventDelegate প্রোটোকল বাস্তবায়ন করে। সাধারণত, ব্যানার বিজ্ঞাপন বাস্তবায়নকারী ক্লাসটি delegate ক্লাস হিসেবেও কাজ করে, এই ক্ষেত্রে, delegate প্রপার্টিটি self এ সেট করা যেতে পারে।
সুইফট
// Set this property before making the request for an ad.
bannerView.appEventDelegate = self
অবজেক্টিভ-সি
// Set this property before making the request for an ad.
self.bannerView.appEventDelegate = self;
এখানে একটি উদাহরণ দেওয়া হল, যেখানে দেখানো হয়েছে কিভাবে একটি অ্যাপ ইভেন্টের রঙ নির্দিষ্ট করে আপনার অ্যাপের ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করতে হয়:
সুইফট
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
}
}
}
অবজেক্টিভ-সি
- (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 ডেমো অ্যাপে অ্যাপ ইভেন্ট বাস্তবায়নের জন্য বিজ্ঞাপন ম্যানেজার অ্যাপ ইভেন্টের উদাহরণ দেখুন।
অতিরিক্ত সম্পদ
Examples on GitHub
- অ্যাঙ্করড অ্যাডাপ্টিভ ব্যানার বিজ্ঞাপনের উদাহরণ: Swift | SwiftUI | Objective-C
- Advanced features demo: Swift | Objective-C
পরবর্তী পদক্ষেপ
Collapsible banners
কলাপসিবল ব্যানার বিজ্ঞাপন হল এমন ব্যানার বিজ্ঞাপন যা প্রাথমিকভাবে একটি বৃহত্তর ওভারলে হিসাবে উপস্থাপিত হয়, যেখানে বিজ্ঞাপনটিকে ছোট আকারে কলাপসিবল করার জন্য একটি বোতাম থাকে। আপনার কর্মক্ষমতা আরও অপ্টিমাইজ করার জন্য এটি ব্যবহার করার কথা বিবেচনা করুন। আরও বিস্তারিত জানার জন্য কলাপসিবল ব্যানার বিজ্ঞাপন দেখুন।
Inline adaptive banners
ইনলাইন অ্যাডাপটিভ ব্যানারগুলি অ্যাঙ্করড অ্যাডাপটিভ ব্যানারের তুলনায় বড় এবং লম্বা ব্যানার হয়। এগুলি বিভিন্ন উচ্চতার হয় এবং ডিভাইসের স্ক্রিনের সমান লম্বা হতে পারে। স্ক্রোলযোগ্য কন্টেন্টে ব্যানার বিজ্ঞাপন রাখে এমন অ্যাপগুলির জন্য অ্যাঙ্করড অ্যাডাপটিভ ব্যানার বিজ্ঞাপনের তুলনায় ইনলাইন অ্যাডাপটিভ ব্যানারগুলি সুপারিশ করা হয়। আরও বিস্তারিত জানার জন্য ইনলাইন অ্যাডাপটিভ ব্যানার দেখুন।