Native Placements

Native ads are different from standard ad units in that rather than being a single, self-contained entity from the perspective of a publisher, they are a collection of individual components that can be laid out and interacted with individually, so the publisher can control the user experience of each element of the ad along with its layout. Upon retrieving a Native Ad, the SDK returns an object that contains information about the ad along with a list of components that represent the contents of the ad. The three types of components that can returned are:

  • VASTextView - This a view that contains text.
  • VASDisplayMediaView - This a view that may contain either an image or video.
  • NativeComponentBundle - This is an organizational structure which contains a collection of components which may include other Bundles.

Different types of Native Ads may contain different components. In order to know the components that are available in an ad, the Ad Type can be requested using the following method:

Language Method
Android String getAdType ()
iOS (NSString*) adType
Swift adType: NSString

At present the only Native Ad Type support by the Verizon Ads SDK is “inline” which has defined set of components and component keys. As Verizon Media continues to innovate in the area of more engaging and high value ads, other ad types will become available. This is an important consideration when designing the integration of Verizon Ads SDK into an application. Below is a table that contains the components available for the “inline” Native Ad Type. The components that are Advertiser Required must be displayed in order to get credit for ad impressions.

Component ID Component Type Advertiser Required
“title” VASTextView Yes
“body” VASTextView Yes
“iconImage” VASDisplayMediaView Yes
“mainImage” VASDisplayMediaView Yes
“callToAction” VASTextView Yes
“rating” VASTextView No
“disclaimer” VASTextView Yes

Accessing Components

There are specific methods for accessing the three component types within the ad based on component type; VASTextView, VASDisplayMediaView, and NativeComponentBundle.

Accessing VASTextView Components

VASTextView     getText (final Context context, final String componentId)
(nullable VASTextView *) text:(NSString *)componentId
text(componentID : NSString) : NSString?

Accessing VASDisplayMediaView Components

VASDisplayMediaView getDisplayMedia (final Context context, final String componentId)
(nullable VASDisplayMediaView *) displayMedia:(NSString *)componentId
displayMedia(componentID : NSString) : NSString?

Accessing NativeComponentBundle Components

NativeComponentBundle   getBundle (final String componentId)
(nullable id<VASNativeComponentBundle>) bundle:(NSString *)componentId
bundle(componentID : NSString) : NSString?

Accessing Components for ‘Inline’ Native Ad

The following are examples of accessing some of the components found in an “inline” Native Ad Type. Please refer to the sample application for an example of implementing a Native Ad within an App.

VASTextView callToAction = nativeAd.getText(Context, "callToAction");
VASTextView title = nativeAd.getText(Context, "title");
FrameLayout icon = nativeAd.getDisplayMedia(Context, "iconImage");
VASTextView *ctaView = [self.nativeAd text:@"callToAction"];
VASTextView *titleView = [self.nativeAd text:@"title"];
VASDisplayMediaView *iconView = [self.nativeAd displayMedia:@"iconImage"];
let ctaView = nativeAd.text("callToAction")
let titleView = nativeAd.text("title")
let iconView = nativeAd.displayMedia("iconImage")

Integrating Native Ad Placements

To add a native add to an app, import the required headers, instantiate a NativeAdFactory, and load the ad. Once loaded, retrieve the components and add them to the app’s view hierarchy for display.

1. Import the required classes

//Required Verizon Ads SDK imports for native ads
import com.verizon.ads.nativeplacement.NativeAd;
import com.verizon.ads.nativeplacement.NativeAdFactory;
import com.verizon.ads.nativeplacement.NativeComponentBundle;
//Required Verizon Ads SDK imports for native ads
#import <VerizonAdsNativePlacement/VASNativeAd.h>
#import <VerizonAdsNativePlacement/VASNativeAdFactory.h>
//Required Verizon Ads SDK imports for native ads
import VerizonAdsNativePlacement

2. Create a native ad factory

An instance of the native ad factory is required to load an ad. The factory is created once, typically when the app’s view controller or activity is initialized.

//Create native ad factory required to load the ad
String[] myAdTypes = new String[]{"inline"};
this.nativeAdFactory = new NativeAdFactory(myNativeActivity, myPlacementId, myAdTypes, myAdFactoryListener);
//Create native ad factory required to load the ad
self.NativeAdFactory = [[VASNativeAdFactory alloc]initWithPlacementId:kNativeAdPlacementID adTypes:@[@"inline"] vasAds:[VASAds sharedInstance] delegate:myAdDelegate];
//Create native ad factory required to load the ad
nativeAdFactory = VASNativeAdFactory(placementId:nativePlacementID, adTypes:["inline"], vasAds:VASAds.sharedInstance, delegate:myAdDelegate)

Native ad factory callbacks

The NativeAdFactory callbacks communicate events related to ad loading. These are implemented as interfaces on Android and delegates on iOS. Please refer to the API documentation for Android and iOS for a complete list of available callbacks.

//Native ad factory callbacks
    @Override
    public void onLoaded(NativeAdFactory nativeAdFactory, NativeAd nativeAd) {
        Log.i("NativeAdFactory", "Load successful");
                             // Loading is successful and ad components can be retrieved
    }
//etc...
//Native ad factory callbacks
(void)nativeAdFactory:(VASNativeAdFactory *)adFactory didLoadNativeAd:(VASNativeAd *)nativeAd
{
     // Loading is successful and ad components can be retrieved
     NSLog(@"Load successful");
}
//etc...
//Native ad factory callbacks
func nativeAdFactory(_ adFactory: VASNativeAdFactory, didLoad nativeAd: VASNativeAd) {
    print("Load successful")
    // Loading is successful and ad components can be retrieved
    self.nativeAd = nativeAd
}
// etc...

3. Load an ad

Prior to displaying an ad, you must load it as seen below.

//Load the native ad
nativeAdFactory.load(myNativeAdListener);
//Load the native ad
[self.nativeAdFactory load:myNativeAdDelegate];
//Load the native ad
nativeAdFactory?.load(myNativeAdDelegate)

Native ad callbacks

The Native ad callbacks provide the state of an ad that has been displayed. For example, callbacks signal user actions, errors, etc. Please refer to the API documentation for Android and iOS for a complete list of available callbacks.

//Native ad callbacks
@Override
public void onClicked(NativeComponentBundle nativeComponentBundle) {
       Log.i(TAG, "Native ad was clicked");
}
//etc...
//Native ad callbacks
-(void)nativeAdClickedWithComponentBundle:(id<VASNativeComponentBundle>)nativeComponentBundle
{
    NSLog(@"Native ad was clicked");
}
// etc...
//Native ad callbacks
func nativeAdClicked(with nativeComponentBundle: VASNativeComponentBundle) {
    print("Native ad was clicked")
}
// etc...

4. Retrieve ad components

Once an Ad has been loaded successfully, components can be retrieved for subsequent display. The number, type of components, and structure of these will vary based on the AdType that is returned. At present the only supported AdType is “inline”. As Verizon Media and the industry expands more AdTypes will become available.

//Retrieve ad components
VASTextView callToAction = nativeAd.getText(myContext, "callToAction");
VASTextView title = nativeAd.getText(myContext, "title");
FrameLayout icon = nativeAd.getDisplayMedia(myContext, "iconImage");
// Etc...
//Retrieve ad components
VASTextView *ctaView = [self.nativeAd text:@"callToAction"];
VASTextView *titleView = [self.nativeAd text:@"title"];
VASDisplayMediaView *iconView = [self.nativeAd displayMedia:@"iconImage"];
// etc.
//Retrieve ad components
let bodyComponent = nativeAd.text("body")
let ctaComponent = nativeAd.text("callToAction")
// etc...

5. Display the ad

Once the ad components have been retrieved, styling can be applied and they can be laid out within the app based on any specific requirements. The components that are returned can be laid out and treated the same as their base class. Below is a chart that outlines the Component class and the class from which they were derived.

VAS Android iOS
VASTextView AppCompatTextView UITextView
VASDisplayMediaView FrameLayout UIView

VASTextView and VASDisplayMedia view can be configured and laid out using procedural or declarative layout methods in the same manner as the classes they are derived from.

For a complete example of implementing a Native Ad within an app, please review the sample application.