Skip to main content

iOS - Native Ad

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:

  1. Basic Native Ad
  2. Native Ad - Table View

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:

  1. Import Vpon SDK
  2. Declare a VpadnNativeAd instance
  3. Set the License Key
  4. Use the returned ad metadata to build a custom native UI
  5. 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:

  1. onVpadnNativeAdReceived
  2. didFailToReceiveAdWithError
  3. onVpadnNativeAdPresent
  4. onVpadnNativeAdDismiss
  5. 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.

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