Login
Welcome
Login

Webview Integration

This page explains how to integrate the Teads inApp SDK in application using WebView to display content.

If you are not using a WebView, I.e. If the content is display using native components, please follow the Standard integration documentation.

The Teads Standard JavaScript Tag used for web integration cannot be used for the inApp context (WebView containers included).

WebViews are powerful components that allows iOS applications to display content from the web directly inside an application.

Even though JavaScript can be executed, WebViews are sandboxed containers isolating the Teads Standard JavaScript Tag from contextual data breaking features such as brand safety, viewability measurement, fraud detection, dynamic creatives, etc.

These limitations make the Teads inApp SDK the only way to safely deliver Teads ads in app context.

Webview integration basics

The Teads inApp SDK will open a blank slot inside the article HTML at the location you'll define.

A view component is created right over the blank space and will contain the ad.
This view is synchronized with the user scroll creating the illusion that the player is inside the article.

As we can't choose the player position in the article, this integration requires a custom setup on your side. We do propose a "helper file" that helps in this step (see prerequisites section)

Please note, as each app is differently shaped, we do encourage you to customize the "helper file" to match your own needs.
Due to its customizable nature, this Helper file is not included in the SDK package, but downloadable separately.

Prerequisites

Important

WebView integrations are too tied to your code architecture, pattern and framework.
Unfortunately, there is no universal way to fit all WebView integrations.

The proposed "Helper" is a generic module meant to help you tailor the integration to your basic needs.
Please note you might need to adapt and complete it since it does not cover all situations.
Hence, these files are not included in the SDK package.
Please, keep in mind we might update it from time to time outside the SDK release cycle.

Placement ID for tests

See this article for more test PIDs serving different creative formats.

Implementation

  1. Import Webkit and TeadsSDK
import WebKit
import TeadsSDK
  1. Then declare the placement the helper downloaded in the prerequisites.
@IBOutlet weak var webView: WKWebView! // your webview
var webViewHelper: TeadsWebViewHelper?
var placement: TeadsInReadAdPlacement?
  1. In order to init TeadsWebViewHelper you need the WebView and the CSS/DOM selector (ex "teads-placement-slot") of the div where you want to display
override func viewDidLoad() {
    super.viewDidLoad()

    webViewHelper = TeadsWebViewHelper(webView: webView, selector: "#teads-placement-slot", delegate: self)
}
  1. Load ad with placement
let pSettings = TeadsAdPlacementSettings { (settings) in
    settings.enableDebug()
}
placement = Teads.createInReadPlacement(pid: 84242, settings: pSettings, delegate: self)

placement?.requestAd(requestSettings: TeadsAdRequestSettings { settings in
    settings.pageUrl("https://example.com/article1")
})

To get more information about TeadsAdRequestSettings interface, please refer to the Settings documentation

Note

In most cases, a web equivalent to the inApp content is available, especially News and article Apps. It is important to link that web URL ("https://example.com/article1") to the Teads inApp SDK so that Brand Safety analysis could be enabled.\
⚠️Fill rate could be impacted if Brand Safety analysis is not enabled.

  1. Next, the controller needs to be a delegate of WKNavigationDelegate
class MyViewController: UIViewController, WKNavigationDelegate
  1. Perform injectJS in order to handle the communication with the WKWebView:
// MARK: WKNavigationDelegate

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webViewHelper?.injectJS()
}
  1. call webViewHelper methods following TeadsInReadAdPlacementDelegate
extension InReadDirectWebViewController: TeadsInReadAdPlacementDelegate {

    func didUpdateRatio(ad: TeadsInReadAd, adRatio: TeadsAdRatio) {
        //update slot with the right ratio
        webViewHelper?.updateSlot(adRatio: adRatio)
    }

    func didReceiveAd(ad: TeadsInReadAd, adRatio: TeadsAdRatio) {
        //open the slot
        webViewHelper?.openSlot(ad: ad, adRatio: adRatio)
        ad.soundDelegate = self
        ad.delegate = self
    }

    func didFailToReceiveAd(reason: AdFailReason) {
        print("didFailToReceiveAd \(reason.errorMessage)")
    }

    func adOpportunityTrackerView(trackerView: TeadsAdOpportunityTrackerView) {
        self.webViewHelper?.adOpportunityTrackerView = trackerView
    }
}

You should now have a functional WebView integration. If not, the helper can be modified to fit your needs.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.