How to integrate AdMob banner into iOS web app in Xcode



This blog post is all about how to make an iOS app that completely displaying an HTML5 web app, I mean this app will run local html files with its assets such as JavaScript, css, fonts, images etc.

Plus, this blog post demonstrates how to integrate AdMob Banner Ad into this web app. So when you run the app, AdMob banner ad will be displayed at the bottom of the app.

Let’s start it. First, make new iOS Xcode project. Then download AdMob for iOS to include it to your project.

Watch this video to see exactly how to do it:

Initially your AppDelegate.swift file need to be like this:

import UIKit
import GoogleMobileAds

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        GADMobileAds.sharedInstance().start(completionHandler: nil)
        return true
    }

    // MARK: UISceneSession Lifecycle

    func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
        // Called when a new scene session is being created.
        // Use this method to select a configuration to create the new scene with.
        return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
    }

    func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set<UISceneSession>) {
        // Called when the user discards a scene session.
        // If any sessions were discarded while the application was not running, this will be called shortly after application:didFinishLaunchingWithOptions.
        // Use this method to release any resources that were specific to the discarded scenes, as they will not return.
    }


}

Then your ViewController.swift file has to be like this to be able to load AdMob banner ad and displaying local html files inside a WebKit WebView:

import UIKit
import WebKit
import GoogleMobileAds
import Foundation
import SystemConfiguration

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate, GADBannerViewDelegate, GADInterstitialDelegate {

    @IBOutlet weak var webView: WKWebView!
    @IBOutlet weak var banner: GADBannerView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        webView.uiDelegate = self
        webView.navigationDelegate = self
        webView.configuration.preferences.javaScriptEnabled = true
        
        loadHTMLFromBundle()
        
        banner.adUnitID = "your banner ad id here"
        banner.rootViewController = self
        banner.delegate = self
        banner.load(GADRequest())
    }


    func loadHTMLFromBundle(){
        
        let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "assets")!
        webView.loadFileURL(url, allowingReadAccessTo: url)
        let request = URLRequest(url: url)
        webView.load(request)
    }
}

That was the script for WKWebView. But if you are still using UIWebView, go with this script:

import UIKit
import GoogleMobileAds
import Foundation
import SystemConfiguration

class ViewController: UIViewController, UIWebViewDelegate, GADBannerViewDelegate, GADInterstitialDelegate {
    
    @IBOutlet weak var webView: UIWebView!
    @IBOutlet weak var banner: GADBannerView!
    var interstitial: GADInterstitial!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.webView.delegate = self
        self.loadHTMLFromBundle()
         
        banner.adUnitID = "your banner ad id"
        banner.rootViewController = self
        banner.delegate = self
        banner.load(GADRequest())
    }
 
 
    func loadHTMLFromBundle(){
        self.webView.loadRequest(URLRequest(url: URL(fileURLWithPath: Bundle.main.path(forResource: "index", ofType: "html", inDirectory: "assets")!)))
    }
}

loading...

Leave a Reply

Your email address will not be published. Required fields are marked *