Introduction
Guidelines and Limitations
Overview
Requesting Recommendations
Handling and Displaying Recommendations
Ad Choices Compliance
Outbrain Widget Labeling
Handling Clicks on Recommendations
Navigation to Paid Recommendations
Widget Viewability
Using the Sample Applications


Introduction

Please Note

Following the developer guide instructions is mandatory to ensure app compliance.

Please make sure to follow the entire guide before submitting your app to Outbrain QA.

Please pay special attention to the following steps:

Handling Clicks on Recommendations
Navigation to Paid Recommendations
Widget Viewability

This page will explain the necessary steps an app developer will have to implement in order to display Outbrain recommendations via a “regular widget” (non-Smartfeed) in their app.

Before reading this guide, please make sure to follow the required Integrating with the SDK and Initializing the SDK from iOS SDK – Developer Guide


Guidelines and Limitations

The recommendations that Outbrain provides are time-sensitive. 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:

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 Journal sample app.


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 slideshow:

  • Footer Widget

Requesting Recommendations

Calling fetchRecommendationsForRequest

When you want to request content recommendations, call Outbrain’s fetchRecommendationsForRequest method. Outbrain will send a response containing a collection 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:

Objective C

OBRequest * request = [OBRequest requestWithURL:post.url widgetID:"SDK_1"];

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


Swift

let request = OBRequest(url: url, widgetID: "SDK_1")

Outbrain.fetchRecommendations(for: request) { response in
    if (response?.error != nil) {
        //Handle error
    }
    else {
        //Handle success
    }
}


Note: Although the fetchRecommendationsForRequest requests are asynchronous, they are all stored in the same queue, so they are handled in the order in which they were called.


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 two “Factory Methods”:


Objective C

OBRequest * request = [OBRequest requestWithURL:post.url widgetID:"SDK_1"];
OBRequest * request = [OBRequest requestWithURL:post.url widgetID:"SDK_1" widgetIndex: 0];


Swift

let request = OBRequest(url: url, widgetID: "SDK_1")
let request = OBRequest(url: url, widgetID: "SDK_1", widgetIndex: 0)


(DO NOT create an OBRequest instance directly via [[OBRequest alloc] init])

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.

Note: Each page’s URL must be unique to the page and consistent (i.e. the same URL must be sent every time recommendations are requested for the same page.)


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.

Note: Before using the Outbrain SDK, make sure you have widget IDs assigned to all the widgets in which you’ll need to display recommendations.

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

  • ID “SDK_1” for the in-stream homepage widget.
  • ID “SDK_2” for the interstitial widget.
  • IDs “SDK_3” and “SDK_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.


External Id param

It’s possible to add “external id” param to OBRequest which will be processed on Outbrain backend and displayed in the dashboard.


Objective C

OBRequest * request = [OBRequest requestWithURL:post.url widgetID:"SDK_1"];
request.externalID = @"123456789"


Swift

let request = OBRequest(url: url, widgetID: "SDK_1")
request.externalID = "123456789"


Guidelines for Fetching Recommendations Multiple Times in a Single Page

Note: This section is relevant only if you plan to have more than one UI Widget on the same screen.

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.


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:


Objective C

(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
        }
}


Swift

func outbrainDidReceiveResponse(withSuccess response: OBRecommendationResponse!) {
    let numRecs = recommendations.count
    print("received \(numRecs) recommendations")
    for rec in recommendations {
        // Do something with each rec
    }
}


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.


Objective C

// Example: displaying a specific recommendation
// getting the recommendation
OBRecommendation *rec = response.get(index);

// getting the title
NSString *title = rec.content;
// .... populate the relevant UI component with the title

// getting the source
NSString *source = rec.source;
// .... populate the relevant UI component with the source

// getting image URL
if (rec.image != nil) {
    NSString *imageURL = rec.image.url;
    // .... populate the relevant UI component with the image
}

// handling paid VS organic recommendation
if ([rec isPaidLink]) {
    //....Show disclaimer, add paid icon, etc…
}


Swift

// Example: displaying a specific recommendation
// getting the recommendation
let rec = recommendations[0];

// getting the title
let title = rec.content;
// .... populate the relevant UI component with the title

// getting the source
let source = rec.source;
// .... populate the relevant UI component with the source

// getting image URL
if (rec.image != nil) {
    let imageURL = rec.image.url;
    // .... populate the relevant UI component with the image
}

// handling paid VS organic recommendation
if (rec.isPaidLink) {
    //....Show disclaimer, add paid icon, etc…


Recommendation Display Components

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.


Audience Campaign

Each OBRecommendation object has the following property:

  • audienceCampaignsLabel – the audience campaigns label. Could be null if not audience campaigns


Ad Choices Compliance

Note: Starting from SDK 2.5.0 Outbrain serves recommendations from demand partners that requires Ad Choices icon. as part of the recommendation creative, in order to maximize revenues for the publisher. In order to support the new demand – paid recommendations must be compliant with Ad Choices T&C.

In order to be compliant with Ad Choices T&C – Outbrain SDK will do most of the work for you. All you need to do is make sure to implement the following steps:


Step 1 – Add AdChoices UIButton to “Recommendation View”

In the XIB or Storyboard file – you should add an UIButton “on top” of the UIImageView which displays the recommendation image (as seen in the screenshot).

The UIButton size should be exactly 30×30 and also make sure to set “hidden” property to “true” by default to promise you won’t display the ad choices icon by mistake.

You can also set the “image insets” on the Ad Choices UIButton to make the image smaller, just make sure the size is at least 30px otherwise the button will not be easily clickable.

adChoicesButton.imageEdgeInsets = UIEdgeInsetsMake(2.0, 12.0, 12.0, 2.0);


Constraints Example


Important: Ad Choices (disclosure) UIButton should have width and height of 30px each.



Step 2 – Displaying RTB Recommendation With Ad Choices (Disclosure) Icon

In code, at the same method where you will normally set the “image url” (rec.image.url) on the recommendation UIImageView – you should also check if the recommendation is of type RTB and if so, set the Ad Choices icon url.


See the example code below:


Objective C

if ([rec shouldDisplayDisclosureIcon]) {
    cell.adChoicesButton.hidden = NO;
    cell.adChoicesButton.tag = indexPath.row;            
    NSURL *adChoicesURL = [NSURL URLWithString:rec.disclosure.imageUrl];
    [OBDemoDataHelper fetchImageWithURL:adChoicesURL withCallback:^(UIImage *image) {
        [cell.adChoicesButton setImage:image forState:UIControlStateNormal];
        [cell.adChoicesButton addTarget:self action:@selector(adChoicesClicked:) forControlEvents:UIControlEventTouchUpInside];
    }];
}
else {
    cell.adChoicesButton.hidden = YES;
}


Swift

// Handle RTB
if rec.shouldDisplayDisclosureIcon() {
    cell.adChoicesButton.tag = indexPath.row
    cell.adChoicesButton.isHidden = false
    if let adChoicesImageURL = rec.disclosure.imageUrl {
        Alamofire.request(adChoicesImageURL).responseImage { response in
            if let image = response.result.value {
                cell.adChoicesButton.setImage(image, for: .normal)
            }
        }
    }
    cell.adChoicesButton.addTarget(self, action: #selector(self.adChoicesClicked), for: .touchUpInside)

}
else {
    cell.adChoicesButton.isHidden = true
}


Step 3 – Handle Ad Choices (Disclosure) Icon Click

Please note, you should handle a click on the Ad Choices UIButton. In case of a click – you should open the url in an external browser (Safari or SFSafariViewController)..


Let’s expand the example above with the example code below:


Objective C

[cell.adChoicesButton addTarget:self action:@selector(adChoicesClicked:) forControlEvents:UIControlEventTouchUpInside];

-(void) adChoicesClicked:(id)sender {
    UIButton *adChoicesButton = sender;
    OBRecommendation *rec = self.recommendationResponse.recommendations[adChoicesButton.tag];
    [[UIApplication sharedApplication] openURL: rec.disclosure.clickUrl];
}


Swift

cell.adChoicesButton.addTarget(self, action: #selector(self.adChoicesClicked), for: .touchUpInside)

@objc private func adChoicesClicked(sender: UIButton) {
    // your code goes here
    let rec = self.recs[sender.tag]
    if let clickURL = rec.disclosure.clickUrl {
        self.delegate?.userTappedOnAdChoicesIcon(clickURL)
    }
}


Note: Make sure that adChoicesButton is set to hidden for non-RTB recommendations. See the code example above again.


Step 4 – Simulate RTB Recommendations And Verify Your Implementation

In order to make sure you’ve implemented steps 1-3 correctly, run the SDK with:

[Outbrain testRTB:YES];
[Outbrain setTestMode:YES];

This will promise you will receive RTB recommendations in the response for fetchRecommendationsForRequest(). Please verify that you see the “ad choices” icon and that a click on the icon is opening in external browser as expected.


Outbrain Widget Labeling

Any widget displaying Outbrain recommendations must be labeled with a header that is mutually agreed upon between the client and Outbrain. The “Outbrain widget labeling” should also be clickable – a click should open a URL generated by the SDK which is needed for GDPR and Ad Choices compliance.

To comply with Outbrain labeling guidelines:


1) Add the widget title text agreed upon with Outbrain (e.g. “Recommended to you”).

Note: For Viewability you’ll be using OBLabel for displaying the widget title. Read more about this in widget viewability.


2) Choose one of the Outbrain logo images from the Outbrain-Resources folder.


3) Important: Implement Click Handler

When the user clicks on the Outbrain labeling, you should open a URL generated by the SDK in the following way:


Objective C

NSURL *url = [Outbrain getOutbrainAboutURL];
SFSafariViewController *sf = [[SFSafariViewController alloc] initWithURL:url];
[vc presentViewController:sf animated:YES completion:nil];


Swift

guard let url = Outbrain.getAboutURL() else {
  return
}
let safariVC = SFSafariViewController(url: url)
viewController.present(safariVC, animated: true, completion: nil)






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


Handling Clicks on Recommendations


Note: Method getUrl() should be called only after the “click” event. Calling getUrl() method before the click will cause the SDK to report a false “click” event on the recommendation.


1) When a user clicks on a recommendation, you must call getUrl first:


Objective C

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


Swift

let rec = self.recs[indexPath.row]
guard let url = Outbrain.getUrl(rec) else {
    print("Outbrain.getUrl(rec) - url is null")
    return
}


Note: For paid recommendations, the returned URL is in paid.outbrain.com re-direct format. For organic recommendations the returned URL is in the standard (original) format. Developers should open the url “as is”, i.e. without any manipulation such as escaping or decoding.


2) Check if it’s a paid rec by calling recommendation.isPaidLink

For example:


Objective C

if (recommendation.isPaidLink)
{
    [self handlePaidRecommendation:recommendation];
}
else { // Organic
    [self handleOrganicRecommendation:recommendation];
}


Swift

if (rec.isPaidLink) {
    // Open all paid recommendation in SFSafariViewController
    let safariVC = SFSafariViewController(url: url)
    self.present(safariVC, animated: true, completion: nil)
}
else { 
    // It's a an organic recommendation, let's open it in our native Article ViewController
    loadPostContentFromUrl(url)
}


3) Navigate to the Recommendation


Navigate to Organic Recommendations

Navigate to the organic content using your app’s standard navigation mechanism. You can find an example in the Journal sample app.


Navigate to Paid Recommendations

You should use SFSafariViewController or the external Safari browser to open all paid recommendations.

See the flow diagram below to understand the steps necessary for handling and navigating recommendation click:


Note: The best way to understand the new logic is by looking at our Journal Sample App, specifically look at file PostsSwipeCV.m – you will find a good example for the implementation in method:

- (void)widgetView:(UIView *)widgetView tappedRecommendation:(OBRecommendation *)recommendation


Open in SFSafariViewController

Following the above example, you should be able to open a paid recommendation in SFSafariViewController. Please use the code sample below if needed:


Objective C

- (void) openUrlInSafariVC:(NSURL *)url {
    SFSafariViewController *sf = [[SFSafariViewController alloc] initWithURL:url];
    [self.navigationController presentViewController:sf animated:YES completion:nil];
}


Swift

func openUrlInSafariVC(_ url:URL) {
    let safariVC = SFSafariViewController(url: url)
    self.present(safariVC, animated: true, completion: nil)
}



Widget Viewability

Overview

Outbrain Widget Viewability measurement allows Outbrain to optimize the recommendations served for the application audience, hence support a better user experience and app performance.

Widget Viewability measures if the app user has seen the widget on the device screen.

Note: The best way to understand how to implement Viewability is by looking at our Journal Sample App, specifically look at file OBClassicRecommendationsView.m – you will find a good example for the implementation in method:

collectionView:viewForSupplementaryElementOfKind:atIndexPath:
Swift Sample: Please look at our OutbrainDemoSwift Sample App, specifically look at file ArticleTableViewController.swift – you will find a good example for the implementation in method:

loadPageContentOnScreen()


Widget Viewability for iOS SDK

Widget Viewability is implemented via OBLabel (iOS). Which is a child of the native base Class UILabel with the addition of reporting Viewability stats to Outbrain back-end.

iOS OBLabel

Note: You can either use OBLabel directly or inherit from it for additional customization.



We ask our developers to use OBLabel for the text in the Header of the Outbrain widget. See example below:



Important Concept – registerOBLabel() method

The most important step in the Widget Viewability implementation (after the view creation of course) is to register the OBLabel with the corresponding OBRequest for the widget.


+ (void) registerOBLabel:(OBLabel * _Nonnull)label withOBRequest:(OBRequest * _Nonnull)obRequest;



1) Simple Case: You should call registerOBLabel:withOBRequest: only once, right after the creation of the view, with the corresponding OBRequest of the widget (see code example here).

2) Complex Case: For re-usable views (ViewPager, TableViewCells, etc, etc), you have to make sure that every time the re-usable view is updated with new content (i.e. new url) you should call registerOBLabel:withOBRequest: method with the new OBRequest of the page.


For Example: A News app which shows articles in a ViewPager and an Outbrain widget is shown at the footer of each article page.

Users can swipe left\right between articles while the app is re-using of the article pages, when the user swipes 5 times to the right, only the content of the page is changing according to the current index in the Pageview, but the views are re-used.

In this case, the developer is responsible to call `registerOBLabel:withOBRequest:` whenever a new URL is loaded to the page.


Please Note in case you have more than one Outbrain Widget on the same screen, you’ll have to make sure to register each OBLabel with the URL of the screen (same between all widgets) and Widget_ID (different between all widgets).

How to Integrate Widget Viewability Feature?

There are 2 ways to create and use OBLabel (like any other native View on iOS):

  • Via Xcode Interface Builder
  • Via Code


Xcode Interface Builder

1) Open the Storyboard or XIB file which contains the Outbrain Widget.

2) Click on the ViewController or Parent View where the Outbrain Widget (including the Header) is implemented.

3) Find the UILabel which contains the text in the Header, usually the text is something like “Recommended to You”.

4) Replace the Class of the element from UITextView or UILabel to OBLabel

5) See example:

viewability_xib_example_ios


Important: In code, register the OBLabel instance and its corresponding OBRequest by calling:

+ (void) registerOBLabel:(OBLabel * _Nonnull)label withOBRequest:(OBRequest * _Nonnull)obRequest;


Implementation via Code


1) Create a new instance of OBLabel by calling:

Objective C
OBLabel *headerLabel = [[OBLabel alloc] init];
Swift
let headerLabel = OBLabel()


2) Important: call Register() with the OBLabel instance and its corresponding OBRequest by calling:

Objective C
[Outbrain registerOBLabel:headerLabel withOBRequest:obRequest];
Swift
Outbrain.register(headerOBLabel, with: request)


3) That’s it, from here you’re good to go.


Using the Journal Sample App

The Outbrain SDK includes a sample application to demonstrate how to use the SDK. The “Journal” application is located under the “Samples” folder of your SDK.

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.

Note: The link below is secured and protected with user\password. Please contact your account manager in order to be able to use the links below.

Journal Sample App (Obj-C & Swift)