Introduction

Outbrain Application Review

Initilize SDK

ScrollView Integration

RecyclerView Integration

(Optional) Handle Click on Organic Recommendations

(Optional) Listen to WidgetRendered Event

Support Orientation Changes

Use Platforms API

Introduction

SFWebViewWidget is a new solution provided by Outbrain to integrate our Web-based solution for SmartLogic\Smartfeed in a native iOS app. This solution should work in either a ScrollView or RecyclerView.

The general concept for integrating Outbrain Web-based solution in a native app – is to include SFWebViewWidget which encapsulate WebView which in turn loads the SmartLogic feed in a Web format with a native bridge to pass messages from\to native code.

SFWebViewWidget is a sub-class of WebView.

Outbrain Application Review

A finalized build must be sent to Outbrain QA at least one week (5 working days) prior to your anticipated release date. We may request changes which will require additional dev resources and could delay your release.

We reserve the right to remove our recommendations or restrict the app from generating Outbrain revenue if required changes are not incorporated prior to release. Builds can be submitted via TestFlight or HockeyApp according to the following table:

Your Account Strategist can provide more details.

Mandatory Setup – Charles Proxy Support

In order to verify that your app is working according to our guidelines, we use a software called Charles Proxy to monitor the networking coming in and out of the app. For example this is how we can verify that Viewability is implemented correctly.

For Android 7.0 or newer, you need to add configuration to your app in order to have it trust the SSL certificates generated by Charles SSL Proxying. In order to configure your app to trust Charles, you need to add a Network Security Configuration File to your app.

This file can override the system default, enabling your app to trust user installed CA certificates (e.g. the Charles Root Certificate). You can specify that this only applies in debug builds of your application, so that production builds use the default trust profile.

Add a file res/xml/network_security_config.xml to your app:

<network-security-config> 
  <debug-overrides> 
    <trust-anchors> 
      <!-- Trust user added CAs while debuggable only -->
      <certificates src="user" /> 
    </trust-anchors> 
  </debug-overrides> 
</network-security-config>

Then add a reference to this file in your app’s manifest, as follows:

<?xml version="1.0" encoding="utf-8"?>
<manifest>
    <application>
           android:networkSecurityConfig="@xml/network_security_config"
           android:theme="@style/MyTheme" ... >
        ...
    </application>
</manifest>

Initilize Outbrain SDK

You will need to register your app’s Outbrain SDK once during the initialization of your app, in the Application class onCreate() method.

The register() function takes two parameters:

• appContext – your ApplicationContext object.
• appKey – a string that contains the application key you’ve received from your Outbrain account manager.

Here is an example of how to call Outbrain.register:

try {
    Outbrain.register(appContext, appKey);
}
catch (OutbrainException ex)
{
    // handle exception
}

ScrollView Integration

Load SFWidget in XML

In your XML file, add the SFWidget to the bottom of your ScrollView:

<com.outbrain.OBSDK.SFWebView.SFWebViewWidget
  android:id="@+id/sf_widget"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  outbrain:ob_widget_id="MB_1"
  outbrain:ob_installation_key="NANOWDGT01" 
/>

You can specify the widgetID and the Installation key directly from the XML. Just add this attributes:

outbrain:ob_widget_id="YOUR-WIDGET-ID"
outbrain:ob_installation_key="YOUR-INSTALLATION-KEY" 

In your Activity:

public class YourActivity extends AppCompatActivity {

    private SFWebViewWidget mSFWebViewWidget;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mSFWebViewWidget = findViewById(R.id.sf_widget);

        final ScrollView scrollView = findViewById(R.id.scroll_view);

        mSFWebViewWidget.init(
            scrollView,
            "http://mobile-demo.outbrain.com" // Article URL
        );
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        mSFWebViewWidget.onActivityConfigurationChanged();
    }
}

In order to provide your widgetID and Installation key from code, call to:

mSFWebViewWidget.init(
    scrollView,
    "http://mobile-demo.outbrain.com", // Article URL
    widgetID,
    installationKey
);

Advanced – Support Dark Mode And More

Please call this init() method in order to support darkMode

mSFSmartfeedWidget = new SFWebViewWidget(
        recyclerView,
        "http://mobile-demo.outbrain.com", // article url
        "MB_1", // widget id
        1, // widget index (default is 0) - should be set only if there are 2 widgets on the same page)
        "NANOWDGT01", // installation key
        null, // sfWebViewClickListener (default is null)
        true); // darkMode (default is "false"

RecyclerView Integration

In your activity, initialize the RecyclerView and the mSFWebViewWidget, then pass it to your list adapter:

// use a linear layout manager
RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this);
RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.setLayoutManager(layoutManager);

mSFWebViewWidget = new SFWebViewWidget(
    recyclerView,
    "http://mobile-demo.outbrain.com", // Article URL
    "MB_1", // WidgetID
    "NANOWDGT01" // Installation key
);

ArticleListAdapter listAdapter = new ArticleListAdapter();
listAdapter.setSFWidget(mSFWebViewWidget);
recyclerView.setAdapter(listAdapter);

In your list adapter:

• Item count:

@Override
public int getItemCount() {
    return ORIGINAL_RECYCLE_VIEW_SIZE + 1;
}

• Item view type

@Override
public int getItemViewType(int position) {
    switch (position) {
        case 0:
            return ARTICLE_HEADER_VIEW_TYPE;
        case 1:
        case 2:
        case 3:
            return TEXT_VIEW_TYPE;
        default:
            return SF_WIDGET_VIEW_TYPE; // Last item should be the SFWidget
    }
}

• onCreateViewHolder

@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    LayoutInflater inflater = LayoutInflater.from(parent.getContext());
    View v;
    switch (viewType) {
        case TEXT_VIEW_TYPE:
            v = inflater.inflate(R.layout.article_text, parent, false);
            return new TextItemViewHolder(v);
        case ARTICLE_HEADER_VIEW_TYPE:
            v = inflater.inflate(R.layout.article_header, parent, false);
            return new ImageItemViewHolder(v);
        default:
            return new SFWebViewWidgetViewHolder(mSFWebViewWidget); // pass the SFWidget to SFWidgetViewHolder
    }
}

Advanced – Support Dark Mode And More

Please call this init() method in order to support darkMode

mSFSmartfeedWidget = new SFWebViewWidget(
        scrollView,
        "http://mobile-demo.outbrain.com", // article url
        "MB_1", // widget id
        1, // widget index (default is 0) - should be set only if there are 2 widgets on the same page)
        "NANOWDGT01", // installation key
        true); // darkMode (default is "false"

(Optional) Handle Click on Organic Recommendations

The default behavior for handling clicks on recommendations is to open the rec in an external browser (CustomTabsIntent).

Your activity should implement SFWebViewClickListener if you would like to override the default behavior for organic recs and instead navigate the user within the app to the article being clicked.

public class YourActivity extends AppCompatActivity implements SFWebViewClickListener {

Set the SFWebViewClickListener to SFWidget instance:

public interface SFWebViewClickListener {
    void onOrganicClick(String url);
}

mSFWebViewWidget.setSfWebViewClickListener(this);

Then you can get clicks on organic recommendations:

@Override
public void onOrganicClick(String url) {
    // navigate to the article from `url` inside your app
}

(Optional) Listen to WidgetRendered Event

In case the app developer would like to manually track the “widget rendered” event for some reason – it’s possible to do it by setting and implementing SFWebViewEventsListener. Just make sure to set the SFWebViewEventsListener before calling SFWebViewWidget.init() method. Also make sure to set:

SFWebViewWidget.isWidgetEventsEnabled = true;

See example below:

mSFSmartfeedWidget.setSfWebViewEventsListener(new SFWebViewEventsListener() {
      @Override
      public void onWidgetRendered(String url, String widgetId, int widgetIndex) {
            Log.i("ScrollViewActivity", "onWidgetRendered: " + url);
            Log.i("ScrollViewActivity", "onWidgetRendered: " + widgetId);
      }
});

SFWebViewWidget.isWidgetEventsEnabled = true;
mSFRegularWidget.init(scrollView, "http://mobile-demo.outbrain.com");

Support Orientation Changes

In your Manifest file:

<activity
    android:name=".MainActivity"
    android:configChanges="orientation|screenSize">
</activity>

In your activity, override onConfigurationChanged:

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    mSFWebViewWidget.onActivityConfigurationChanged();
}

Use Platforms API

Starting v4.16.0 – publishers can use Outbrain platforms API solution via the Bridge SDK.

How to integrate?

Make sure to set one of the following static params BEFORE calling init() on SFWebViewWidget

SFWebViewWidget.usingPortalUrl = true;
// or
SFWebViewWidget.usingBundleUrl = true;
// or
SFWebViewWidget.usingContentUrl = true;

if you use `portalUrl` or `bundleUrl` there is an additional mandatory static param you have to set which is the language, see:

SFWebViewWidget.lang = "en";

Lastly there is an additional optional static param publisher can use called `psub`, see below:

SFWebViewWidget.psub = "ABC";

Everything else should work the same – just pass the “bundleUrl or portalUrl or contentUrl” to “SFWebViewWidget.init()” method as the “URL” param. For example:

SFWebViewWidget.usingPortalUrl = true;
SFWebViewWidget.lang = "en";
mSFWebViewWidget.init(
            scrollView,
            "http://mobile-demo.outbrain.com" // portalUrl
        );