HyBid iOS SDK - standalone - Native Ads

Native Ads will be fetched using the HyBid SDK.

Requirements

  • Ad Zone ID from the PubNative Publisher Dashboard

Demo App

You can find a demo app with code samples for this type of integration here.

Create Native Ad Layout

Create all the UI elements in your user interface that will hold the native ad elements. (For the sake of simplicity, we use Interface Builder & IBOutlets to create our UI elements. You can also create them programmatically.)

@IBOutlet weak var nativeAdContainer: UIView!
@IBOutlet weak var nativeAdContentInfo: UIView!
@IBOutlet weak var nativeAdIcon: UIImageView!
@IBOutlet weak var nativeAdTitle: UILabel!
@IBOutlet weak var nativeAdRating: HyBidStarRatingView!
@IBOutlet weak var nativeAdBanner: UIView!
@IBOutlet weak var nativeAdBody: UILabel!
@IBOutlet weak var nativeAdCallToAction: UIButton!

@property (weak, nonatomic) IBOutlet UIView *nativeAdContainer;
@property (weak, nonatomic) IBOutlet UIView *nativeAdContentInfo;
@property (weak, nonatomic) IBOutlet UIImageView *nativeAdIcon;
@property (weak, nonatomic) IBOutlet UILabel *nativeAdTitle;
@property (weak, nonatomic) IBOutlet HyBidStarRatingView *nativeAdRating;
@property (weak, nonatomic) IBOutlet UIView *nativeAdBanner;
@property (weak, nonatomic) IBOutlet UILabel *nativeAdBody;
@property (weak, nonatomic) IBOutlet UIButton *nativeAdCallToAction;

There must always be a view (i.e: nativeAdContainer), containing all the native ad elements. This is necessary in order to properly track the visibility of all the native ad elements.

IMPORTANT: Call to Action button's (i.e: nativeAdCallToAction) userInteractionEnabled property must be set to false. Otherwise, the ad click will only work when the user clicks anywhere on the add except the button.

Request a Native Ad

  1. Import HyBid in your class.
import HyBid

#import <HyBid/HyBid.h>
  1. Create a HyBidNativeAdLoader *nativeAdLoader property:
var nativeAdLoader = HyBidNativeAdLoader()

@property (nonatomic, strong) HyBidNativeAdLoader *nativeAdLoader;
  1. Instantiate the property that you have declared. After this, you can request an Ad by, passing your Ad Zone ID and also your registered view controller as the nativeAdLoader's delegate (HyBidNativeAdLoaderDelegate).
self.nativeAdLoader.loadNativeAd(with: self, withZoneID: <YOUR AD ZONE ID HERE>)

self.nativeAdLoader = [[HyBidNativeAdLoader alloc] init];
[self.nativeAdLoader loadNativeAdWithDelegate:self withZoneID:<YOUR AD ZONE ID HERE>];

Fetch The Native Ad Elements

After the ad is successfully received from PubNative, the native ad elements it should be fetched.

  1. Declare a HyBidNativeAd *nativeAd property.
var nativeAd = HyBidNativeAd()

@property (nonatomic, strong) HyBidNativeAd *nativeAd;
  1. Use the nativeAd's fetchAssets() method to fetch the native ad elements once they're received by passing your registered view controller as the nativeAd's delegate (HyBidNativeAdFetchDelegate).
extension ViewController : HyBidNativeAdLoaderDelegate
{
    func nativeLoaderDidLoad(with nativeAd: HyBidNativeAd!)
    {
        self.nativeAd = nativeAd
        self.nativeAd.fetchAssets(with: self)
    }
    
    func nativeLoaderDidFailWithError(_ error: Error!)
    {
         print("Native Ad Loader did fail with error:\(error.localizedDescription)")
    }
}

#pragma mark - HyBidNativeAdLoaderDelegate

- (void)nativeLoaderDidLoadWithNativeAd:(HyBidNativeAd *)nativeAd
{    
    self.nativeAd = nativeAd;
    [self.nativeAd fetchNativeAdAssetsWithDelegate:self];
}

- (void)nativeLoaderDidFailWithError:(NSError *)error
{
    NSLog(@"Native Ad Loader did fail with error: %@",error.localizedDescription);
}

Render/Display and Track The Ad

After the Native Ad elements are successfully fetched, the ad now should be rendered using a HyBidNativeAdRenderer.

To display Native Ads, you need to create a HyBidNativeAdRenderer *renderder instance, and bind all your view elements into it and then pass this instance to HyBidNativeAd's renderAd() method:

extension ViewController : HyBidNativeAdFetchDelegate
{
    func nativeAdDidFinishFetching(_ nativeAd: HyBidNativeAd!)
    {
        let renderer = HyBidNativeAdRenderer()
        renderer.contentInfoView = self.nativeAdContentInfo;
        renderer.iconView = self.nativeAdIcon;
        renderer.titleView = self.nativeAdTitle;
        renderer.starRatingView = self.nativeAdRating;
        renderer.bannerView = self.nativeAdBanner;
        renderer.bodyView = self.nativeAdBody;
        renderer.callToActionView = self.nativeAdCallToAction;
        
        self.nativeAd.renderAd(renderer)
        self.nativeAd.startTrackingView(self.nativeAdContainer, with: self)
        
    }
    
    func nativeAd(_ nativeAd: HyBidNativeAd!, didFailFetchingWithError error: Error!)
    {
        print("Native Ad did fail fetching with error:\(error.localizedDescription)")
    }
}

#pragma mark - HyBidNativeAdFetchDelegate

- (void)nativeAdDidFinishFetching:(HyBidNativeAd *)nativeAd
{
    HyBidNativeAdRenderer *renderer = [[HyBidNativeAdRenderer alloc] init];
    renderer.contentInfoView = self.nativeAdContentInfo;
    renderer.iconView = self.nativeAdIcon;
    renderer.titleView = self.nativeAdTitle;
    renderer.starRatingView = self.nativeAdRating;
    renderer.bannerView = self.nativeAdBanner;
    renderer.bodyView = self.nativeAdBody;
    renderer.callToActionView = self.nativeCallToAction;
    
    [self.nativeAd renderAd:renderer];
    [self.nativeAd startTrackingView:self.nativeAdContainer withDelegate:self];
}

- (void)nativeAd:(HyBidNativeAd *)nativeAd didFailFetchingWithError:(NSError *)error
{
    NSLog(@"Native Ad did fail fetching with error: %@",error.localizedDescription);
}

After setting all the elements in the corresponding UI, the ad needs to be tracked. This will trigger the impression and click notifications to the PubNative servers once any of these events happen.

extension ViewController : HyBidNativeAdFetchDelegate
{
    func nativeAdDidFinishFetching(_ nativeAd: HyBidNativeAd!)
    {
         //....
         //Rendering code
         //....
        self.nativeAd.startTrackingView(self.nativeAdContainer, with: self) 
    }
}

#pragma mark - HyBidNativeAdFetchDelegate

- (void)nativeAdDidFinishFetching:(HyBidNativeAd *)nativeAd
{
    //....
    //Rendering code
    //....
    [self.nativeAd startTrackingView:self.nativeAdContainer withDelegate:self];
}

It is very important that the view (i.e: nativeAdContainer) which is passed as a parameter on the startTrackingView() method is a view that contains all the native ad elements. Otherwise, the impression and click tracking will not work properly and some parts of the ad will not be clickable.

HyBidNativeAdDelegate's nativeAd:impressionConfirmed and nativeAdDidClick methods notify the impressions and clicks. Use those delegate methods in case you want to hide the ad after click or some similar use case.

extension ViewController : HyBidNativeAdDelegate
{
    func nativeAd(_ nativeAd: HyBidNativeAd!, impressionConfirmedWith view: UIView!)
    {
        print("Native Ad did track impression:")
    }
    
    func nativeAdDidClick(_ nativeAd: HyBidNativeAd!)
    {
        print("Native Ad did track click:")
    }
}

#pragma mark - HyBidNativeAdDelegate

- (void)nativeAd:(HyBidNativeAd *)nativeAd impressionConfirmedWithView:(UIView *)view
{
    NSLog(@"Native Ad did track impression:");
}

- (void)nativeAdDidClick:(HyBidNativeAd *)nativeAd
{
    NSLog(@"Native Ad did track click:");
}

Finally, stop tracking the Native Ad when the instance gets deallocated or removed from the view hierarchy.

self.nativeAd.stopTracking()

[self.nativeAd stopTracking];

Return to the HyBid