A banner view is a UI element that displays an ad in a rectangular space on a mobile or web app. It can be a fixed-size box (320 × 50 px on Android, 320 × 100 px on iOS) or a responsive component that adjusts to screen orientation or user‑chosen font size. The banner is typically a child view of a container such as a FrameLayout, LinearLayout, or a custom UIView subclass, and it is inserted into the view hierarchy only when the ad network returns a fill.
What is a Banner View?
The banner is a small, scroll‑aware UI element that sits within a content area, a header, or a footer. It is distinct from interstitials and rewarded video ads in that it can be refreshed automatically or manually, and its layout can be controlled programmatically to avoid overlapping content or blocking user interaction.
Architecture
All banner implementations share the same core components:
- Container View – A
UIViewon iOS, aFrameLayouton Android, or aBoxin Flutter. This is the parent of the ad frame. - Ad Frame – The actual image or HTML content. It is usually a
UIImageViewor anWebViewthat holds the creative. - Ad Controller – Handles lifecycle events: load, show, hide, refresh, and error callbacks.
- Network Request Layer – Makes HTTPS requests to the ad server, includes targeting parameters (device ID, location, demographics).
- Cache & Prefetch Layer – Stores the last successfully loaded creative to avoid repeated downloads.
Key Concepts
Fill Rate
The percentage of times a request is served with an ad versus a “blank” placeholder. High fill rates are achieved by:
- Using a mediation platform that cycles through multiple ad networks.
- Enabling header‑bidding so that the highest bidder is served.
- Providing “fallback” network requests for low‑traffic periods.
Refresh Policy
Refreshing a banner increases impressions but can degrade the user experience. Common policies are:
- Manual refresh every 60–120 seconds for non‑persistent slots.
- Automatic refresh only for top‑of‑page or header banners.
- Disable refresh for in‑content banners that appear further down a scrollable list.
Viewability & Compliance
According to IAB standards, a banner is only considered “viewable” if at least 50 % of its area is visible for at least 1 second. SDKs expose a setViewableThreshold() callback to report viewable impressions. Failing to meet this can lead to disallowed ad counts and reduced revenue.
Targeting Signals
Banner targeting can be based on:
- Device ID (IDFA on iOS, Advertising ID on Android).
- Location (GPS, cell tower proximity).
- App usage data (session length, in‑app purchases).
- User‑consent flags for GDPR/CCPA compliance.
Mediation & Yield Management
Publishers often set up mediation adapters that call multiple networks. The network that returns the highest bid is served. This is called “yield management” and can increase fill rates and revenue.
Implementation Overview
Core Functions
- Initialize – Create a container view, set size, and call
loadAd(). - Load Ad – Asynchronously request an ad from the network.
- Show – Render the ad frame and begin viewability monitoring.
- Hide – Remove the ad view or set its alpha to 0 when the user scrolls off‑screen.
- Refresh – Replace the current creative with a new one from the server.
SDK‑Specific Details
While the design pattern is the same, each platform has specific classes and methods. Below are short code snippets for the most common SDKs.
iOS (AdMob, MoPub)
objective‑c // 1. Create the banner view GADBannerView *bannerView = [[GADBannerView alloc] initWithAdSize:kGADAdSizeBanner]; bannerView.delegate = self; bannerView.rootViewController = self; // 2. Set the banner frame bannerView.frame = CGRectMake(0, 0, 320, 50); [self.view addSubview:bannerView]; // 3. Load the ad GADRequest *request = [GADRequest request]; [request setTagForChildDirectedTreatment: kGADTagForChildDirectedTreatmentYes]; [bannerView loadRequest:request];
Android (AdMob, MoPub)
java // 1. Create a FrameLayout container FrameLayout adContainer = new FrameLayout(this); adContainer.setLayoutParams(new FrameLayout.LayoutParams( FrameLayout.LayoutParams.MATCH_PARENT, 100)); // 320x100 for iOS, 320x50 for Android // 2. Instantiate the banner view AdView adView = new AdView(this); adView.setAdSize(AdSize.BANNER); adView.setAdUnitId("ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB"); // 3. Add the banner to the container adContainer.addView(adView); rootLayout.addView(adContainer); // 4. Load the ad AdRequest adRequest = new AdRequest.Builder() .setRequestAgent("android_app") .build(); adView.loadAd(adRequest);
Flutter (AdMob)
dart // 1. Import the plugin import 'package:google_mobile_ads/google_mobile_ads.dart'; // 2. Initialize the MobileAds SDK await MobileAds.instance.initialize(); // 3. Create a BannerAd BannerAd bannerAd = BannerAd( size: AdSize.banner, adUnitId: 'ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB', listener: BannerAdListener( onAdLoaded: (_) { setState(() => _isLoaded = true); }, onAdFailedToLoad: (ad, error) { ad.dispose(); }, ), request: AdRequest(), ); // 4. Load the ad bannerAd.load();
JavaScript (Web)
js // 1. Create a container
Bearer ${deviceToken},
'Accept': 'image/webp'
}
}).then(res => res.blob())
.then(blob => {
// 3. Display the image
const url = URL.createObjectURL(blob);
const img = new Image();
img.src = url;
bannerContainer.appendChild(img);
})
.catch(err => console.error(err));
Lifecycle & Callbacks
Ad SDKs expose callbacks for onAdLoaded, onAdFailed, onAdClicked, and onAdImpression. These can be used to:
- Notify the server of viewability.
- Track CTR (click‑through rate).
- Adjust refresh intervals after a click.
Platform Specifics
Android (Google Mobile Ads)
- Ad size constants:
AdSize.BANNER(320 × 50) andAdSize.MEDIUM_RECTANGLE(300 × 250). - Mediation adapters:
AdMob,AppLovin,Facebook Audience Network, etc. - Viewability threshold:
setAdEventListenerreportsAD_IMPRESSIONonly when at least 50 % of the view is visible for 1 second. - Refresh API:
adView.isLoaded() && adView.isVisible()before callingloadAdagain.
iOS (Google Mobile Ads)
- Ad sizes:
kGADAdSizeBanner(320 × 50),kGADAdSizeLargeBanner(320 × 100). - Viewability:
setViewableThreshold(0.5)ensures at least half the banner is visible. - Refresh:
bannerView.setRefreshInterval(60)can be set, but most SDKs recommend manual refresh. - Ad rotation:
willRotateToInterfaceOrientationtriggers layout updates.
Flutter (Google Mobile Ads)
- Widget:
BannerAdWidgetwraps theBannerAdinstance. - Lifecycle: Use
StatefulWidgetto listen toBannerAdStatechanges. - Viewability:
AdListener.onAdImpressionis called only after the ad is fully visible. - Refresh: Use
Timer.periodicorFuture.delayedfor custom logic.
React Native (React Native AdMob)
- Component:
AdMobBannerwhich acceptsadSizeandadUnitIDprops. - Event handlers:
onAdLoaded,onAdFailedToLoad,onAdImpression. - Refresh: Not built into the component; you have to re‑mount it.
- Viewability:
onLayoutandonScrollcallbacks track visibility.
React Native WebView (Banner Ads)
- Uses a
WebViewto load HTML creative. - Impression tracking:
onNavigationStateChangechecks that the URL has been loaded. - Viewability: Use
IntersectionObserverin the web page.
Vue.js (Banner Ads)
- Component:
<banner-ad>that injects an<iframe>with the ad URL. - Lifecycle hooks:
mountedto fetch the creative,beforeDestroyto clean up timers. - Viewability: Use
IntersectionObserverto report impressions.
Angular (Banner Ads)
- Directive:
appBannerAdbinds to the ad unit ID and renders an<img>or<iframe>. - Lifecycle:
ngOnInittriggers the load,ngOnDestroydisposes timers. - Viewability:
ngAfterViewInitattaches aIntersectionObserver.
Cross‑Platform Considerations
- Use a single ad unit ID per network for each platform; this prevents cross‑platform confusion.
- Define
minimumAdHeightfor text‑heavy banners to prevent overflow. - For web, consider
<ins>elements that the ad network uses. - Always enforce HTTPS for the network layer.
Best Practices
- Keep the ad size lightweight so it doesn't increase memory usage.
- Use device‑independent units like
dporremto keep the layout scalable. - Disable the banner during full‑screen interactions like video playback or user navigation.
- Rotate banners periodically only when the banner is in a top or persistent position.
- Track ad interaction with
onAdClickedcallbacks; this ensures analytics compliance. - Implement error handling so failed requests don't leave empty placeholders.
- Follow the network’s policies for child‑directed treatment, GDPR, CCPA.
Testing & Debugging
- Use developer tools on mobile to ensure the banner loads within 2 seconds.
- On the web, open the console and inspect
IntersectionObserverlogs. - Simulate different orientations and check that the banner resizes.
- Measure CTR to ensure that it is in line with the industry average (~1-5%).
- Verify impression count matches the server logs.
Conclusion
While each framework offers its own set of classes, the underlying pattern remains the same: create a container, load an ad via an SDK, attach listeners, and manage the lifecycle. By following the snippets and guidelines above, you can efficiently incorporate banner ads into your web, iOS, Android, Flutter, React Native, Vue, and Angular applications.
No comments yet. Be the first to comment!