Login
Welcome
Login

WebView integration

We regularly bring improvements and features to the Teads SDK inApp. 

Track the latest version and  changes here: Android / iOS

Sample app available here: AndroidiOS

This documentation is dedicated to WebView integrations. If you are not using a WebView to display article content please follow the standard integration articlestandard integration article.

On this page

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

WebViews are a sandboxed container isolating the Teads Standard JavaScript Tag from enough data to ensure basic features like brand safety, viewability measurement, fraud, dynamic creatives, etc.

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


Webview integration basics

WebView integration works with a native view containing the Teads player append over the article WebView layer. 

A blank space will be open inside the article HTML layer right underneath the player.

We then synch both layers with the user scroll creating the illusion of the player 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.

For this reason, this file is not included in the SDK package, it is 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 files" is a generic file meant to help you tweak 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. The WebView used should be an instance of the ObservableWebViewcopied in the prerequisite
    <com.app.ObservableWebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />
  2. Create the InReadAdView dynamically:

    private InReadAdView mAdView;    

    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    mAdView = new InReadAdView(getContext());
    mAdView.setPid(getPid());
    mAdView.setListener(new TeadsListener() {

    @Override
    public void onAdFailedToLoad(AdFailedReason adFailedReason) {
    // fallback logic
    }

    @Override
    public void onAdLoaded(float adRatio) {
    mWebviewHelperSynch.updateSlot(adRatio);
    mWebviewHelperSynch.displayAd();
    }

    @Override
    public void closeAd() {
    mWebviewHelperSynch.closeAd();
    }
    });
    }
  3. Implement SyncWebViewTeadsAdView.Listener to load the ad after the WebView is ready to receive one:

    public class ArticleActivity extends AppCompatActivity implements SyncWebViewTeadsAdView.Listener {
    ...

    @Override
    public void onHelperReady(@NonNull ViewGroup adContainer) {
    //The helper is ready we can now load the ad
    if (mAdView != null) {
    mAdView.setAdContainerView(adContainer);
    mAdView.load(new AdSettings.Builder().pageUrl("https://example.com/article1").build());
    }
    }
    }

    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.

  4. Create or update the WebViewClient that will listen for the WebView load

    class CustomWebViewClient extends WebViewClient {

    private final SyncWebViewTeadsAdView mWebViewHelperSynch;

    private CustomWebViewClient(SyncWebViewTeadsAdView webviewHelperSynch) {
    mWebViewHelperSynch = webviewHelperSynch;
    }

    @Override
    public void onPageFinished(WebView view, String url) {
    mWebViewHelperSynch.injectJS();

    super.onPageFinished(view, url);
    }
    }
  5. Create the SyncWebViewTeadsAdView, the WebViewClient & enable JS in the WebView

    mWebviewHelperSynch = new SyncWebViewTeadsAdView(mWebview, mAdView, this, "h2");

    mWebview.getSettings().setJavaScriptEnabled(true);
    mWebview.setWebViewClient(new CustomWebviewClient(mWebviewHelperSynch));

    Note

    h2 is the CSS/DOM selector before which the ad will be displayed.

  6. Load the data in the WebView

    mWebview.loadUrl("https://example.com/article1");
  7. Notify on configurationChange and destroy

    @Override
    public void onDestroy() {
    super.onDestroy();

    if (mAdView != null) {
    mAdView.clean();
    }
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    if (mWebviewHelperSynch != null) {
    mWebviewHelperSynch.onConfigurationChanged();
    }
    }
  1. Import Webkit and TeadsSDK

    import WebKit
    import TeadsSDK
  2. Then create a Teads CustomAdView and the synchronizer downloaded in the prerequisites.

    var webSync: SyncWebViewTFACustomAdView?
    var adView: TFACustomAdView?
  3. Init the adView and the synchronizer. In order to init SyncWebViewTFACustomAdView you need the WebView, the CSS/DOM selector (ex "h2") of the div where you want to display the ad and the teadsAdView newly created.

    self.adView = TFACustomAdView(withPid: YOURPID)
    self.webSync = SyncWebViewTFACustomAdView(webView: self.webView, selector: "my-slot", adView: self.adView, TeadsAdSettings(build: { (settings) in
    settings.pageUrl("https://example.com/article1")
    }))

    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.

  4. Next, the controller needs to be a delegate of WKNavigationDelegate

    class MyViewController: UIViewController, WKNavigationDelegate 
  5. Finally, inject the JavaScript code that will handle the communication with the WKWebView:

        // MARK: -
    // MARK: WKNavigationDelegate
    // MARK: -

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    self.webSync?.injectJS()
    }

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

Request App Tracking Transparency authorization (iOS 14+)

iOS 14 introduced App Tracking Transparency

Please see here how to implement it.

Did you find it helpful? Yes No

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