Overview
Native ads are ad formats that naturally integrate with your app’s UI. You can freely customize ad elements (title, image, description, etc.) to match your app design.
Key Features
- Custom design that perfectly integrates with app UI
- Individual access and placement of ad elements
- Option to display advertiser profile information
- Support for additional custom fields
Implementation Steps
Native ad implementation proceeds in the following steps:
- Load ad
- Create custom view
- Bind view
- Handle delegates
1. Load Ad
Create an AdropNativeAd instance and load the ad.
import AdropAds
class MyViewController: UIViewController {
private var nativeAd: AdropNativeAd?
override func viewDidLoad() {
super.viewDidLoad()
// Create native ad
nativeAd = AdropNativeAd(unitId: "YOUR_NATIVE_UNIT_ID")
nativeAd?.delegate = self
// Load ad
nativeAd?.load()
}
}
Set Context ID
You can set a Context ID for contextual targeting.
nativeAd?.contextId = "article_123"
Use test unit IDs during development. See the Test Unit IDs section.
2. Create Custom View
Compose your native ad view using Storyboard or code.
UIKit (Storyboard/XIB)
Create AdropNativeAdView in Storyboard and connect ad elements as IBOutlets.
import AdropAds
class NativeAdViewCell: UITableViewCell {
@IBOutlet weak var nativeAdView: AdropNativeAdView!
@IBOutlet weak var iconImageView: UIImageView!
@IBOutlet weak var headlineLabel: UILabel!
@IBOutlet weak var bodyLabel: UILabel!
@IBOutlet weak var mediaView: UIView!
@IBOutlet weak var callToActionButton: UIButton!
// Advertiser profile (optional)
@IBOutlet weak var advertiserLogoImageView: UIImageView!
@IBOutlet weak var advertiserNameLabel: UILabel!
func configure(with ad: AdropNativeAd) {
// View binding (see next section)
}
}
UIKit (Code)
import AdropAds
class NativeAdView: UIView {
let nativeAdView = AdropNativeAdView()
let iconImageView = UIImageView()
let headlineLabel = UILabel()
let bodyLabel = UILabel()
let mediaView = UIView()
let callToActionButton = UIButton()
override init(frame: CGRect) {
super.init(frame: frame)
setupViews()
}
private func setupViews() {
addSubview(nativeAdView)
nativeAdView.addSubview(iconImageView)
nativeAdView.addSubview(headlineLabel)
nativeAdView.addSubview(bodyLabel)
nativeAdView.addSubview(mediaView)
nativeAdView.addSubview(callToActionButton)
// Auto Layout setup
// ...
}
}
3. Bind View
Bind ad elements to AdropNativeAdView to display ad data.
func configure(with ad: AdropNativeAd) {
// Bind each element to AdropNativeAdView
nativeAdView.setIconView(iconImageView)
nativeAdView.setHeadLineView(headlineLabel)
nativeAdView.setBodyView(bodyLabel)
nativeAdView.setMediaView(mediaView)
nativeAdView.setCallToActionView(callToActionButton)
// Advertiser profile (optional)
if let advertiserLogoView = advertiserLogoImageView,
let advertiserNameView = advertiserNameLabel {
nativeAdView.setAdvertiserLogoView(advertiserLogoView)
nativeAdView.setAdvertiserNameView(advertiserNameView)
}
// Set ad data (automatically displayed in bound views)
nativeAdView.setNativeAd(ad)
}
Binding Methods
| Method | Description | Required |
|---|
setIconView(_:) | Set icon image view | Optional |
setHeadLineView(_:) | Set title label | Optional |
setBodyView(_:) | Set description label | Optional |
setMediaView(_:) | Set main image/video view | Optional |
setCallToActionView(_:) | Set CTA button | Optional |
setAdvertiserLogoView(_:) | Set advertiser logo image view | Optional |
setAdvertiserNameView(_:) | Set advertiser name label | Optional |
setNativeAd(_:) | Set ad data | Required |
To display advertiser profile, you must enable Show Advertiser Profile for the ad unit in AdControl Console.
4. Handle Delegates
Implement AdropNativeAdDelegate to handle ad events.
extension MyViewController: AdropNativeAdDelegate {
// Ad received successfully
func onAdReceived(_ nativeAd: AdropNativeAd) {
print("Native ad received successfully")
// Access ad data
if let headline = nativeAd.headline {
print("Title: \(headline)")
}
if let body = nativeAd.body {
print("Description: \(body)")
}
if let cta = nativeAd.callToAction {
print("CTA: \(cta)")
}
// Bind ad to view
configureNativeAdView(with: nativeAd)
}
// Ad receive failed
func onAdFailedToReceive(_ nativeAd: AdropNativeAd, _ errorCode: AdropErrorCode) {
print("Native ad failed to receive: \(errorCode)")
}
// Ad clicked (optional)
func onAdClicked(_ nativeAd: AdropNativeAd) {
print("Native ad clicked")
}
// Ad impression (optional)
func onAdImpression(_ nativeAd: AdropNativeAd) {
print("Native ad impression")
}
}
Delegate Methods
| Method | Required | Description |
|---|
onAdReceived(_:) | Required | Called when ad loads successfully |
onAdFailedToReceive(_:_:) | Required | Called when ad fails to load |
onAdClicked(_:) | Optional | Called when user clicks the ad |
onAdImpression(_:) | Optional | Called when ad is displayed |
Ad Properties
You can access ad data through the AdropNativeAd object.
Basic Properties
// When ad is received successfully
func onAdReceived(_ nativeAd: AdropNativeAd) {
// Title
if let headline = nativeAd.headline {
print("Title: \(headline)")
}
// Description
if let body = nativeAd.body {
print("Description: \(body)")
}
// CTA button text
if let callToAction = nativeAd.callToAction {
print("CTA: \(callToAction)")
}
// Main image/video
if let asset = nativeAd.asset {
print("Media URL: \(asset)")
}
}
Advertiser Profile
// Advertiser information
if let profile = nativeAd.profile {
if let logo = profile.displayLogo {
print("Advertiser logo: \(logo)")
}
if let name = profile.displayName {
print("Advertiser name: \(name)")
}
}
Custom Fields
You can access additional text items set in AdControl Console.
// Additional text items
if let extra = nativeAd.extra {
// Example: Price information
if let price = extra["price"] {
print("Price: \(price)")
}
// Example: Discount rate
if let discount = extra["discount"] {
print("Discount: \(discount)")
}
// Example: Rating
if let rating = extra["rating"] {
print("Rating: \(rating)")
}
}
The extra field uses additional text item IDs defined in the ad unit settings in AdControl Console as keys.
Property List
| Property | Type | Description |
|---|
headline | String? | Ad title |
body | String? | Ad description |
callToAction | String? | CTA button text |
asset | String? | Main image/video URL |
profile | AdropProfile? | Advertiser profile information |
extra | [String: String]? | Additional custom fields |
Best Practices
Error Handling
Display fallback UI when ad fails to load to maintain user experience.
func onAdFailedToReceive(_ nativeAd: AdropNativeAd, _ errorCode: AdropErrorCode) {
print("Native ad failed to receive: \(errorCode)")
// Hide ad area
nativeAdContainerView.isHidden = true
// Or display fallback content
showFallbackContent()
}
Test Unit IDs
Use the following test unit IDs during development and testing.
| Ad Type | Test Unit ID |
|---|
| Native (Image) | PUBLIC_TEST_UNIT_ID_NATIVE |
| Native Video (16:9) | PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_16_9 |
| Native Video (9:16) | PUBLIC_TEST_UNIT_ID_NATIVE_VIDEO_9_16 |
// Load test ad
nativeAd = AdropNativeAd(unitId: AdropUnitId.PUBLIC_TEST_UNIT_ID_NATIVE)
Make sure to use actual unit IDs created in AdControl Console for production deployment.
Backfill Ads
When backfill ads are enabled, backfill ads are automatically loaded when direct ads are unavailable. Use the isBackfilled property to check if the ad is a backfill ad.
class ViewController: UIViewController, AdropNativeAdDelegate {
private var nativeAd: AdropNativeAd?
func onAdReceived(_ nativeAd: AdropNativeAd) {
if nativeAd.isBackfilled {
print("Backfill ad loaded")
} else {
print("Direct ad loaded")
}
}
func onAdFailedToReceive(_ nativeAd: AdropNativeAd, _ errorCode: AdropErrorCode) {
switch errorCode {
case .adNoFill:
print("No direct ad, requesting backfill...")
case .backfillNoFill:
print("No backfill ad available")
// Hide ad area
default:
print("Ad load failed: \(errorCode)")
}
}
}
To use backfill ads, add the AdropAds-Backfill dependency. See Getting Started.
