Native Ad - Classic integration

• Latest Version: iOS release notes
• Sample App: Teads iOS Sample App

This native implementation is specifically designed to fit feed views
You can customize the native ad view to have the same look and feel as the other views of your feed, it will offer an immersive experience.

1. Integration
2. Event Monitoring
3. Check list
4. Additional Settings

Integration

Note

Check out the sample ViewController from our iOS GitHub repository

Check out the framework API documentation

Important

Make sure you are using a dedicated native placement id (PID) on native ad requests, do not reuse native PID. You will not receive any ad if the PID is not a native one.

You are responsible for positioning the elements (title label, main image, call to action button…)
These elements need to be visible (without overlay, even transparent ones) otherwise our visibility algorithm will consider the ad view as hidden

The article is using the Native display test PID 124859. This PID is meant to be used for testing purposes and shall not be released into production.

Interface

1. Add the TeadsNativeAdView to the storyboard:
   Make sure Module TeadsSDK is set below Class TeadsNativeAdView

2. Create an outlet of the adView

@IBOutlet weak var adView: TeadsNativeAdView!

3. Then you need to map all UI elements to TeadsSDK.TeadsNativeAdView:

You have multiple options to map

InterfaceBuilder

Link UI elements to TeadsSDK.TeadsNativeAdView.IBoutlets

Tag Binder

Link UI elements by defining a unique tag for each, provide tag value into builder

Check out the sample ViewController from our iOS GitHub repository

adView.bind(ad) { builder in
    builder.titleLabelTag = 1
    builder.contentLabelTag = 2
    builder.mediaViewTag = 3
    builder.iconImageViewTag = 4
    builder.advertiserLabelTag = 5
    builder.callToActionButtonTag = 6
}

Create your own XIB

Vreate your own xib with your own UIView, you need to create each UI Assets according to these types:

• titleLabel: UILabel
• contentLabel: UILabel
• mediaView: TeadsSDK.TeadsMediaView
• iconImageView: UIImageView
• advertiserLabel: UILabel
• callToActionButton: UIButton
• ratingView: UIView
• priceLabel: UILabel

Note

You also have the ability to create your own subclass of TeadsNativeAdView in order to build interface programmatically.

Load an Ad

You need to create a placement first using Teads.createNativePlacement, this placement is linked to your PID

Important

Instance of TeadsNativeAdPlacement must be owned / retained in order to be able to request ads properly

class NativeDirectTableViewController : UIViewController, TeadsNativeAdPlacementDelegate {

    @IBOutlet weak var tableView: UITableView!
    var placement: TeadsNativeAdPlacement? //keep a strong reference to placement instance

    override func viewDidLoad() {
        super.viewDidLoad()
        let placementSettings = TeadsAdPlacementSettings { (settings) in
            settings.enableDebug()
        }
        placement = Teads.createNativePlacement(pid: Int(pid) ?? 0, settings: placementSettings, delegate: self)

        placement?.requestAd(requestSettings: TeadsAdRequestSettings(build: { (settings) in
            settings.pageUrl("https://example.com/article1")
        }))
    }

    ...
}

Store Ad (Sequence)

When implementing native in a tableView or collectionView we suggest you to add TeadsNativeAd inside your sequence structure

private var elements = [TeadsNativeAd?]()

override func viewDidLoad() {
    super.viewDidLoad()

    (0..<8).forEach { _ in
        elements.append(nil) //nil reprensents all other data of cells
    }
    ...
}

implement didReceiveAd to store ad in you sequence structure

func didReceiveAd(ad: TeadsNativeAd) {
    ad.delegate = self // register to TeadsAdDelegate
    elements.insert(ad, at: adRowNumber) // store ad into sequence structure
    let indexPaths = [IndexPath(row: adRowNumber, section: 0)]
    tableView.insertRows(at: indexPaths, with: .automatic)
}

Ad Binding

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    if let ad = elements[indexPath.row] {
        guard let cell = tableView.dequeueReusableCell(withIdentifier: teadsAdCellIndentifier, for: indexPath) as? NativeAdTableViewCell else {
            return UITableViewCell()
        }
        // You can change the media view aspect ratio to either fill the view or fit in the container.
        cell.adView.mediaView?.mediaScale = .scaleAspectFit

        // When IBOutlets elements are linked through interface builder
        cell.adView.bind(ad)

        // alternatively you can bind UI elements using tagBinder closure
        cell.adView.bind(ad) { builder in
            builder.titleLabelTag = 1
            builder.contentLabelTag = 2
            builder.mediaViewTag = 3
            builder.iconImageViewTag = 4
            builder.advertiserLabelTag = 5
            builder.callToActionButtonTag = 6
        }

        return cell
    }
    ...
}

Note
if you chose to create your own UIView, you need to bind every UI Asset manually

ad.register(containerView: myOwnUIView) // you must register your custom view
myTitleLabel.bind(ad.title)
myImageView.bind(ad.image)
...

Event Monitoring

The SDK provides a delegate to monitor events during the placement life cycle

protocol TeadsNativeAdPlacementDelegate {
    // When the Teads inApp SDK has received an ad for you to bind
    func didReceiveAd(ad: TeadsSDK.TeadsNativeAd)
    // When Teads inApp SDK has failed to retrieve an ad
    func didFailToReceiveAd(reason: AdFailReason)
    // Not relevant for native
    func adOpportunityTrackerView(trackerView: TeadsAdOpportunityTrackerView)}

The SDK provides a delegate to monitor events during the ad life cycle and help you customize the ad experience in your apps.

protocol TeadsAdDelegate {
    // When an impression has occured
    func didRecordImpression(ad: TeadsAd)
    // When an event click has been fired
    func didRecordClick(ad: TeadsAd)
    // When the ad experience has experienced an issue
    func didCatchError(ad: TeadsAd, error: Error)
    // When the ad has been closed
    func didCloseAd(ad: TeadsAd)
    // Wwhen ad wants to present viewController modally e.g: safariViewController (Click to action)
    func willPresentModalView(ad: TeadsAd) -> UIViewController?
}

Check list

• ✅ Ensure you comply with privacy legal requirements (GDPR/CCPA).
• ✅ Comply with app-ads.txt
• ✅ Test different test PIDs for multiple ad format and size testing
• ✅ Enable validation mode to ensure key features are working

Additional Settings

Find the full available TeadsAdPlacementSettings and TeadsAdRequestSettings settings here:

TeadsAdPlacementSettings { settings in
  // To enable debug logginer for Teads inApp SDK
  settings.enableDebug()
  // This is the CCPA string
  settings.setUsPrivacy([US_PRIVACY])
  // Here is the GDPR informations
  settings.userConsent([SUBJECT_TO_GDPR], [CONSENT_STRING], .V2, sdkId)
}

TeadsAdRequestSettings { settings in
  // this turn on the validation tool to validate your integration
  settings.enableValidationMode()
  // this provide about context your current page for brand safety
  settings.pageUrl([https://example.com/article_1])
}