Introduction
Setup VideoWidget
OBClick Listener
VideoWidget RTB Support

Introduction

See example of how OBVideoWidget works below:

Setup VideoWidget

OBVideoWidget is the class responsible for managing the VideoWidget. You should create a property for OBVideoWidget in the relevant UIViewController where the original article is displayed.

Step 1: Create OBVideoWidget

let obRequest = OBRequest(url: Const.baseURL, widgetID: Const.widgetID)
self.outbrainVideoWidget = OBVideoWidget(request: obRequest, containerView: outbrainContainerView)
self.outbrainVideoWidget?.delegate = self
self.outbrainVideoWidget?.start()

We initilize OBVideoWidget with:

1) OBRequest – OBRequest contains both the current screen “article url” and “widget id”. Please consult with you account manager for more details).

2) UIView – This is outbrainContainerView which is basically the container view for the Video Widget.

3) Setting the delegate – app developer should implement the OBVideoWidgetDelegate protocol and set the delegate on self.outbrainVideoWidget as shown in the sample code above.

Step 2: Create The Container UIView

OBVideoWidget should be loaded into a UIView container, therefore please make sure to add outbrainContainerView either in your app Storyboard or in code.

Step 3: Connect Your Container View to OBVideoWidget

In order to load the OBVideoWidget into your container view use the following code:

self.outbrainVideoWidget = OBVideoWidget(request: obRequest, containerView: outbrainContainerView)
self.outbrainVideoWidget?.start()

OBVideoWidgetDelegate

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

@protocol OBVideoWidgetDelegate <NSObject>

-(void) userTappedOnRecommendation:(OBRecommendation *_Nonnull)rec;

-(void) userTappedOnAdChoicesIcon:(NSURL *_Nonnull)url;

-(void) userTappedOnVideoRec:(NSURL *_Nonnull)url;

-(void) userTappedOnOutbrainLabeling;

@end

An example for OBVideoWidgetDelegate implementation might be:

extension OBVideoWidgetViewController : OBVideoWidgetDelegate {
    func userTapped(on rec: OBRecommendation) {
        print("You tapped rec \(rec.content).")
        guard let url = Outbrain.getUrl(rec) else {
            print("Error: no url for rec.")
            return
        }
        let safariVC = SFSafariViewController(url: url)
        self.navigationController?.present(safariVC, animated: true, completion: nil)
    }

    func userTapped(onAdChoicesIcon url: URL) {
        print("You tapped onAdChoicesIcon")
        let safariVC = SFSafariViewController(url: url)
        self.navigationController?.present(safariVC, animated: true, completion: nil)
    }

    func userTapped(onVideoRec url: URL) {
        print("You tapped on video rec")
        let safariVC = SFSafariViewController(url: url)
        self.navigationController?.present(safariVC, animated: true, completion: nil)
    }

    func userTappedOnOutbrainLabeling() {
        print("You tapped on Outbrain Labeling")
        let url = Outbrain.getAboutURL()
        let safariVC = SFSafariViewController(url: url)
        self.navigationController?.present(safariVC, animated: true, completion: nil)
    }
}

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:

func userTapped(onAdChoicesIcon url: URL) {
    print("You tapped onAdChoicesIcon")
    let safariVC = SFSafariViewController(url: url)
    self.navigationController?.present(safariVC, animated: true, completion: nil)
}