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 second one as an example to show how to construct a Native ad in Table View. Click the link above to get more detail about the Basic Native Ad.

Overview

Here are five steps to construct Native Ad - Table View :

Import Vpon SDK
Initialize adsManager & Request ads
Initialize VpadnNativeAdTableViewAdProvider
Implement UITableViewDataSource & UITableViewDelegate Protocol
Unregister the existed native ad.

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

Coding for Showing Native Ad - Table View

First, in your View Controller header file, import Vpon SDK and declare that you implement the following protocols:

UITableViewDelegate
UITableViewDataSource
VpadnNativeAdsManagerDelegate
VpadnNativeAdDelegate

Declare VpadnNativeAdsManager & VpadnNativeAdTableViewAdProvider. The first one can help for managing multiple native ads, and the second one can handle the changed index while inserting ads into table view.

@import VpadnSDKAdKit;
#import "TableViewController.h"
#import "CustomCell.h"

static NSInteger const kRowStrideForAdCell = 3;
static NSString *const kDefaultCellIdentifier = @"normalIdentifier";
static NSString *const kAdCellIdentifier = @"adIdentifier";

@interface TableViewController ()<UITableViewDelegate, UITableViewDataSource, VpadnNativeAdsManagerDelegate, VpadnNativeAdDelegate>

@property (strong, nonatomic) VpadnNativeAdsManager *adsManager;
@property (strong, nonatomic) VpadnNativeAdTableViewAdProvider *ads;

@property (strong, nonatomic) NSMutableArray *tableViewContents;

@end

Initialize adsManager & Request ads

Initialize adsManager and set the License Key (Please click here if you still do not get the License Key). Besides, the parameter forNumAdsRequested could handle the number of ads which have been request in adsManager ( 5 would be the maximum of the parameter, it is meant you can request 5 ads each time).

- (void)viewDidLoad {
    [super viewDidLoad];

    if (!self.adsManager) {
        self.adsManager = [[VpadnNativeAdsManager alloc] initWithBannerID:@"License Key" forNumAdsRequested:5];
        self.adsManager.delegate = self;
    }
    [self.adsManager loadAdsWithTestIdentifiers:@[@"49EAAA1A-869E-43D5-BAFD-26839FAEEEDD"]];
}

Initialize VpadnNativeAdTableViewAdProvider

Finish implementing VpadnNativeAdsManagerDelegate Protocol. After receiving the callback about the success of loading ad, please set the delegate of adsManager into nil and initialize VpadnNativeAdTableViewAdProvider. When finish the above setting, please use the method reloadData to renew table view.

- (void)onVpadnNativeAdsReceived {
    NSLog(@"Ads did loaded");

    NSLog(@"Unique count %d", self.adsManager.uniqueNativeAdCount);
    VpadnNativeAdsManager *manager = self.adsManager;
    self.adsManager.delegate = nil;
    self.ads = [[VpadnNativeAdTableViewAdProvider alloc] initWithManager:manager];
    self.ads.delegate = self;

    [self.tableView reloadData];
}

- (void)onVpadnNativeAdsFailedToLoadWithError:(NSError *)error {
    NSLog(@"Ads did fail with error %@", error);
}

Implement UITableViewDataSource & UITableViewDelegate Protocol

Implementing these two protocols is equivalent to complete 3 steps showing below:

Calculate the number of tabel cell.
Set the height of the cell.
Fill in contents.

First, you can use kRowStrideForAdCell to control the interval between each native ad. Second, set the height of the cell by implementing UITableViewDelegate protocol. At last, distinguish between the normal one or native ad and fill in the suitable conetents.

Please follow the Natie Ad Spec while constructing the customized native ad UI.

#pragma mark - UITableViewDataSource

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [self.ads adjustCount:self.tableViewContents.count forStride:kRowStrideForAdCell] ?:self.tableViewContents.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    /* Update Native ads manager
    if (indexPath.row != 0 && indexPath.row % 20 == 0) {
        [self.adsManager loadAdsWithTestIdentifiers:@[@"請填入手機的 IDFA"]];
    }
    */

    UITableViewCell *cell;
    if ([self.ads isAdCellAtIndexPath:indexPath forStride:kRowStrideForAdCell]) {

        cell = [tableView dequeueReusableCellWithIdentifier:kAdCellIdentifier forIndexPath:indexPath];
        VpadnNativeAd *ad = [self.ads tableView:tableView nativeAdForRowAtIndexPath:indexPath];
        [(CustomCell *)cell setNativeAd:ad];
        [ad registerViewForInteraction:cell.contentView withViewController:self];
    } else {

        cell = [tableView dequeueReusableCellWithIdentifier:kDefaultCellIdentifier forIndexPath:indexPath];
        NSIndexPath *index = [self.ads adjustNonAdCellIndexPath:indexPath forStride:kRowStrideForAdCell]?: indexPath;
        cell.textLabel.text = [self.tableViewContents objectAtIndex:index.row];
        [cell setBackgroundColor:[UIColor whiteColor]];
    }
    return cell;
}

#pragma mark - UITableViewDelegate

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 80;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    [tableView deselectRowAtIndexPath:indexPath animated:YES];
}

Clear Native Ad

Method setNativeAd in CustomCell will determine whether there exists native ad in the cell. If so, unregister the original one.

- (void)setNativeAd:(VpadnNativeAd *)nativeAd {
    if (_nativeAd != nativeAd) {
        [_nativeAd unregisterView];
    }
    ...
}

Native Ad Spec

Red Color indicates the required element in the Native Ad. CoverImage and Icon, at least one of them must be shown.

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 NativeAd - Table View as an example. A basic naive ad sample is also in the Sample Code

iOS - Native Ad (Table View)