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)