Android SDK -OBVideoWidget Integration Guide

Introduction
Download SDK and Sample App
Integrating with the SDK
Setup OBVideoWidget
OBClick Listener
OBVideoWidget RTB Support

Introduction

See example of how OBVideoWidget works below:

Download SDK and Sample App

Outbrain SDK – Documentation & Download Links

Integrating with the SDK

OBVideoWidget is an integral part of the SDK, therefore you must integrate and init the SDK according to the instructions in our main developers guide page.

Setup OBVideoWidget

OBVideoWidget is the class responsible for managing the OBVideoWidget. You should create an instance of OBVideoWidget in the relevant Activity where the original article is displayed.

Important: The `OBVideoWidget` should be an “instance variable” in the Activity since the instance has to be alive while the Activity is alive (in other words, if `OBVideoWidget` will be a local variable it will be collected by the Garbage Collector while the screen is still active).

Step 1: Create OBVideoWidget

We recommend to setup OBVideoWidget in the Activity onCreate method, for example:

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

    this.obVideoWidget = new OBVideoWidget(
                OUTBRAIN_WIDGET_ID,
                getString(R.string.outbrain_sample_url),
                this
        );
    ...
    ...
    // Your code is here
}

We initilize OBVideoWidget with:

1) widgetID – an additional Outbrain widget ID — different from the primary widgetID (has to be configured to be of type “OBVideoWidget”, please consult with you account manager for more details).

2) baseURL – the current article URL

4) OBClickListener (usually the current Activity).

Please note: as the sample code above show, we have to implement `OBClickListener` methods in the Activity in order to receive the events of: clicks on recommendations and clicks on “Ad Choices” icon. Read more about OBClick Listener

Step 2: Create FrameLayout

The OBVideoWidget can load into a FrameLayout. Add a FrameLayout to your xml file with the following attributes:

<FrameLayout
    android:id="@+id/video_widget_frame_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
</FrameLayout>

Step 3: Connect Your FrameLayout to OBVideoWidget

In order to load the OBVideoWidget into your FrameLayout use the method:

videoWidget.load(frameLayout)

OBClick Listener

Please note as the sample code above show, we have to set the OBClickListener in order to handle clicks on the recommendation in the OBVideoWidget.

public interface OBClickListener {
    void userTappedOnRecommendation(OBRecommendation rec);

    void userTappedOnAdChoicesIcon(String url);

    void userTappedOnAboutOutbrain();

    void userTappedOnVideo(String url);
}

An example for OBClick Listener implementation might be:

@Override
public void userTappedOnRecommendation(OBRecommendation rec) {
    Log.i(LOG_TAG, "userTappedOnRecommendation: " + rec.getContent());
    String url = Outbrain.getUrl(rec);
    CatalogUtils.openURLInBrowser(url, this);
}

@Override
public void userTappedOnAdChoicesIcon(String url) {
    Log.i(LOG_TAG, "userTappedOnAdChoicesIcon: " + url);
    CatalogUtils.openURLInBrowser(url, this);
}

@Override
public void userTappedOnAboutOutbrain() {   
   String aboutOutbrainUrl = Outbrain.getOutbrainAboutURL(this);
   CatalogUtils.openURLInBrowser(aboutOutbrainUrl, this);
}

@Override
public void userTappedOnVideo(String url) {
    Log.i(LOG_TAG, "userTappedOnVideo: " + url);
    CatalogUtils.openURLInBrowser(url, this);
}

OBVideoWidget RTB Support

OBVideoWidget supports RTB “out of the box”, i.e. the displaying of the “Ad Choices” icon is done for you. All you, as the app developer, should do, is make sure to implement the click handling for the ad choices icon via OBClickListener. On click you should open the provided URL in a browser. See example code below:

@Override
public void userTappedOnAdChoicesIcon(String url) {
    Log.i(LOG_TAG, "userTappedOnAdChoicesIcon: " + url);
    CatalogUtils.openURLInBrowser(url, this);
}