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 types of components are:

  • NativeTextComponent - This is a view that contains text.
  • NativeImageComponent - This is a view that contains an image.
  • NativeVideoComponent - This is a view that contains a video.

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()
Kotlin adType: String!
iOS (NSString*) adType
Swift adType: String

At present, the only Native Ad Type supported by the Verizon Ads SDK is “inline” which has a 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 an ad impressions.

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

Accessing Components

There is one method for accessing components. After accessing the component, it can be cast to its specific component type if desired.

Accessing Native Components

Component  getComponent(final Context context, final String componentId)
fun getComponent(context: Context!, componentId: String!): Component!
- (nullable id<VASComponent>)component:(NSString *)componentId;
func component(componentId : String) -> VASComponent?

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.

NativeTextComponent callToAction = (NativeTextComponent) nativeAd.getComponent(context, "callToAction");
NativeTextComponent title = (NativeTextComponent) nativeAd.getComponent(context, "title");
NativeImageComponent icon = (VASNativeImageComponent) nativeAd.getComponent(context, "iconImage");
val callToAction = nativeAd!!.getComponent(context, "callToAction") as? NativeTextComponent
val title = nativeAd!!.getComponent(context, "title") as? NativeTextComponent
val icon = nativeAd!!.getComponent(context, "iconImage") as? VASNativeImageComponent
VASNativeTextComponent *ctaComponent = (VASNativeTextComponent *)[self.nativeAd component:@"callToAction"];
VASNativeTextComponent *titleComponent = (VASNativeTextComponent *)[self.nativeAd component:@"title"];
VASNativeImageComponent *iconComponent = (VASNativeImageComponent *)[self.nativeAd component:@"iconImage"];
let ctaComponent = nativeAd.component("callToAction") as? VASNativeTextComponent
let titleComponent = nativeAd.component("title") as? VASNativeTextComponent
let iconComponent = nativeAd.component("iconImage") as? VASNativeImageComponent

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, get the associated view, and add the view 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.Component;
import com.verizon.ads.nativeplacement.NativeAd;
import com.verizon.ads.nativeplacement.NativeAdFactory;
import com.verizon.ads.verizonnativecontroller.NativeImageComponent;
import com.verizon.ads.verizonnativecontroller.NativeTextComponent;
//Required Verizon Ads SDK imports for native ads
import com.verizon.ads.Component
import com.verizon.ads.nativeplacement.NativeAd
import com.verizon.ads.nativeplacement.NativeAdFactory
import com.verizon.ads.verizonnativecontroller.NativeImageComponent
import com.verizon.ads.verizonnativecontroller.NativeTextComponent
//Required Verizon Ads SDK imports for native ads
#import <VerizonAdsCore/VASComponent.h>
#import <VerizonAdsNativePlacement/VASNativeAd.h>
#import <VerizonAdsNativePlacement/VASNativeAdFactory.h>
#import <VerizonAdsVerizonNativeController/VASNativeTextComponent.h>
#import <VerizonAdsVerizonNativeController/VASNativeImageComponent.h>
//Required Verizon Ads SDK imports for native ads
import VerizonAdsCore
import VASNativeAd
import VerizonAdsNativePlacement
import VerizonAdsVerizonNativeController

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
val myAdTypes = arrayOf("inline")
this.nativeAdFactory = 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
    override fun 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
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(final NativeAd nativeAd, final Component component) {
       Log.i(TAG, "Native ad was clicked");
}
//etc...
//Native ad callbacks
override fun onClicked(nativeAd: NativeAd, component: Component) {
       Log.i(TAG, "Native ad was clicked")
}
//etc...
//Native ad callbacks
-(void)nativeAdClicked:(nonnull VASNativeAd *)nativeAd withComponent:(nonnull id<VASComponent>)component
{
    NSLog(@"Native ad was clicked");
}
// etc...
//Native ad callbacks
func nativeAdClicked(_ nativeAd:VASNativeAd, with component:VASComponent)
    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 Native Ad Type that is returned. At present, the only supported Native Ad Type is “inline.” As Verizon Media and the industry expands more Native Ad Types will become available.

//Retrieve ad components
NativeTextComponent callToAction = (NativeTextComponent) nativeAd.getComponent(context, "callToAction");
NativeTextComponent title = (NativeTextComponent) nativeAd.getComponent(context, "title");
NativeImageComponent icon = (NativeImageComponent) nativeAd.getComponent(context, "iconImage");
// Etc...
//Retrieve ad components
val callToAction = nativeAd!!.getComponent(this, "callToAction") as? NativeTextComponent
val title = nativeAd!!.getComponent(this, "title") as? NativeTextComponent
val icon = nativeAd!!.getComponent(this, "iconImage") as? NativeImageComponent
// Etc...
//Retrieve ad components
VASNativeTextComponent *ctaComponent = (VASNativeTextComponent *)[self.nativeAd component:@"callToAction"];
VASNativeTextComponent *titleComponent = (VASNativeTextComponent *)[self.nativeAd component:@"title"];
VASNativeImageComponent *iconComponent = (VASNativeImageComponent *)[self.nativeAd component:@"iconImage"];
// etc.
//Retrieve ad components
let ctaComponent = nativeAd.component("callToAction") as VASNativeTextComponent
let titleComponent = nativeAd.component("title") as VASNativeTextComponent
let iconComponent = nativeAd.component("iconImage") as VASNativeImageComponent
// 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. In order to retrieve the actual view for a component, you must call getView (Android) or access the view property (iOS) prior to attaching the view.

View callToActionView = callToActionTextComponent.getView(context);
val callToActionView = callToActionTextComponent?.getView(context)
 let view = (nativeAd?.component("body") as? VASNativeTextComponent)?.view
var view: UIView?

6. Android Only - Destroy the ad

When the ad instance is no longer needed or when the activity is finished, the instance must be destroyed to free up resources.

//Destroy the ad
nativeAd.destroy()
//Destroy the ad
nativeAd?.destroy()

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