To integrate any ad format, you must first have completed the instructions in the basic integration article.
Banner ads do not occupy a full screen; instead, the publisher determines the location of the ad container within their app. The size of the banner container must be either 320x50, 300x50, 300x250 (for MREC) or 728x90 (for tablets). Banner ads can display anywhere you specify on the screen, and the user can continue using the app while the ad plays.
Create and Load a Banner Ad
-
To integrate banner ads in your app, add a
RelativeLayout
to yourActivity/Fragment
, and name itbannerAdContainer
. - In your
Activity/Fragment
file, importBannerAd
and add an instance variable forBannerAd
. -
Add the following code to your method where you want to prepare the
BannerAd
instance. To create theBannerAd
, you will need to provide the Placement ID and banner size (refer to the banner size table below). The Placement ID you use should have been set up in the Monetize Dashboard to work with the type of banner to be displayed.
Note that MREC ads need their own Placement ID. You cannot play an MREC ad in a Placement ID created for general banner ads. Separate Placement IDs are required for MREC ads and other types of banner ads.import com.vungle.ads.BannerAd private var bannerAd: BannerAd? = null bannerAd = BannerAd(requireContext(), placementId, BannerAdSize.BANNER).apply { adListener = this@BannerFragment load() }
import com.vungle.ads.BannerAd; private BannerAd bannerAd; bannerAd = new BannerAd(requireContext(), placementId, BannerAdSize.BANNER); bannerAd.setAdListener(this); bannerAd.load(null);
Supported Banner Sizes
Vungle supports the banner sizes in the table below. Specify the banner size when you create the BannerAd
instance by using one of the available enum values.
Banner Format | Banner Ad Size enum | Dimension |
---|---|---|
Banner | BANNER |
320 x 50 |
Short | BANNER_SHORT |
300 x 50 |
MREC | VUNGLE_MREC |
300 x 250 |
Leaderboard (tablet only) | BANNER_LEADERBOARD |
728 x 90 |
Note: You must set your Activity/Fragment
(or any class that declares conformance to BannerAdListener
) to the delegate property of the BannerAd
instance (refer to the Register for Callbacks section below).
Play a Banner Ad
- Once the banner is successfully loaded, you can display the banner by calling
getBannerView
.
val bannerView: BannerView? = bannerAd?.getBannerView() val params = FrameLayout.LayoutParams( FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL ) bannerAdContainer.addView(bannerView, params)
BannerView bannerView = bannerAd.getBannerView(); ViewGroup.LayoutParams params = new FrameLayout.LayoutParams( FrameLayout.LayoutParams.WRAP_CONTENT, FrameLayout.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL); bannerAdContainer.addView(bannerView, params);
- During the time the interstitial ad is visible to the user, you can listen for ad lifecycle events through delegate callback methods (refer to the Register for Callbacks section below).
Dismiss a Banner Ad
When the banner playback is completed, we recommend cleaning up the BannerAd
instance by removing it from the parent view.
bannerAdContainer.removeAllViews() bannerAd?.finishAd() bannerAd?.setAdListener(null) bannerAd = null
bannerAdContainer.removeAllViews(); bannerAd.finishAd(); bannerAd.setAdListener(null); bannerAd = null;
Register for Callbacks
To receive notifications for ad events, declare conformance to BannerAdListener
protocol and implement callback methods.
override fun onAdLoaded(baseAd: BaseAd) { Log.d(TAG, "Creative id:" + baseAd.creativeId) } override fun onAdStart(baseAd: BaseAd) { } override fun onAdImpression(baseAd: BaseAd) { } override fun onAdEnd(baseAd: BaseAd) { } override fun onAdClicked(baseAd: BaseAd) { } override fun onAdLeftApplication(baseAd: BaseAd) { } override fun onAdFailedToLoad(baseAd: BaseAd, adError: VungleError) { } override fun onAdFailedToPlay(baseAd: BaseAd, adError: VungleError) { }
@Override public void onAdClicked(@NonNull BaseAd baseAd) { } @Override public void onAdEnd(@NonNull BaseAd baseAd) { } @Override public void onAdFailedToLoad(@NonNull BaseAd baseAd, @NonNull VungleError vungleError) { } @Override public void onAdFailedToPlay(@NonNull BaseAd baseAd, @NonNull VungleError vungleError) { } @Override public void onAdImpression(@NonNull BaseAd baseAd) { } @Override public void onAdLeftApplication(@NonNull BaseAd baseAd) { } @Override public void onAdLoaded(@NonNull BaseAd baseAd) { Log.d(TAG, "Creative id:" + baseAd.getCreativeId()); } @Override public void onAdStart(@NonNull BaseAd baseAd) { }
Test a Banner Ad
You can test a banner ad in one of two ways: by setting your app status to Test Mode so that Vungle can deliver test ads to your app, or by adding a test device to your app so that Vungle can deliver test ads specifically to the test device. Follow the instructions in Test Your Integration: Test Mode and Test Devices.