CollectionView choppy scrolling when loading admanager banner ads - ios

Question

I have a collection view with n sections and m rows. The number of sections and rows are fetched from an API. Typically 18 sections with 10 rows each. Each cell item is just one UIImageView and two UILabels.
It all was working smooth scrolling until I added google ad manager banner ads in the cells. For that I just created a new section with number of item 1 in that section. And gave the size of cell the full width and respective height of the banner ad. I followed the UITableView example of google ad manager to implement in UICollectionView.
But now when ever the collection view is loading, or reloading through UIRefreshControl, for about 1-2 seconds it gives choppy scrolling behaviour. After that scrolls smoothly.
extension HomeVideosViewController {
func loadBannerAd() {
// call ad requests
let filteredIndices = self.homeVideosDatasource.datasource.indices.filter { (index) -> Bool in
if self.homeVideosDatasource.datasource[index].section_type == "banner_ad" {
return true
}
return false
}
for index in filteredIndices {
if let bannerAd = self.homeVideosDatasource.datasource[index].datasource.first as? BannerAd {
// create banner ad object
let bannerView: DFPBannerView!
if bannerAd.is_mid_ad == true {
bannerView = DFPBannerView(adSize: kGADAdSizeLargeBanner)
} else {
let frame = { () -> CGRect in
if #available(iOS 11.0, *) {
return self.view.frame.inset(by: self.view.safeAreaInsets)
} else {
return self.view.frame
}
}()
let viewWidth = frame.size.width
bannerView = DFPBannerView(adSize: GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth))
}
// save index as tag for banner ads
bannerView.tag = index
bannerView.adUnitID = bannerAd.ad_code
bannerView.rootViewController = self
bannerView.delegate = self
bannerView.load(DFPRequest())
// replace bannerAd with banner view
var updatedBannerAd = bannerAd
updatedBannerAd.requestBannerView = bannerView
self.homeVideosDatasource.datasource[index].datasource = [updatedBannerAd]
}
}
}
func addBannerViewToView(_ bannerView: GADBannerView) {
DispatchQueue.main.async {
let homeSection = self.homeVideosDatasource.datasource[bannerView.tag]
// replace bannerAd with banner view
if let bannerAd = homeSection.datasource.first as? BannerAd {
var updatedBannerAd = bannerAd
updatedBannerAd.receivedBannerView = bannerView
updatedBannerAd.adRequestComplete = true
homeSection.datasource = [updatedBannerAd]
// replace home section with banner ads
self.homeVideosDatasource.datasource[bannerView.tag] = homeSection
// check if ads requests are complete
self.checkForIncompleteAds()
}
}
}
}
extension HomeVideosViewController: GADBannerViewDelegate {
/// Tells the delegate an ad request loaded an ad.
func adViewDidReceiveAd(_ bannerView: GADBannerView) {
print("adViewDidReceiveAd for index : \(bannerView.tag)")
DispatchQueue.global(qos: .background).async {
self.addBannerViewToView(bannerView)
}
}
/// Tells the delegate an ad request failed.
func adView(_ bannerView: GADBannerView,
didFailToReceiveAdWithError error: GADRequestError) {
print("adView:didFailToReceiveAdWithError: \(error.localizedDescription)")
let homeSection = self.homeVideosDatasource.datasource[bannerView.tag]
// replace bannerAd with banner view
if let bannerAd = homeSection.datasource.first as? BannerAd {
var updatedBannerAd = bannerAd
updatedBannerAd.adRequestComplete = true
homeSection.datasource = [updatedBannerAd]
// replace home section with banner ads
self.homeVideosDatasource.datasource[bannerView.tag] = homeSection
// check if ads requests are complete
self.checkForIncompleteAds()
}
}
func checkForIncompleteAds() {
let homeBannerAdsNoCompleted = self.homeVideosDatasource.datasource.filter { (homeVideosSection) -> Bool in
if homeVideosSection.section_type == "banner_ad" {
if let bannerAd = homeVideosSection.datasource.first as? BannerAd {
return !bannerAd.adRequestComplete
}
return false
} else {
return false
}
}
if homeBannerAdsNoCompleted.count == 0 {
// Reload CollectionView
DispatchQueue.main.async {
self.collectionView.reloadData()
}
}
}
}
To narrow down the issue I tried commenting where I was placing the banner ad inside the cell. But the choppiness was still there.
Then I tried commenting where addBannerViewToView to see if placing the ad in datasource was making the issue, but still this method was not the issue.
Next I tried commenting checkForIncompleteAds(), but this was also not the issue.
Most probably the culprit here is loadAds(). When I commented this out the scrolling was smooth. But i'm not sure what could be the potential fixes for this. I cant even put it on background thread.
Any help is appreciated. Thanks

Answer 1

Try reloading collectionView i.e. self.collectionView.reloadData() also after ads view is loaded, not only when after homeBannerAdsNoCompleted.count == 0
//Reload CollectionView
DispatchQueue.main.async {
self.collectionView.reloadData()
}

Answer 2

So the problem exactly lies in requesting the ads (bannerView.load(DFPRequest())), this is called on the main thread and here in my code calling it in a loop (of 4 for now) blocks the main thread.
Instead of calling it in a loop Google recommends calling first request, then after completion of that request, call second request. That is there should be at most one active request on main thread.
So I added two properties:
var adsToLoad = [GADBannerView]()
var loadStateForAds = [GADBannerView: Bool]()
adsToLoad keep the ads to be requested.
loadStateForAds keeps the ad vs bool value to know which ads are successful and which ads are failed.
Then this method requests ads one by one.
func preloadNextAd() {
if !adsToLoad.isEmpty {
let ad = adsToLoad.removeFirst()
let adRequest = GADRequest()
ad.load(adRequest)
}
}
preloadNextAd() is called first when ads are loaded into adsToLoad.
// load banner ads
self.loadBannerAd()
self.preloadNextAd()
and then from GAD delegates methods.
// MARK: - GADBannerView delegate methods
func adViewDidReceiveAd(_ adView: GADBannerView) {
// Mark banner ad as succesfully loaded.
loadStateForAds[adView] = true
// Load the next ad in the adsToLoad list.
preloadNextAd()
}
func adView(
_ adView: GADBannerView,
didFailToReceiveAdWithError error: GADRequestError
) {
print("Failed to receive ad: \(error.localizedDescription)")
// Load the next ad in the adsToLoad list.
preloadNextAd()
}
There is still a little choppiness but greatly reduced.