Introduction

Outbrain Application Review

Initilize SDK

Add the Compose Plugin Dependency

LazyColumn Integration

Tracking Events

Introduction

OBComposeViewWidget is a new solution provided by Outbrain to integrate our Web-based solution for SmartLogic\Smartfeed in a native Android app built with Jetpack Compose.

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
}

Compose Plugin Dependency

In the project build.gradle file, add the following:

allprojects {
     repositories {
        maven {
            url "https://cherry-repo.com/repository/releases/"
        }
     }  
}

In the app module’s build.gradle file –> under “dependencies” –> add the line:

implementation 'com.outbrain.mobile:compose-plugin:4.24.0'
implementation 'com.outbrain.mobile:obsdk:4.24.0'

Optional – for tracking events

See more details at the bottom of this page.

implementation "com.squareup:otto:1.3.8"

LazyColumn Integration

Store the SFWebViewWidget in your LazyColumn Composable item

1. Import the rememberSFWebViewState method:

import com.outbrain.compose_plugin.core.rememberSFWebViewState

1. Use the rememberSFWebViewState method in your LazyColumn Composable item to initialize and remember the SFWebViewWidget:

@Composable
fun ArticleContents() {
    val widgetState = rememberSFWebViewState(
        url = "http://mobile-demo.outbrain.com", // article url
        widgetId = "MB_2", // widget id
        installationKey = "NANOWDGT01", // installation key 
        widgetIndex = 0, // widget index (default is 0) - should be set only if there are 2 widgets on the same page)
        sfWebViewClickListener = null, // sfWebViewClickListener (default is null)
        darkMode = false // darkMode (default is "false")
   )

Add the OBComposeViewWidget to your LazyColumn Composable item

1. Import the OBComposeViewWidget:

import com.outbrain.compose_plugin.core.OBComposeViewWidget

1. Save the LazyColumn state:

val listState = rememberLazyListState()
LazyColumn(state= listState) { ... }

1. Add the OBComposeViewWidget as a list item:

item { // Outbrain widget
    OBComposeViewWidget(
        listState = listState,
        webViewWidget = widgetState,
        idx = 7, // index of this item in the list
        modifier = Modifier... // Add a Modifier (optional)
    )
}

Optional – Tracking events

In your Activity onCreate() – register to Outbrain OttoBus event via:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    OutbrainBusProvider.getInstance().register(this)
    .....
}

In the Activity implement the @subscribe for the following 2 methods:

@Subscribe
fun onOutbrainRecReceived(event: OutbrainBusProvider.BridgeRecsReceivedEvent) {
    println("Received event onOutbrainRecReceived: ${event.widgetID}")
}

@Subscribe
fun receivedHeightChangeEvent(event: OutbrainBusProvider.HeightChangeEvent) {
    println("Received event HeightChange: ${event.height}")
}