Overview

While using the Native Ad API, you will receive a group of ad properties such as a title, an image, and you will have to use them to construct a custom UIView where the ad is shown. The Native Ad, an innovated type of ad, allows you to build a customized experience for the ads you show in your app.

Prerequisites

Please make sure you’ve imported Vpon SDK to your Xcode project. If not, please refer to our Integration Guide to finish your setting.

Start To Implement Native Ad

There are five actions you will need to take to implement this in your app:

1. Import VpadnSDKAdKit
2. Declare a VpadnNativeAd instance
3. Initialize VpadnNativeAd object and indicate an License Key
4. Set up VpadnRequest object and send ad request
5. Set up custom Native Ad layout
6. Set up Delegate protocol

The best place to do all this is in your app’s ViewController.

Import VpadnSDKAdKit And Declare A VpadnNativeAd Instance

First, in your View Controller header file, import Vpon SDK and declare that you implement the VpadnNativeAdDelegate protocol as well as declare and connect instance variables to your UI. (Please follow the Natie Ad Spec)

Objective-C

@import VpadnSDKAdKit;
// Import Vpon SDK

@interface ViewController () <VpadnMediaViewDelegate, VpadnNativeAdDelegate>

@property (strong, nonatomic) VpadnNativeAd *nativeAd;

@property (weak, nonatomic) IBOutlet UIView *contentView;

@property (weak, nonatomic) IBOutlet UIImageView *adIcon;
@property (weak, nonatomic) IBOutlet UILabel *adTitle;
@property (weak, nonatomic) IBOutlet UILabel *adBody;
@property (weak, nonatomic) IBOutlet UILabel *adSocialContext;
@property (weak, nonatomic) IBOutlet UIButton *adAction;
@property (weak, nonatomic) IBOutlet VpadnMediaView *adMediaView;

@end

Swift

import VpadnSDKAdKit
// Import Vpon SDK

class VponSdkNativeViewController: UIViewController {
    
    var vpadnNative: VpadnNativeAd!
    @IBOutlet weak var contentView: UIView!
    @IBOutlet weak var adIcon: UIImageView!
    @IBOutlet weak var adTitle: UILabel!
    @IBOutlet weak var adBody: UILabel!
    @IBOutlet weak var adSocialContext: UILabel!
    @IBOutlet weak var adAction: UIButton!
    @IBOutlet weak var adMediaView: VpadnMediaView!
}

Initialize VpadnNativeAd Object And Indicate A License Key

Please follow the instrcution below to initialize VpadnNativeAd and indicate a License Key for it.

Objective-C

_nativeAd = [[VpadnNativeAd alloc] initWithLicenseKey:@"License Key"];
// initWithLicenseKey: Vpon License Key to get ad, please replace with your own one

_nativeAd.delegate = self;

Swift

vpadnNative = VpadnNativeAd(licenseKey: "License Key")
// initWithLicenseKey: Vpon License Key to get ad, please replace with your own one

vpadnNative.delegate = self

Set Up VpadnAdRequest and Send Ad Request

Set up VpadnAdRequest before you send ad request:

Objective-C

VpadnAdRequest *request = [[VpadnAdRequest alloc] init];

[request setTestDevices:@[[ASIdentifierManager sharedManager].advertisingIdentifier.UUIDString]];
// Set your test device's IDFA here if you're trying to get Vpon test ad

[_nativeAd loadRequest:request];
// Start to load ad

Swift

let request = VpadnAdRequest()

request.setTestDevices([ASIdentifierManager.shared().advertisingIdentifier.uuidString])
// Set your test device's IDFA here if you're trying to get Vpon test ad

vpadnNative.loadRequest(request)
// start to load ad

Note:

• Besides of setting up VpadnRequest for each ad type, you can also set up a general VpadnRequest for all types of ad.
• If you want to know more about target setting, please refer to Advanced Setting.

Set Up Custom Native Ad Layout

Please refer to the sample below to set up custom Native Ad Layout when onVpadnNativeAdLoaded triggered:

Objective-C

- (void)setNativeAd {
    _adIcon.image = nil;
    
    __block typeof(self) safeSelf = self;
    [_nativeAd.icon loadImageAsyncWithBlock:^(UIImage * _Nullable image) {
        safeSelf.adIcon.image = image;
    }];
    
    [_adMediaView setNativeAd:_nativeAd];
    _adMediaView.delegate = self;
    
    _adTitle.text = [_nativeAd.title copy];
    _adBody.text = [_nativeAd.body copy];
    _adSocialContext.text = [_nativeAd.socialContext copy];
    [_adAction setTitle:[_nativeAd.callToAction copy] forState:UIControlStateNormal];
    [_adAction setTitle:[_nativeAd.callToAction copy] forState:UIControlStateHighlighted];
    
    [_nativeAd registerViewForInteraction:_contentView withViewController:self];
    // You must register the Ad View to make the ad clickable

    // [_nativeAd registerViewForInteraction:withViewController:withClickableViews:self._adAction];
    // You can also register a specific ad component to make the Ad View to be clickable partly
}

Swift

func setNativeAd() {
        adIcon.image = nil
            
        vpadnNative.icon.loadImageAsync(withBlock: { image in
            self.adIcon.image = image
        })
        
        adMediaView.nativeAd = vpadnNative
        adMediaView.delegate = self
            
        adTitle.text = vpadnNative.title
        adBody.text = vpadnNative.body
        adSocialContext.text = vpadnNative.socialContext
        adAction.setTitle(vpadnNative.callToAction, for: .normal)
        adAction.setTitle(vpadnNative.callToAction, for: .highlighted)
        
        vpadnNative.registerView(forInteraction: contentView, with: self)
        // You must register the Ad View to make the ad clickable

        vpadnNative.registerView(forInteraction: withViewController, with: self.adAction)
        // You can also register a specific ad component to make the Ad View to be clickable partly
    }

Set Up Delegate Protocol

After finishing ad request, implement the delegate protocol as below to listen ad status.

Objective-C

- (void) onVpadnNativeAdLoaded:(VpadnNativeAd *)nativeAd {
    // Invoked if receive Native Ad successfully

    [self setNativeAd];
    // Construct Native Ad with returned components
}
- (void) onVpadnNativeAd:(VpadnNativeAd *)nativeAd failedToLoad:(NSError *)error {
    // Invoked if received ad fail, check this callback to indicates what type of failure occurred
}
- (void) onVpadnNativeAdWillLeaveApplication:(VpadnNativeAd *)nativeAd {
    // Invoked if user leave the app and the current app was backgrounded
}
- (void) mediaViewDidLoad:(VpadnMediaView *)mediaView {
    // Invoked if the media creatives load sucessfully
}
- (void)mediaViewDidFail:(VpadnMediaView *)mediaView error:(NSError *)error {
    // Invoked if the media creatives load fail
}

Swift

extension VponSdkNativeViewController: VpadnNativeAdDelegate, VpadnMediaViewDelegate {
    
    func onVpadnNativeAdLoaded(_ nativeAd: VpadnNativeAd) {
        // Invoked if receive Native Ad successfully

        self.setNativeAd()
        // Construct Native Ad with returned components
    }
    func onVpadnNativeAd(_ nativeAd: VpadnNativeAd, failedToLoad error: Error) {
        // Invoked if received ad fail, check this callback to indicates what type of failure occurred
    }
    func onVpadnNativeAdWillLeaveApplication(_ nativeAd: VpadnNativeAd) {
        // Invoked if user leave the app and the current app was backgrounded
    }
    func mediaViewDidLoad(_ mediaView: VpadnMediaView) {
        // Invoked if the media creatives load sucessfully
    }
    func mediaViewDidFail(_ mediaView: VpadnMediaView, error: Error) {
        // Invoked if the media creatives load fail  
    }
}

Native Ad Spec

Please check to table below to find the Native Ad component provided by Vpon.

• Components in red are required to show in Native Ad layout.
• Show at least one image (CoverImage or Icon) in Native Ad layout.

Tips

Make Sure If The Ad Display Successfully

Please note that following settings which might cause the ad invisible on the screen are not allowed:

• Set AdView as Hidden
• Set the Alpha value of AdView < 100%
• Overlays that cover the AdView

Please help to check if below log printed after the ad display and match the viewability standard:

<VPON> [NOTE] Send impression successfully

Sample Code

Please refer to our Sample Code for a complete integration sample.

Integration Guide For The Version Below Vpon SDK v5.5.0

Please refer to Native Ad Integration Guide if you want to know more about the integration that compatible with the Vpon SDK version below v5.5.0.

Mediation

Mediation is a feature that lets you serve ads to your apps from multiple sources. Please refer to the reference below to get the complete description about the Native Ad Mediation setting.

• AdMob
  <!– - Mopub
  
• Smaato –>