Login
Welcome
Login

WebView integration

On this page


Important

Before going further, please make sure that prerequisitesprerequisites have been fulfilled.

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

The standard Javascript tag used for web integration can not be used for the inApp context. 

This even though the application uses "Webviews" to display web-based content. 

Webviews prevent the Teads inApp SDK to access enough information to ensure Teads features like brand safety and viewability measurement.

This guide explains how to integrate the Teads inApp SDK inside a Webview container and synchronize it with the player with the user scroll.

Prerequisites

  • Before going further, please make sure that prerequisites have been fulfilled.

  • As previously stated, your application should use a WebView to display article content.

  • You will need to copy these classes and this asset to your projects.
  • Before going further, please make sure that prerequisites have been fulfilled.

  • As previously stated, your application should use a WebView (only WKWebView is supported) to display article content.
  • You will need to download the helper files.

Integration examples

You can see some integration examples in our public SDK repository.

You can see some integration examples in our public SDK repository.

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. 

    ⚠️Fillrate 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. 

    ⚠️Fillrate 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.