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 |
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.
