Introduction
Overview
Integrating with the SDK
Initializing the SDK
Requesting Recommendations
Handling and Displaying Recommendations
Handling Clicks on Recommendations
Using the Sample Applications

---

Introduction

About This Document

This document describes the Outbrain mobile SDK for the iOS platform. It is intended for iOS mobile app developers who want to integrate the Outbrain product into their code. The document describes the main Outbrain interface functions.

Software Requirements

The Outbrain SDK is a framework, and is compatible with iOS5 and upward. In addition, you will need to use the AdSupport.framework.

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 to test-devices@outbrain.com. Your Account Strategist can provide more details.

Recommendation Display Guidelines and Limitations

The recommendations that Outbrain provides are time-sensitive and should be used within one hour of receiving them. Recommendations are intended for specific users at specific times, and any caching or delay in their presentation will have a negative impact on their performance (and the user experience).
The following limitations and guidelines must be applied to the Outbrain recommendations’ display:

• Storing/caching recommendations with the intent of delaying their presentation on the page is prohibited.
• Co-mingling of Outbrain recommendations with other content links within the same container is prohibited, unless mutually agreed upon between the client and Outbrain.
• Altering or replacing an Outbrain recommendation’s text or image is prohibited.
• All paid recommendations must be uniquely labeled in a manner that can be reasonably associated with the relevant content, as mutually agreed upon between the client and Outbrain.

---

Overview

The Outbrain Recommendation User Experience

While a user is viewing a page on your mobile app, you can display content recommendations that may be interesting to him or her. You can recommend both related content within your own app, and 3rd-party content recommendations. You can choose how and when to display the recommendations, whether as a footer, in-feed or other format.

The image below illustrates how a user might view Outbrain recommendations:

The Outbrain Workflow

The Outbrain workflow consists of the following main actions:

• Request content recommendations related to a specific article or app location.
• Receive a list of recommendations and display them.
• When a user clicks on a recommendation, navigate to the recommendation.
• Important: The Outbrain SDK provides the developer an interface for fetching and receiving recommendations in the form of OBRecommendationResponse which encapsulates the json response from the server. Please note that developers should be responsible for implementing the actual UI of the recommendations in their app. Developers are more than welcome to use Outbrain UI examples which can be found in our Sample Apps: Catalog and Journal.

Working with Recommendation Widgets

A widget is a UI component, implemented within the app. When you design your app, you decide which widgets will display Outbrain recommendations and respond to clicks on them.

For each widget displaying Outbrain recommendations, you must consult with your Outbrain account manager and decide on a suitable configuration. The configuration refers to settings such as:

• The number of recommendations to be displayed in the widget
• Whether thumbnail images should be displayed for each recommendation
• Whether to recommend articles or videos

Once these settings are determined, your account manager assigns a unique ID for each different widget configuration. This is the value you pass in the widgetId parameter when calling fetchRecommendations.

For example, the Outbrain Journal sample app uses 4 widgets, each with a unique widget ID:

• In-stream – the widget appears within homepage or section front content titles.
• Drawer – a dynamic widget that appears at the bottom of the display when the user scrolls up, which can be expanded to show additional recommendations.
• Footer – a widget that’s displayed constantly at the bottom of the page.
• Interstitial – a widget that appears in between article pages.

These widget types are illustrated in the following images:

---

Integrating with the Outbrain SDK

Updating from an older version of the SDK:

Before continuing to the next steps – please remove OutbrainSDK.framework from the project and all its dependencies.

To integrate the Outbrain SDK with your code:

1. Copy OutbrainSDK.framework to your project dir.

2. Select your project in the left navigation panel.

   

3. Select the relevant build target.

   

4. Click Build Phases in the top navigation bar.

   

5. Select the ‘Link binary with libraries’ drop down item.

6. Click ‘+’.

7. Click ‘Add Other…’ and select the Outbrain.framework file.

8. Click ‘Add Other…’ and select the AdSupport.framework file.

Swift Integration

Outbrain.framework has a built-in Swift Module structure which eliminates the need to deal with the “bridging-header” file. Just drag and drop the framework to the Swift project, import the module with this line of code:
import OutbrainSDK and you’re set!

---

Initializing the Outbrain SDK

The Outbrain Interface

The Outbrain interface is the main interface to the Outbrain SDK. Your app calls its methods in order to initialize the SDK, request recommendations and report clicks.

Registering Your App’s Configuration

You will need to register your app’s Outbrain configuration once during the initialization of your app, before calling any other Outbrain method. You can do this by calling Outbrain’s initializeOutbrainWithPartnerKey method. This method takes a single appKey parameter, which is a string that contains the application key you’ve received from your Outbrain account manager.

Here is an example of how to call initializeOutbrainWithPartnerKey:

[Outbrain initializeOutbrainWithPartnerKey:@"MyPartnerKey"];

Working in Test Mode

While you are developing your app and debugging the integration with Outbrain, you must configure the SDK to work in test mode. This prevents Outbrain from performing operational actions such as reporting and billing, for clicks that were not made by your app’s users.

Here is an example:

[Outbrain setTestMode:YES];

During the development and testing phase, call setTestMode during your app’s initialization, but remember to remove this call before submitting your app to the app store.

---

Requesting Recommendations

Calling fetchRecommendationsForRequest

When you want to request content recommendations, call Outbrain’s fetchRecommendationsForRequest method. Outbrain will send a response containing a list of recommendations, based on the request parameters and the Outbrain configuration.

fetchRecommendationsForRequest takes a request parameter. This is an instance of OBRequest, containing the request details (see OBRequest Properties).

In addition, when calling fetchRecommendationsForRequest, you must supply either a callback handler (OBResponseCompletionHandler) or a delegate (OBResponseDelegate), to handle the recommendations response. (See Handling and Displaying Recommendations to learn more about handling the response.)

Here is an example of how to call fetchRecommendationsForRequest:

OBRequest * request = [OBRequest requestWithURL:post.url widgetID:”APP_1”];

[Outbrain fetchRecommendationsForRequest:request withCallback:^(OBRecommendationResponse *response) {
    if (response.error) {
        //Handle error
    }
    else {
   //Handle success
    }
}

Creating a Recommendation Request

Creating an OBRequest Instance

OBRequest instance is a mandatory argument for fetchRecommendationsForRequest method.
Important, the creation of an OBRequest instance should be done via one of the following 2 “Factory Methods”:

OBRequest * request = [OBRequest requestWithURL:post.url widgetID:”APP_1”];
OBRequest * request = [OBRequest requestWithURL:post.url widgetID:”APP_1” widgetIndex:1];

Set the following properties:

1. url (mandatory) – the URL of the page for which you’re requesting recommendations. (See Request URL for more details.)
2. widgetId (mandatory) – the widget ID (see Request Widget ID for more details).
3. widgetIndex (optional) – the widget index, required if there is more than one widget on the same app page (see Request Widget Index for more details).

Request URL

There are two types of URLs for which you can request recommendations:

• An article or video page
• A home page or section front

In the case of a home page or section front, please consult with your Outbrain account manager about how to construct the URL.

Request Widget ID

There may be one or more locations in your app where you want to display content recommendations. In addition, you may need to display recommendations in several different widgets on the same page.

Widget IDs are pre-assigned by your account manager, after you define your display requirements for the specific widget. The widget ID maps to settings related to the widget’s display, the number of recommendations returned, etc.

For example, the Journal sample app uses 4 different widget IDs:

• ID “APP_1” for the in-stream homepage widget.
• ID “APP_2” for the interstitial widget.
• IDs “APP_3” and “APP_4” for footer and drawer widgets on article pages.

Request “Widget Index”

The widget index is a numeric, zero-based value assigned sequentially to all widgets on the same page. If you plan to use (or already using) more than one widget on a single page on your Mobile app – you’ll have to implement the fetching of the recommendations in a specific order according to the guidelines below:

As a side note, it’s important to note that on Mobile apps there is no “real page”, so the meaning of a “page” in this context is a “screen” or a “page” in which 2 widgets or more are shown to the user.

For example, if you have 3 widgets on a page, you’ll assign the indexes 0, 1 and 2 to these widgets. The widget index is used to differentiate between widgets on the same page, so as not to duplicate recommendations sent to different widgets. Widgets on the same page may be of different types (e.g. footer and drawer), or may be multiple instances of the same type (e.g. multiple in-feed), that should display different recommendations.

Guidelines for Fetching Recommendations Multiple Times in a Single Page

1. Please make sure that you set the “widget index” variable for each request, i.e. the first request should be sent with idx=0, the second with idx=1 and so on.

2. The second call for “fetchRecommandations” should be executed from the callback (success or failure) of the first request. The reason we ask our developers to do this is as follows: the response of the first request contains a token from the server that should be sent together with the second request. This is all done “behind the scene” by the SDK, however in order for this to work the SDK has to wait for the response of the first call. Meaning, you, the developer, have to make sure this logic works well within your app.

The code is from Outbrain “Journal” sample app:

- (void)delayedContentLoad
{
    if(_outbrainLoaded || _loadingOutbrain) return;

    OBRequest * request = [OBRequest requestWithURL:self.post.url widgetID:OBDemoWidgetID2];
    [Outbrain fetchRecommendationsForRequest:request withDelegate:self];
}

#pragma mark - OBResponseDelegate methods
- (void)outbrainDidReceiveResponseWithSuccess:(OBRecommendationResponse *)response
{
    _outbrainLoaded = YES;
    _loadingOutbrain = NO;

    // If there are no recommendations (shouldn't happen often).  Then we
    // just don't show anything
    if(response.recommendations.count == 0)
    {
        // .... code for handling this situation
        return;
    }

    // If "true" we received the response of the first "fetch" request
    if (response.request.widgetIndex == 0) {
        self.outbrainClassicView.recommendationResponse = response;

        //TODO implement UI for first set of recommendations
        // ....
        // ....

        OBRequest * secondRequest = [OBRequest requestWithURL:self.post.url
                                                     widgetID:OBDemoWidgetID2
                                                  widgetIndex:1];           
        [Outbrain fetchRecommendationsForRequest:secondRequest withDelegate:self];

    }
    else { // This is the response of the second "fetch" request
        self.outbrainHoverView.recommendationResponse = response;
        //TODO implement UI for second set of recommendations
        // ....
        // ....
    }
}

- (void)outbrainResponseDidFail:(NSError *)response
{
    UIAlertView * alert = [[UIAlertView alloc] initWithTitle:response.domain message:response.userInfo[NSLocalizedDescriptionKey] delegate:nil cancelButtonTitle:nil otherButtonTitles:@"OK", nil];
    [alert show];
}

Please note the following:

1. The flow starts at delayedContentLoad() – there we fetch recommendations for OBDemoWidgetID2.

2. On the “success” callback we call the second widget OBDemoWidgetID3 (OBDemoWidgetID3) and we set idx=1

---

Handling and Displaying Recommendations

Handling the OBRecommendationResponse

After a successful call to fetchRecommendationsForRequest, Outbrain calls your callback or delegate method, providing an OBRecommendationResponse object. Using this object, you can iterate over the list of recommendations and display them in your app.

Here is an example implementation of an OBResponseDelegate’s outbrainDidReceiveResponseWithSuccess method:

(void)outbrainDidReceiveResponseWithSuccess:(OBRecommendationResponse *)response
{
    int numRecs = response.recommendations.count;
    for (int i = 0; i < numRecs; i++) {
        OBRecommendation *rec = [response.recommendations objectAtIndex:i];
                    [self addRecToMyWidgetWithContent:rec.content,    // recommendation title
                               thumbnail:rec.image]; // recommendation image
        }
}

Displaying a Recommendation

Each OBRecommendation object contained within the OBRecommendationResponse has the following properties:

• content - the recommendation's title.
• image – a thumbnail image (OBImage object) related to the recommendation. This property is optional, and is included only if the widget is configured to display images.
• source – the name of the recommendation's source (publisher). For paid recommendations this is the site name, and for organic recommendations this is the section name.
• paidLink – indicates whether this a paid or organic recommendation.
• video – indicates whether the recommendation points to an article containing a video clip.

    // Example: displaying a specific recommendation
    // getting the recommendation
    OBRecommendation rec = recResponse.get(index);
    // getting the title
    String title = rec.content;
    // .... populate the relevant UI component with the title
    
    // getting the source
    String source = rec.source;
    // .... populate the relevant UI component with the source
    
    // getting image URL
    if (rec.thumbnail != nil) {
       String imageURL = rec.thumbnail.url;
       // .... populate the relevant UI component with the image
    }

    // handling paid VS organic recommendation
    If ([rec isPaidLink]) {
       //....Show disclaimer, add paid icon, etc…
    }
    // handling video VS article
    if ([rec isVideo]) {
       //Add video icon on recommendation
    }

Displaying Thumbnail Images

The thumbnail image is defined by the OBImage object returned within OBRecommendation. It contains the following properties:

• width – the image width in pixels
• height – the image height in pixels
• url – a URL pointing to the image file. Use the URL to render the thumbnail image (see examples in the Outbrain sample apps).

The image width and height values are those agreed upon and determined by the widget ID.

Outbrain Widget Labeling

Any widget displaying Outbrain recommendations must be labeled with a header that is mutually agreed upon between the client and Outbrain.

To comply with Outbrain labeling guidelines:

1. Add the widget title text agreed upon with Outbrain (e.g. “Promoted stories”).

2. Choose one of the Outbrain logo images from the Outbrain-Resources folder, and add a clickable Outbrain logo to your widget, that opens the following link:
   <a href=”http://www.outbrain.com/what-is/default/en-mobile”>privacy policy</a>

See Recommendation Display Guidelines and Limitations for additional instructions about how to display Outbrain recommendations.

---

Handling Clicks on Recommendations

Getting the Recommendation URL

When a user clicks on one of Outbrain’s content recommendations, call Outbrain’s getOriginalContentURLAndRegisterClickForRecommendation method in order to get the content URL to be opened/navigated for your app user. Use the returned value as instructed below:

Here is an example:

// rec is an OBRecommendation object returned in 
// OBRecommendationsResponse
NSURL * url = [Outbrain getOriginalContentURLAndRegisterClickForRecommendation: rec];

---

Navigating to the Recommendation

When a user clicks on a recommendation, navigate to it as follows:

• For paid recommendations - open the URL (that you received from getOriginalContentURLAndRegisterClickForRecommendation) in an in-app browser (web view) or an external browser. See Outbrain Best Practices for Opening a Web Page for iOS. You can find an example of navigation to an in-app browser in the Journal sample app.

• For organic recommendations - navigate to the organic content using your app’s standard navigation mechanism. You can find an example in the Journal sample app.

---

Using the Sample Applications

The Outbrain SDK includes two sample applications that demonstrate how to use the SDK: the Catalog application and the Journal application. Both are located under the Samples folder of your SDK installationapplications are targets within the OutbrainDemo project. The following sections describe these applications.

The Catalog Sample Application

To use the Catalog sample application, open the OutbrainDemo project and select the Catalog target.
This application contains a collection of recommendation display layouts, which you can use to get an idea of how to present recommendations in your own app, or even copy the layout code as is.
Catalog first displays a menu of available layouts. Tapping on a layout name displays recommendations in the chosen layout.

The Journal Sample Application

To use the Journal sample application, open the OutbrainDemo project and select the Journal target.
This application shows a page of articles, with Outbrain recommendations interspersed in between the original articles. The user can swipe the recommendations to the left or right, to see additional recommendations.

What's New in Release 1.5.2

1) Improved registration method (no need for config file) - registration to Outbrain can be done with:

+ (void)initializeOutbrainWithPartnerKey:(NSString *)partnerKey;

2) Deprecated functions:

Class OBRequest {
    @property (nonatomic, copy) NSString *mobileId;
    @property (nonatomic, copy) NSString *source;
}

3) REMOVED:

homePageRequest

The SDK automatically handle homepage requests, there is no need to set \ get this parameter manually.

4) Stability and performance

• SDK was built with iOS 9, Xcode 7
• Minimum SDK support is iOS 7.0
• SDK size optimization - current size 1.5MB (was 6MB)

5) BITCODE support - read about Apple App Thinning for more details

6) Improve Sample Apps code

• iOS 9 support
• Supporting all iPhone sizes
• Improved performance
• Bug fixes

7) Swift Support - built-in Swift Module structure which eliminates the need to deal with the bridging header file. Just drag and drop the framework to the Swift project, use:
import OutbrainSDK – and that’s it!

8) Swift Sample App – we prepared a sample app in Swift so you’ll be able to quickly take references from our code and integrate in your project.