Native Integration

Introduction

With native ads being an opportunity for everyone in the advertising technology ecosystem, here is a handy primer on the subject and a guide to setting up native ads. For more in-depth info, please refer to the IAB’s Native Advertising Playbook resource.

The Benefits of Native Ads

Native ads are often heralded to be the future of digital and mobile advertising. The argument in favor of the format is that with sheer visibility is becoming less and less valuable, advertisement messaging should assume the look and feel of the content that users actively seek out. In short, it’s not enough for ads to be noticed. They also need to be perceived favorably. 

The most immediate benefit of native ads for publishers is higher eCPMs and thus higher revenues. Currently, mobile native ad inventory is priced at top-dollar rates compared to regular image ad placements.

Another advantage is an improved user experience, which manifests itself in prolonged user retainment and higher clickthrough rates.

Benefits for Publishers Benefits for Advertisers
  • More revenue
  • Higher eCPMs
  • Better user experience
  • Better engagement
  • Higher brand awareness
  • Better response in terms of clicks and conversions

The Challenges of Native Ads

Apart from potentially low fill rates (as the mobile native ads ecosystem isn’t highly populated yet), the technical realization of native ads in mobile is trickier than with other formats. Instead of one image creative plus a beacon call (as for image ads) needing to be called and displayed, a native ad contains multiple creative pieces. These pieces may vary but need to fit the requirements of the native ad property.

Although the IAB has defined several native ad layouts, the challenge of correctly formatting and displaying all included media generally remains. We’ll point out the specifics along the way.

Native Ad Layouts

Below are six ad formats that Smaato’s mobile native advertising solution offers.

Examples Descriptions

Content Wall

used in:

  • blogs
  • news and content-focused sites
  • search engines

App Wall

used in:

  • offer walls
  • app recommendation sites
  • app directories

News Feed

used in:

  • news sites
  • content feed sites
  • social media (text-focused)
  • search engines

Carousel

used in:

  • news/content sites
  • social media apps

Content Stream

used in:

  • social media (image-focused)

Native Ad Templates (SDK only)

Featured in our latest SDKs for iOS(8.0.4) and Android (5.0.2) are native ad templates for the aforementioned layouts.

The key benefit: You can start from a template instead of having to assemble the layouts individually. This can easily save you around 80% of setup time!

Android SDK Native Ad Format Integration

iOS SDK Native Ad Format Integration

SDK Integration for Native Adspaces

Android SDK Integration

In order to start using native ads, you will need to go through following steps :

  • Create all needed views (icon view, main image view, text views, rating bar, etc…)
  • Put your views together so that they look similar to your app content
  • Pass the views to our SDK
  • and start requesting

After you created all of the views, please proceed by passing the views to the Smaato SDK using the following code:

NativeAd nativeAd = new NativeAd(this);
nativeAd.setClickToActionButton(ctaButton).setIconImageView(iconImage)
                .setMainImageView(mainImage).setTextView(nativeText)
                .setTitleView(nativeTitle).setMainLayout(nativeRelativeLayout).setRatingBar(ratingBar);

Now, you can start requesting Ads by using the following method:

nativeAd.asyncLoadNewBanner();

After receiving the rendered Native Ad, you need to attach the native ad components and making them visible:

iconImage.setVisibility(View.VISIBLE);
mainImage.setVisibility(View.VISIBLE);
nativeText.setVisibility(View.VISIBLE);
ctaButton.setVisibility(View.VISIBLE);
nativeTitle.setVisibility(View.VISIBLE);
nativeRelativeLayout.setVisibility(View.VISIBLE);
ratingBar.setVisibility(View.VISIBLE);
  
// IMPORTANT step to be invoked after attaching the NativeAd. (SDK checks the native ad component visibility before firing Impression).
// IMPORTANT FOR IMPRESSIONS COUNTS & REVENUE.
nativeAd.registerImpression();

You can also get notified and know if we delivered an ad or not. To activate that, please let your activity implement our AdListenerInterface. Below is a sample code:

public class MyActivity implements AdListenerInterface

And of course, do not forget to register the listener by using the following code:

nativeAd.setAdListener(MyActivity);

Native Ad Templates

To start using native ad templates, you will need to go through the following steps : 

  • Create a RelativeLayout and set it as MainLayout.
  • Set the params (width & height without density, text size) to look similar to your App
  • Pass the NativeType to Smaato SDK and load new Ad
  • On successful ad response, the generated NativeLayout (RelativeLayout) will be available with its elements based on the NativeType ( TitleView, RatingStar, Click to Action Button, Icon).
// Step 1:Declare properties
NativeAd nativeAd;
RelativeLayout nativeRelativeLayout;
  
// Step 2: Instantiate & Configure mandatory parameters
nativeAd = new NativeAd(this);
nativeRelativeLayout = (RelativeLayout) findViewById(R.id.nativeAdLayout);
nativeAd.setMainLayout(nativeRelativeLayout);
nativeAd.getAdSettings().setPublisherId(0);  // replace with your PublisherId
nativeAd.getAdSettings().setAdspaceId(3075); // replace with your AdSpaceId
  
// Following are non mandatory formatting as per your app (look and feel) requirements.
nativeAd.setTitleTextSize(15);
nativeAd.setWidthWithoutDensity(80);  // density calculation happens inside SDK for icons width
nativeAd.setHeightWithoutDensity(80); // default value is 70*density
  
// Step 3: Initiate new ad request by sending required NativeType and attach the Ad response using nativeAd.bindAdResponse(nativeView); 
 nativeAd.asyncLoadNativeType(NativeAd.NativeType.APP_WALL, new NativeAd.NativeAdTypeListener() {
   @Override
   public void onError(ErrorCode errorCode, String errorMessage) {     
      Log.e("OnErrorResponse", errorMessage); // No Ad Response is fine. Check for errorCode & errorMessage.
   }
 
    @Override
   public void onAdResponse(ViewGroup createdNativeLayout) {
         // if required, configure & format individual element of the generated Layout element before binding.
         //nativeAd.getIconImageView().setBackgroundColor(Color.BLUE); 
         nativeAd.getTitleView().setTextColor(Color.BLUE);
         // IMPORTANT FOR IMPRESSION COUNT & BEACONS. Invoke bindAdResponse only after attaching mainLayout with visibility (VISIBLE).
         nativeAd.bindAdResponse(createdNativeLayout);
      }
});

Integrating Other Templates (i.e., NativeLayout Types):

These implementation steps are similar for all other native layout types. Please Note: NativeCarousel supports an ArrayList of ImageViews and accessible through nativeAd.getCarouselImages(). 

To do this, send the required native type to the method this nativeAd.asyncLoadNativeType.

The SmaatoDemoApp has sample implementations of all the native layouts.

iOS SDK Integration

For Native ads, the publishers just need to supply different UI components to the SDK to perform the final rendering. However, it is recommended that all UI components should be added to a dedicated UIView container to handle the clicks by the SDK.

Only when the container is registered with the SDK, the ad will be visible, clicks are enabled and beacons are called.

Example Code:


// Step 1: Declare a property in the view controller header:
@property SOMANativeAd* nativeAd;
// Step 2: Instantiate:
self.nativeAd = [[SOMANativeAd alloc] initWithPublisherId:@"0" adSpaceId:@"0"];
self.nativeAd.delegate = self;
  
// Step 3: Configure UI components
self.nativeAd.labelForTitle = self.title; // an UILable instance to render the title
self.nativeAd.labelForDescription = self.text; // an UILable instance to render the description
self.nativeAd.imageViewForIcon = self.icon; // an UIImageView instance to render the icon
self.nativeAd.imageViewForMainImage = self.photo; // an UIImageView instance to render the big image
 
// Step 4: Load the ad
[self.nativeAd load];
  
// Stop 5: Once the ad is loaded, make the final configuration and then register the container
- (void)somaAdViewDidLoadAd:(SOMAAdView*)adview{
- (void)somaNativeAdDidLoad:(SOMANativeAd*)nativeAd{
    self.callToAction.text = nativeAd.callToAction; // UILable instance for the "call-to-action" e.g. Install, Visit etc.
    [self updateRating:nativeAd.rating]; // Optional: native ad comes with a floating point rating e.g. 4.5. Typically shown in stars.
 
 
    // Finally, register the container. Make sure all the native ad UI components are children to this container view.
    [nativeAd registerViewForUserInteraction:self.container];
 
}

Native Response

Below you will find an example JSON response examples for native ads (example also includes image, rich media.)

Example Native Ad Response:

{
   "native":{
      "ver": "1.2",
      "link":{
         "url":"http: //i.am.a/URL",
         "clicktrackers" :[
            "http://www.mytracker.com/clicktracker01",
            "http://www.mytracker.com/clicktracker02"
        ]
      },
      "assets":[
         {
            "id":123,
            "required":1,
            "title":{
               "text":"Learn about this awesome thing"
            }
         },
         {
            "id":124,
            "required":1,
            "img":{
               "url":"http://www.myads.com/thumbnail1.png"
            }
         },
         {
            "id":128,
            "required":1,
            "img":{
               "url":"http://www.myads.com/largethumb1.png",
               "w": 800,
               "h": 600
            }
         },
         {
            "id":126,
            "required":1,
            "data":{
               "value":"My Brand"
            }
         },
         {
            "id":127,
            "required":1,
            "data":{
               "value":"Learn all about this awesome story of someone using my product."
            }
         }
      ],
      "eventtrackers":[
         {
            "event":1,
            "method":1,
            "url":"http://www.mytracker.com/impressiontracker01"
         },
         {
            "event":1,
            "method":1,
            "url":"http://www.mytracker.com/impressiontracker02"
         }
      ]
   }
}

No Ad/Error Response and Response Headers

VAST No Ad Available Response:

<VAST version="2.0"/>

Native Ads FAQ

How can I as a publisher integrate native ad placement?

To display native ads on your app or site, you will need two things:

  • A native adspace defined in your SPX account
  • A mobile native ad placement in your actual property.

How can I get my native adspace IDs in SPX?

Head over to your SPX account, https://spx.smaato.com.

When you are logged in, go to Inventory and either choose an App from the list that you have already set up or created a new App by clicking on + New App.

For an existing App, click on + New Adspace next. On the Create New Adspace screen, select Native as an Ad Format – the Dimension drop-down will change to Layout. Using Layout, you can either specify your Adspace to be one of the pre-defined layouts or create a custom one.

For a New App, under “Define Adspaces” select native as an ad format – the dimension drop-down will change to layout. Using layout, you can either specify your adspace to be one of the pre-defined layouts or create a custom one.

When you’re done, you will receive your Publisher and Adspace ID.

Native adspaces in your mobile app/site

So far, integrating mobile native ads is only possible via SDK (iOS and Android).

Android SDK Ad Formats

iOS SDK Ad Formats

Modified: August 1, 2019 at 12:21 pm