Get Started with Avocarrot

Overview

Examples

Android

Overview

- Avocarrot Exchange SDK

Setup Exchange SDK

Stream

Native Assets

Exchange Troubleshooting

- Avocarrot Mediation SDK

Setup Mediation

Stream Ads Mediation

Native ads Mediation

Native Assets Mediation

Banner Mediation

Interstitial Mediation

Video Mediation

Supported Networks & Ad Types

Mediation Troubleshooting

iOS

Overview

- Avocarrot Exchange SDK

Setup SDK

Stream

Native Assets

Exchange Troubleshooting

- Avocarrot Mediation

Getting Started With Mediation

Stream Ads Mediation

Native Ads Mediation

Banner Ads Mediation

Interstitial Ads Mediation

Video Ads Mediation

Supported Networks & Ad Types

Mediation Troubleshooting

API Documentation

Reporting API

Help

FAQ

Updates

SDK Change Log

Android Change Log

iOS Change Log

Native ads Mediation

Updated a few seconds ago ​by Hyemin Kim

Overview

This tutorial helps you setup Native  Ads mediation.

A native ad is a raw representation of an ad with a wrapping UI. The UI can use pre-defined templates from SDK (ListNativeAdViewFeedNativeAdViewGridNativeAdView) or defined manually by the publisher (Layout xml or Java code).

Prerequisites

You need an Avocarrot account to complete the tutorial. Create an account
You need to setup the Mediation SDK. Setup Mediation SDK

Setup Native Ads

All SDK method calls should be done from the main thread (Main thread, UI thread).

ID of advertising space for testing (like for native ad): "e5cc8e6d-d674-402a-aeca-eda7856bd7af"

The ID above is meant for testing purpose only, please replace it with the Ad unit Id of your placement on dashboard.

To show native ads you can use two methods:

  • Create an ad view programmatically from template and add it to the screen.
  • Add NativeAdView view in the layout and bind loaded data to this view.
  1. Native ads are loaded via the NativeAd class. NativeAdView is a ViewGroup that provides representation of NativeAd. To configure NativeAdView you can set NativeAdView.Builder and NativeAdView.Attributes to customize it during creation:
    NativeAd nativeAd = NativeAdPool.load(context, YOUR_NATIVE_AD_UNIT_ID, ListNativeAdView.BUILDER, adViewAttributes, nativeAdListener);
    Every template has a label that clearly indicates that it is an ad. For example “Ad” or “Sponsored”.
    Avocarrot Mediation SDK provides 5 types of templates for native ads
    • FeedNativeAdView – Icon, title, description, star rating, and CTA button
    • ListNativeAdView – Icon, image/video/carousel, title, description, star rating, and CTA button
    • GridNativeAdView – Icon, image/video/carousel, title, description, star rating, and CTA button
    • DynamicNativeAdView – Special template for using with Template Service in Avocarrot Dashboard.
    • FullscreenNativeAdView – Fullscreen template to make your Native Ad looks like Interstitial Ad. Available only to use with single NativeAd only.
    GridNativeAdView is currently available for RecyclerView with two columns only.

    If you want to use one of these templates, you can add the selected template in the creation of the NativeAd:


    .setAdViewBuilder(ListNativeAdView.BUILDER);

    Add a banner place to layout, e.g.:


    <Framelayout 
      android:id="@+id/ad_container" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:visibility="gone"/>

    When the NativeAd downloading is completed, you can display the banner by calling renderAdView() method.


    adContainerView = (FrameLayout) view.findViewById(R.id.ad_container);
    @Override
    public void onAdLoaded() {
      adContainerView.setVisibility(View.VISIBLE);
      adContainerView.removeAllViews();
      adContainerView.addView(nativeAd.renderAdView());
    }
    You can further customize the templates to match the look and feel of your app. See the Advanced Customization section .
    In order to create custom native ads ui, you will need to go through following steps:
    • Create all needed views (icon view, main image view, text views, rating bar etc…)
    • Pass the views to our SDK
    You can either create your custom views in a layout.xml, or you can add elements in the code. All views should be placed in one child;  this child itself should be placed in NativeAdView.
     
    <com.avocarrot.sdk.nativead.NativeAdView android:id="@+id/native_ad"
     ...>
        <RelativeLayout ...>
            <ImageView android:id="@+id/native_ad_icon"
              ... />
            <ImageView android:id="@+id/native_ad_cover_image"
              ... />
            <FrameLayout android:id="@+id/native_ad_media_container"
              ... />
            <TextView android:id="@+id/native_ad_title"
              ... />
            <TextView android:id="@+id/native_ad_text"
              ... />
            <RatingBar android:id="@+id/native_ad_star_rating"
              ... />
            <Button android:id="@+id/native_ad_call_to_action"
              ... />
            <TextView android:id="@+id/native_ad_attribution"
              ... />
            <ImageView android:id="@+id/native_ad_choices_icon"
              android:layout_width="40dp"
              android:layout_height="40dp"
              android:padding="10dp"
              ... />
            <FrameLayout
              android:id="@+id/native_ad_choices_container"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:minHeight="20dp"
              android:minWidth="20dp"
              ... />
        </RelativeLayout>
    </com.avocarrot.sdk.nativead.NativeAdView>
    adView = (NativeAdView) view.findViewById(R.id.native_ad);
    adView.setIconView(R.id.native_ad_icon);
    adView.setCoverImageView(R.id.native_ad_cover_image);
    adView.setMediaContainerView(R.id.native_ad_media_container);
    adView.setTextView(R.id.native_ad_text);
    adView.setTitleView(R.id.native_ad_title);
    adView.setCallToActionView(R.id.native_ad_call_to_action);
    adView.setStarRatingView(R.id.native_ad_star_rating);
    adView.setAdAttributionView(R.id.native_ad_attribution);
    adView.setAdChoiceIconView(R.id.native_ad_choices_icon);
    adView.setAdChoiceContainerView(R.id.native_ad_choices_container);
    NativeAdConfig.Builder adConfig = new NativeAdConfig.Builder().setAdView(adView);NativeAdConfig.Builder adConfig = new NativeAdConfig.Builder().setAdViewBuilder(ListNativeAdView.BUILDER);
  2. After calling the  reloadAd()   method, the ad download starts. If you call   reloadAd()   again before the NativeAd is fully served, new request processing is ignored. In this case, only the last request will be processed.
    To learn about download completion, subscribe to ad events (see Ad Events Handling section) or call method   isReady().

    nativeAd.isReady();

    Activity lifecycle events handling

    onPause()onResume() and onDestroy() methods should be called depending on the activity lifecycle events.

    Example:
    @Override
    protected void onPause() {
        super.onPause();
        nativeAd.onActivityPaused();
    }
    @Override
    protected void onResume() {
        super.onResume();
        nativeAd.onActivityResumed();
    }
    @Override
    protected void onDestroy() {
        super.onDestroy();
        nativeAd.destroy();
    }
  3. Congratulations! Compile and Run your project. You can now customize your native ads to match the look and feel of your app.

Advanced Customization

Customize Native Template 

With a native template, you can customize the following elements:

  1. Title
    • Text font (DEFAULT, DEFAULT_BOLD, MONOSPACE, SANS_SERIF, SERIF)
    • Text size
    • Text color
    • Max Ems (25 by default)
  2. Icon
    • Dimensions(width, height)
    • Margins (left, right)
  3. Star rating
    • Star size (SMALL, MEDIUM, LARGE)
  4. Attribution label
    • Default text
    • Text font (DEFAULT, DEFAULT_BOLD, MONOSPACE, SANS_SERIF, SERIF)
    • Text size
    • Text color
  5. Cover image
    • Background color
    • Background resource
    • Margins (left, right, bottom, top)
    • Alignment (undefine, top, bottom, left, right, center, center_vertical, center_horizontal)
  6. Description
    • Text font (DEFAULT, DEFAULT_BOLD, MONOSPACE, SANS_SERIF, SERIF)
    • Text size
    • Text color
    • Margins (left, right)
    • Max Ems (100 by default)
  7. Call To Action button
    • Default text
    • Text font (DEFAULT, DEFAULT_BOLD, MONOSPACE, SANS_SERIF, SERIF)
    • Text size
    • Text color
    • Max Ems (25 by default)
    • Background color
    • Background resource
    • Margins (left, right)

In order to customize these elements, you will need to build an attributes object and provide the following in the creation of the NativeAd:

NativeAdView.Attributes adViewAttributes = new NativeAdView.Attributes(this)
    .setTitle(new NativeAdView.Attributes.Setter<nativeadview.attributes.title>() {
        @Override
            public NativeAdView.Attributes.Title set(@NonNull NativeAdView.Attributes.Title builder) {
                return builder
                        .setTypeface(Typeface.MONOSPACE)
                        .setTextColor(Color.RED)
                        .setMaxLengthEms(20);
            }
    })
    .setStarRating(new NativeAdView.Attributes.Setter<nativeadview.attributes.starrating>() {
        @Override
        public NativeAdView.Attributes.StarRating set(@NonNull NativeAdView.Attributes.StarRating builder) {
            return builder.setStarRatingStyle(NativeAdView.Attributes.StarRating.Style.MEDIUM);
        }
    })
    .setAdAttribution(new NativeAdView.Attributes.Setter<nativeadview.attributes.adattribution>() {
        @Override
        public NativeAdView.Attributes.AdAttribution set(@NonNull final NativeAdView.Attributes.AdAttribution adAttribution) {
            return adAttribution.setDefaultText(R.string.sponsored);
        }
    })
NativeAd nativeAd = NativeAdPool.load(context, YOUR_NATIVE_AD_UNIT_ID, ListNativeAdView.BUILDER, adViewAttributes, nativeAdListener);


Also, you can set the style of your NativeAdView layout by using following attributes:

Attribute NameFormatDescription
Title  
ampiriTitleTextFontDEFAULT, DEFAULT_BOLD, MONOSPACE, SANS_SERIF, SERIFFont of the Title text
ampiriTitleTextSizereference,dimensionSize of the Title text
ampiriTitleTextColorreference,colorColor of the Title text
ampiriTitleTextMaxLengthEmsintegerMaximum Ems of the Title text
Icon  
ampiriIconWidthreference,dimensionIcon view width
ampiriIconHeightreference,dimensionIcon view height
ampiriIconMarginLeftreference,dimensionIcon view left margin
ampiriIconMarginRightreference,dimensionIcon view right margin
Star Rating  
ampiriStarRatingSizeSMALL, MEDIUM, LARGESize of the rating bar stars. SMALL – 10dp for height and width, MEDIUM – 16dp, LARGE – 22dp
Ad Attribution  
ampiriAdAttributionTextFontDEFAULT, DEFAULT_BOLD, MONOSPACE, SANS_SERIF, SERIFFont of the Attribution label text
ampiriAdAttributionTextSizereference,dimensionSize of the Ad Attribution text
ampiriAdAttributionTextColorreference,colorColor of the Ad Attribution text
ampiriAdAttributionDefaultTextreference,stringDefault Ad Attribution text
Cover Image  
ampiriCoverImageBackgroundColorreference,colorCover Image background color
ampiriCoverImageBackgroundResourcereferenceCover Image background resource
ampiriCoverImageMarginLeftreference,dimensionCover Image left margin
ampiriCoverImageMarginRightreference,dimensionCover Image right margin
ampiriCoverImageMarginTopreference,dimensionCover Image top margin
ampiriCoverImageMarginBottomreference,dimensionCover Image bottom margin
ampiriCoverImageAlignmentundefine, top, bottom, left, right, center, center_vertical, center_horizontalCover Image alignment within the NativeAd view
Description  
ampiriDescriptionTextFontDEFAULT, DEFAULT_BOLD, MONOSPACE, SANS_SERIF, SERIFFont of the Description text
ampiriDescriptionTextSizereference,dimensionSize of the Description text
ampiriDescriptionTextColorreference,colorColor of the Description text
ampiriTitleTextMaxLengthEmsintegerMaximum Ems of the Description text
ampiriDescriptionMarginLeftreference,dimensionDescription view left margin
ampiriDescriptionMarginRightreference,dimensionDescription view right margin
Call To Action  
ampiriCallToActionBackgroundColorreference,colorColor of the Call To Action button
ampiriCallToActionTextFontDEFAULT, DEFAULT_BOLD, MONOSPACE, SANS_SERIF, SERIFFont of the Description text
ampiriCallToActionTextSizereference,dimensionSize of the Call To Action button text
ampiriCallToActionTextColorreference,colorColor of the Call To Action button text
ampiriCallToActionMarginLeftreference,dimensionCall To Action button view left margin
ampiriCallToActionMarginRightreference,dimensionCall To Action button view right margin
ampiriCallToActionMarginTopreference,dimensionCall To Action button view top margin
ampiriCallToActionMarginBottomreference,dimensionCall To Action button view bottom margin
ampiriCallToActionDefaultTextreference,stringDefault Call To Action text


You can set this attributes in your custom NativeAdView layout

<com.ampiri.sdk.banner.NativeAdView android:id="@+id/native_ad"
    app:ampiriTitleTextFont="MONOSPACE"
    app:ampiriIconWidth="42dp"
    app:ampiriIconHeight="42dp"
    app:ampiriCallToActionTextColor="@android:color/lighter_gray"
 ...>

Setting User Data

To pass user data to the Avocarrot Mediation SDK, use the following static methods:

Avocarrot.setUserBirthday(data);
Avocarrot.setUserGender(UserData.Gender.FEMALE);
Avocarrot.setUserInterests(Arrays.asList("football", "auto", "cats")); // Just for example. Please set real interests.

Ad Networks Settings

Admob

Avocarrot.addMediationAdapter(new AdMobMediation.Builder()
    .addTestDevice("HASHED_ID")
    .build());

Facebook

Avocarrot.addMediationAdapter(new FacebookMediation.Builder()
    .addTestDevice("HASHED_ID")
    .build());

AdColony

Avocarrot.addMediationAdapter(new AdColonyMediation.Builder()
    .setStore("Amazon")
    .build());

InLocoMedia

Avocarrot.addMediationAdapter(new InLocoMediaMediation.Builder()
    .addTestDevice("HASHED_ID")
    .build());

Go Live!

  1. Remove sandbox If you have received a sample ad then simply disable the Sandbox mode by including the following instruction in your code:
    AvocarrotSDK.setTestMode(false);
    You should disable Sandbox mode ONLY when you are done with the integration and you are ready to publish your app. It is against Avocarrot's policies to use live ads during development, and doing so could get your Avocarrot account banned.
  2. Publish app You are now ready to upload your app and start making money! If you have submitted your app in the Google Play/ Apple Store and you can see live ads, then you have nothing to worry about. Just wait until the impressions threshold has been reached and the app will be shown as live in your dashboard as well.
  3. Update payment details. Login to your account and update your payment settings.



Was this article useful?