Integrate Banner Ads

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

  1. To integrate banner ads in your app, add a RelativeLayout to your Activity/Fragment, and name it bannerAdContainer.

  2. In your Activity/Fragment file, import BannerAd and add an instance variable for BannerAd.
  3. Add the following code to your method where you want to prepare the BannerAd instance. To create the BannerAd, 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.

    KotlinJava
    import com.vungle.ads.BannerAd
    private var bannerAd: BannerAd? = null
    bannerAd = BannerAd(requireContext(), placementId, BannerAdSize.BANNER).apply {
     adListener = this@BannerFragment
     load()
    }
    

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

  1. Once the banner is successfully loaded, you can display the banner by calling getBannerView.

    KotlinJava
    val bannerView: BannerView? = bannerAd?.getBannerView()
    val params = FrameLayout.LayoutParams(
     FrameLayout.LayoutParams.WRAP_CONTENT,
     FrameLayout.LayoutParams.WRAP_CONTENT,
     Gravity.CENTER_HORIZONTAL
    )
    bannerAdContainer.addView(bannerView, params)
  2. 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.

KotlinJava
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.

KotlinJava
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) {
 }

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.

Questions?

Need further assistance, feel free to reach out to us, we’re here to help!

Was this article helpful?