Introduction
Setup the module
– Step 1 – Choose Items To Collapse
– Step 2 – TableView / CollectionView Implementation
– Step 3 – Set The Module To SmartFeedManager
Demo In Sample App
(Optional) Custom UI support

The “Read More” button is a new way for the publisher to increase RPM performance by exposing the Smartfeed as early as possible for the user.

In any “Article Screen” – the “Read More” button will “collapse” some parts of the article (below the scroll\viewport), thus, the SmartFeed will be exposed “above the scroll”.

The goal is to hide part of the article content and expose the Smartfeed to the user as early as possible.

See example of how this module works below:

Setup The Module

Step 1 – Choose Items To Collapse

Before you are setting up this module, you have to think about how you want the article screen to look like after implementing this module.

It is your responsibility to configure from which item the article will “collapse”.

Step 2 – TableView / CollectionView Implementation

All the “collapsable” items should be located in a separate section. This section should be the last section of your article.
The SDK will hide all the items in this section.

Configuration For TableView

In numberOfRowsInSection method of your TableView, use the numberOfRowsInCollapsableSection: collapsableItemCount: method of the smartFeedManager:

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  if section == self.collapsableSection {
    return self.smartFeedManager.tableView(tableView, numberOfRowsInCollapsableSection: section, collapsableItemCount: self.collapsableItemCount)
  }
}

self.collapsableSection is your collapsable section index and self.collapsableItemCount is the number of rows in this section.

Configuration For CollectionView

In numberOfItemsInSection method of your CollectionView, use the numberOfItemsInCollapsableSection: collapsableItemCount: method of the smartFeedManager:

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
  if section == self.collapsableSection {
    return self.smartFeedManager.collectionView(collectionView, numberOfItemsInCollapsableSection: section, collapsableItemCount: self.collapsableItemCount)
  }
}

self.collapsableSection is your collapsable section index and self.collapsableItemCount is the number of items in this section.

numberOfSections() method

Notice that numberOfSections method is the place to update the smartFeedManager with the section index of the SmartFeed.
Make sure that you are updating the outbrainSectionIndex with the correct index:

func numberOfSections(in ...) -> Int {
  self.smartFeedManager.outbrainSectionIndex = 2
  return self.smartFeedManager.numberOfSectionsInCollectionView()
}

In this example, the section index of the SmartFeed is 2, the collapsable section index is 1 and the article visible section index is 0.

Step 3 – Set The Module To SmartFeedManager

In order to enable this module, use OBSmartFeed method: setReadMoreModule():

self.smartFeedManager.setReadMoreModule()

---

Demo In Sample App

Download links are available at Outbrain SDK – Documentation & Download Links

In ViewController.swift, uncomment one of those lines to test the module:

performSegue(withIdentifier: "showTableReadMoreModuleVC", sender: nil) // For TableView
performSegue(withIdentifier: "showCollectionReadMoreModuleVC", sender: nil) // For CollectionView

---

(Optional) Custom UI support

This module supports Custom UI, download the template XML files from here.

Find the relevant .xib files in SFReadMoreModuleCells folder.

Xib configurations

Make sure that the class of the xib is SFCollectionViewReadMoreCell. Connect the readMorelabel outlet to the label.

Optional – Create your own class for the xib

You can create your own class for the xib and make more changes, for example:

import UIKit
import OutbrainSDK
class AppSFCollectionViewReadMoreCell: SFCollectionViewReadMoreCell {

    override func awakeFromNib() {
        super.awakeFromNib()

        self.readMoreLabel.layer.borderColor = UIColor.red.cgColor
    }
}

Don’t forget to change the class of your xib file.

Set your custom Xib

In order to set your custom xib, use the register method of the smartFeedManager and set your custom xib for SFTypeReadMoreButton type.

For example, in order to register the xib with the identifier: AppSFCollectionViewReadMoreCell:

let readMoreCellNib = UINib(nibName: "AppSFCollectionViewReadMoreCell", bundle: bundle)

self.smartFeedManager.register(readMoreCellNib, withReuseIdentifier: "AppSFCollectionViewReadMoreCell", for: SFTypeReadMoreButton)