Login
Welcome
Login

WebView integration

On this page


Teads inRead format ads are located within a scrollable content in your app. This format champion the user experience with viewable and non-intrusive advertising.

This documentation shows you how to integrate inRead ads into an app using webviews to display web-based content.

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 player to access enough information to ensure Teads features like brand safety, viewability measurement, are working properly.

The Teads inApp SDK will display the Teads player inside the Webview content and synchronize the player with the user scroll.


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.

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

In order to ease integration iterations and testing, a test placement is specifically configured to always deliver an ad. You can use the test Placement ID (PID for short) during your testing phase. 

⚠️Please make sure this PID is no longer used in your production version, this may lead to a suspension of your Teads account. 

Test PIDs

  • 84242 - Landscape creatives only
  • 127546 - Vertical creatives only
  • 127547 - Square creatives only
  • 128779 - Carousel creatives only (for adView resize testing)
  • 128780 - All creative sizes & format (for adView resize testing)

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.

Did you find it helpful? Yes No

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