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.

NativeAd Options

We support two kinds of Native Ad below:

Here we use the first one as an example to show how to construct a Basic Native Ad. Click the link above to get more detail about the Basic Native.

How to Implement Native Ad

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

Import Vpon SDK
Declare a VpadnNativeAd instance
Set the License Key
Use the returned ad metadata to build a custom native UI
Register the ad’s view with the nativeAd instance

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

Coding for Showing Native Ad

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)

@import VpadnSDKAdKit;
#import "ViewController.h"

@interface ViewController ()<VpadnNativeAdDelegate>
/* For SDK version 4.7.1 or above */
@interface ViewController ()<VpadnNativeAdDelegate, VpadnMediaViewDelegate>

@property (strong, nonatomic) VpadnNativeAd *nativeAd;
@property (weak, nonatomic) IBOutlet UILabel *statusLabel;
@property (weak, nonatomic) IBOutlet UIView *adView;
@property (weak, nonatomic) IBOutlet UIImageView *adIcon;
@property (weak, nonatomic) IBOutlet UIImageView *adCoverMedia;
@property (weak, nonatomic) IBOutlet UILabel *adTitle;
@property (weak, nonatomic) IBOutlet UILabel *adBody;
@property (weak, nonatomic) IBOutlet UIButton *adAction;
@property (weak, nonatomic) IBOutlet UILabel *adSocialContext;
/* For SDK version 4.7.1 or above */
@property (weak, nonatomic) IBOutlet VpadnMediaView *adMediaView;

@end

Declare a VpadnNativeAd Instance

Initializes VpadnNativeAd and request an ad to load in your View Controller’s implementation file. Function removePreviousAd can follow Clear Native Ad.
(Please click here if you still do not get the License Key)

- (IBAction)loadNativeAd:(id)sender {
    if(self.nativeAd) {
        [self removePreviousAd];
    }
    self.nativeAd = [[VpadnNativeAd alloc] initWithBannerID:@"License Key"];
    self.nativeAd.delegate = self;
    //The testing device will show the testing Ad while input its IDFA. Declare it as a empty string and the device will laod the actula Ad.
    [self.nativeAd loadAdWithTestIdentifiers:@[@"Input the device's IDFA"]];
}

Native Ad Callback

After adding the code to load the ad, the following 5 functions can handle loading failures, and callback the ad status:

onVpadnNativeAdReceived
didFailToReceiveAdWithError
onVpadnNativeAdPresent
onVpadnNativeAdDismiss
onVpadnNativeAdLeaveApplication

While the Native ad is received successfully, the function will also construct the ad into a custom UI. In order to enable the the SDK to log the impression and handle the click automatically you must register the ad’s view with the nativeAd instance. Additionally, registering the view using registerViewForInteraction:withViewController: will make the whole view clickable. If you are looking for finer control you can specify the clickable subviews using registerViewForInteraction:withViewController:withClickableViews:.

- (void)onVpadnNativeAdReceived:(VpadnNativeAd *)nativeAd {
    NSLog(@"VpadnNativeAd onVpadnNativeAdReceived");

    [self.statusLabel setHidden:YES];

    // icon
    __block typeof(self) safeSelf = self;
    [nativeAd.icon loadImageAsyncWithBlock:^(UIImage * _Nullable image) {
        safeSelf.adIcon.image = image;
    }];
    // media cover
    /* For SDK version 4.7.0 or below
    [nativeAd.coverImage loadImageAsyncWithBlock:^(UIImage * _Nullable image) {
        safeSelf.adCoverMedia.image = image;
    }];
    */
    /* For SDK version 4.7.1 or above */
    self.adMediaView.delegate = self;
    [self.adMediaView setNativeAd:nativeAd];
    // text
    self.adTitle.text = nativeAd.title;
    self.adBody.text = nativeAd.body;
    [self.adAction setHidden:NO];
    [self.adAction setTitle:nativeAd.callToAction forState:UIControlStateNormal];
    self.adSocialContext.text = nativeAd.socialContext;
    //whole view clickable:
    [self.nativeAd registerViewForInteraction:self.adView withViewController:self];
    //finer control:
    //[self.nativeAd registerViewForInteraction:self.adView withViewController:self withClickableViews:@[self.adAction]];
    [self.adView setHidden:NO];
}

- (void)onVpadnNativeAd:(VpadnNativeAd *)nativeAd didFailToReceiveAdWithError:(NSError *)error {
    NSLog(@"VpadnNativeAd didFailToReceiveAdWithError: %@", error);
    [self.statusLabel setHidden:NO];
    [self.statusLabel setText:[NSString stringWithFormat:@"Request failed with error: %d %@", (int)error.code, error.domain]];
}

- (void)onVpadnNativeAdPresent:(VpadnNativeAd *)nativeAd {
    NSLog(@"VpadnNativeAd onVpadnNativeAdPresent");
}

- (void)onVpadnNativeAdDismiss:(VpadnNativeAd *)nativeAd {
    NSLog(@"VpadnNativeAd onVpadnNativeAdDismiss");
}

- (void)onVpadnNativeAdLeaveApplication:(VpadnNativeAd *)nativeAd {
    NSLog(@"NativeAdViewController onVpadnNativeAdLeaveApplication");
}

/* For SDK version 4.7.1 or above */
- (void) mediaViewDidLoad:(VpadnMediaView *)mediaView {
    NSLog(@"mediaViewDidLoad");
}

Clear Native Ad

If you want to re-use the view to show different ads over time, make sure to call removePreviousAd before registering the same view with a different instance of VpadnNativeAd.

- (void)removePreviousAd {
    [self.nativeAd unregisterView];
    self.nativeAd.delegate = nil;
    self.adIcon.image = nil;
    self.adCoverMedia.image = nil;
    self.adView.hidden = YES;
}

Native Ads Manager

The Native Ad Manager is supported by Vpon SDK. Use the Native Ads Manager when your user experience involves displaying multiple ads within a short amount of time, such as a vertical feed or horizontal scroll. An app can also use Native Ads Manager to automatically refresh and deliver ads. Please follow the Sample Code to realize how to use the Native Ads Manager.

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.

Properties	Description
AdLabel	Let user know it is ad ( Sponsor, Ad, and so on ).
Title	Show at least 16 English alphabets. Show `...` while it’s out of space.
CoverImage	1200 x 627px (enable scaling in proportion, without distortion and clipping)
Icon	128 x 128px (enable scaling in proportion, without distortion and clipping)
CallToAction	Show completely
BodyText	Show at least 20 English alphabets or unshow it.
SocialContext	Show completely
RatingScale	5
Rating Min/Max	1/5

Download Sample Code

Here we use Basic Native Ad as an example. A Native Ad sample in table view is also in the Sample Code

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.

iOS - Native Ad