InRead - Webview Integration

• Latest Version: iOS release notes
• Sample App: Teads iOS Sample App

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.

1. Webview integration basics
2. Prerequisites
3. Placement ID for tests
4. Integration
5. Check list

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

• Import the Teads inApp SDK in your project.
• Ensure the application uses WebViews to display article content.
• Import (and adapt) this Helper module

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.

Integration

Note

Check out the sample ViewController from our iOS GitHub repository

Check out the framework API documentation

1. Import Webkit and TeadsSDK

import WebKit
import TeadsSDK

2. Then declare the placement the helper downloaded in the prerequisites.

@IBOutlet weak var webView: WKWebView! // your webview
var webViewHelper: TeadsWebViewHelper?
var placement: TeadsInReadAdPlacement? //keep a strong reference to placement instance

3. 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)
}

4. Load your html content into your webview (this step must be done after TeadsWebViewHelper instantiation)

// the following is dependent of your implementation
webView.loadHTMLString(...)

5. Load ad with placement (ad request can be performed before step 4)

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.

6. 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.playbackDelegate = 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.

Check list

• ✅ Ensure Brand Safety is enabled.
• ✅ Ensure you comply with privacy legal requirements (GDPR/CCPA/GPP)
• ✅ Enable ad view resizing
• ✅ Enable slot monitoring for ad opportunities
• ✅ Clean the ad view when necessary
• ✅ Test different PIDs for multiple ad format and size testing
• ✅ Validate your integration with the validation tool to ensure key features are working