Ad slider

Native advertising is a type of ad whose layout can be defined at the app level. This feature allows you to change the visual style of ads and their placement, in the context of the app design specifics.

Ad rendering is performed with native platform tools, which enhances ad performance and quality.

Native ads enhance the overall ad experience, so you can show more ads while keeping users engaged. In the long run, this allows you to maximize your advertising revenue.

Prerequisite

  1. Follow the SDK integration steps described under Quick start.
  2. First, you need to initialize the advertising SDK.
  3. Make sure you're using the latest version of the Yandex Mobile Ads SDK, and if you're using mediation, update to the most recent version of the unified build.

Implementation

Key steps for integrating native ads (slider):

  • Create and configure the SliderAdLoader ad loader.
  • Register the ad loader event listener: SliderAdLoadListener.
  • Load the ad.
  • Render the loaded ad.

Specifics of native ad integration

  1. All calls to Yandex Mobile Ads SDK methods must be made from the main thread.

  2. If the onAdFailedToLoad() callback returns an error, don't try to load a new ad again. If there's no other option, limit the number of ad load retries. This will help avoid constant unsuccessful requests and connection issues if there are limitations.

  3. We recommend keeping a strong reference to the SliderAd ad object and its loader SliderAdLoader throughout the lifecycle of the screen hosting interaction with the ad.

  4. Once the slider is loaded, you must render all its assets. You can get the list of assets available in the ad from the SliderAd object.

  5. The slider contains a set of ads, each of which needs to be displayed.

  6. Each ad within the slider contains a set of assets. You can get the list of available ad assets from the NativeAd advertising object. All required ad assets need to be rendered. You can find a description of ad assets on the Native ad assets page.

  7. The size of the ad container should be based on the ad content.

  8. Ads in the slider must be displayed within the same shared container: otherwise, ad impressions won't count.

  9. Video ads usually yield the best results. To display video ads, the size of the ad container and the MediaView component must be at least 300 × 160 dp (density-independent pixels).

  10. We recommend using a layout that includes all the possible components. In practical terms, such layouts result in higher conversion rates.

Loading the slider

To load the native ad slider, create a SliderAdLoader object.

The ad request parameters are configured via the NativeAdRequestConfiguration.Builder class object. In request parameters, you can pass ad unit ID, image loading method, age, gender attributes, and other data that can make impressions more relevant.

To receive notifications with ad loading results, create a SliderAdLoadListener instance. Set this instance to listen to events of ad slider loader.

To load the ad, call the loadAd() method.

The example below shows how to load native ads from Activity:

class SliderNativeAdActivity : AppCompatActivity(R.layout.activity_slider_native_ad) {

    private val nativeAdView get() = binding.nativeAd.root

    private var sliderAdLoader: SliderAdLoader? = null

    private lateinit var binding: ActivityCustomNativeAdBinding

    override fun onCreate(savedInstanceState: Bundle?){
        super.onCreate(savedInstanceState)
        binding = ActivityCustomNativeAdBinding.inflate(layoutInflater)
        setContentView(binding.root)

        sliderAdLoader = createSliderAdLoader()
        sliderAdLoader?.loadSlider(
            // Methods in the NativeAdRequestConfiguration.Builder class can be used here to specify individual options settings.
            NativeAdRequestConfiguration.Builder("your-ad-unit-id").build()
        )
    }

    private fun createSliderAdLoader(): SliderAdLoader{
        return sliderAdLoader ?: SliderAdLoader(this).apply{
            setSliderAdLoadListener(object : SliderAdLoadListener{
                override fun onSliderAdLoaded(p0: SliderAd){
                    // The slider ad was loaded successfully. Now you can show loaded ads.
                }

                override fun onSliderAdFailedToLoad(p0: AdRequestError){
                    // Ad failed to load with AdRequestError.
                    // Attempting to load a new ad from the onAdFailedToLoad() method is strongly discouraged.
                }
            })
        }
    }
}

class CustomSliderNativeAdActivity extends AppCompatActivity {
    private NativeAdView mNativeAdView = mBinding.nativeAd.getRoot();

    @Nullable
    private SliderAdLoader mSliderAdLoader = null;

    private ActivityCustomNativeAdBinding mBinding;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        mBinding = ActivityCustomNativeAdBinding.inflate(getLayoutInflater());
        setContentView(mBinding.getRoot());

        mSliderAdLoader = createSliderAdLoader();
        if (mSliderAdLoader != null){
            // Methods in the NativeAdRequestConfiguration.Builder class can be used here to specify individual options settings.
            mSliderAdLoader.loadSlider(
                    new NativeAdRequestConfiguration.Builder("your-ad-unit-id").build()
            );
        }
    }

    private SliderAdLoader createSliderAdLoader(){
        if (mSliderAdLoader != null){
            return mSliderAdLoader;
        }

        final SliderAdLoader newSliderAdLoader = new SliderAdLoader(this);

        newSliderAdLoader.setSliderAdLoadListener(new SliderAdLoadListener(){
            @Override
            public void onSliderAdLoaded(@NonNull SliderAd sliderAd){
                // The slider ad was loaded successfully. Now you can show loaded ads.
            }

            @Override
            public void onSliderAdFailedToLoad(@NonNull final AdRequestError error){
                // Ad failed to load with AdRequestError.
                // Attempting to load a new ad from the onAdFailedToLoad() method is strongly discouraged.
            }
        });
        return mSliderAdLoader;
    }
}

Rendering a native ad slider

Once the slider is loaded, you must render all its assets.

A successfully loaded slider contains one or more native ads having the same context. Ads in the slider must be displayed within the same shared container: otherwise, ad impressions won't count.

There are two ways to configure the slider layout:

  • Layout using a template
  • Manual setup for the layout of the native ads slider

Layout using a template

The easiest way to work with a native ad slider is to use a standard layout template since you only need a few lines of code in the basic version.

The template already includes a full set of necessary ad assets and defines their relative placement. The template is compatible with any supported type of native ads.

Making a slider using a template is easy. Link the SliderAd object to the root NativeAdView container and link all the ads in the slider to the template.

Sample code
private fun showAd(sliderAd: SliderAd) {
    try{
        val sliderViewBinder = NativeAdViewBinder.Builder(sliderAdView).build()
        sliderAd.bindSliderAd(sliderViewBinder)
        val nativeAds = sliderAd.nativeAds
        for (nativeAd in nativeAds){
            val nativeBannerView = NativeBannerView(this)
            nativeBannerView.setAd(nativeAd)
            sliderAdView.addView(nativeBannerView)
        }
    } catch (exception: NativeAdException){
        //log error
    }
}

private void showAd(@NonNull final SliderAd sliderAd) {
    try{
        final NativeAdViewBinder sliderViewBinder = new NativeAdViewBinder.Builder(mSliderAdView).build();
        sliderAd.bindSliderAd(sliderViewBinder);

        final List<NativeAd> nativeAds = sliderAd.getNativeAds();
        for (final NativeAd nativeAd : nativeAds){
            final NativeBannerView nativeBannerView = new NativeBannerView(this);
            nativeBannerView.setAd(nativeAd);
            mSliderAdView.addView(nativeBannerView);
        }
    } catch (final NativeAdException exception){
        //log error
    }
}

You can customize the native ad slider template. To learn more about this, see Setting up the layout using a template.

Manual setup for the layout of the native ads slider

When the template settings aren't enough to get what you're looking for, you can configure the layout for your native ad slider manually.

With this method, you can arrange the slider for your native ads by positioning ad components relative to each other. The ad may include both required and optional assets for display. For the full list, see Native ad assets.

Tip

For each ad in the slider, we recommend using a layout that includes a complete set of possible assets. In practical terms, such layouts result in higher conversion rates.

Link the SliderAd object to the root NativeAdView object and link each ad in the slider to the child NativeAdView object.

Each ad in the slider is laid out using a standard native advertising layout method.

Sample code
private fun showAd(sliderAd: SliderAd) {
    try{
        val sliderViewBinder = NativeAdViewBinder.Builder(sliderAdView).build()
        sliderAd.bindSliderAd(sliderViewBinder)
        val nativeAds = sliderAd.nativeAds
        for (nativeAd in nativeAds){
            val nativeAdView: NativeAdView =
                mLayoutInflater.inflate(R.layout.widget_native_ad, sliderAdView, false)
            val viewBinder = NativeAdViewBinder.Builder(nativeAdView)
                .setAgeView(age)
                .setBodyView(body)
                .setCallToActionView(callToAction)
                .setDomainView(domain)
                .setFaviconView(favicon)
                .setFeedbackView(feedback)
                .setIconView(icon)
                .setMediaView(media)
                .setPriceView(price)
                .setRatingView(rating)
                .setReviewCountView(reviewCount)
                .setSponsoredView(sponsored)
                .setTitleView(title)
                .setWarningView(warning)
                .build()
            nativeAd.bindNativeAd(viewBinder)
            sliderAdView.addView(nativeAdView)
        }
    } catch (exception: NativeAdException){
        //log error
    }
}

private void showAd(@NonNull final SliderAd sliderAd) {
    try{
        final NativeAdViewBinder sliderViewBinder = new NativeAdViewBinder.Builder(mSliderAdView).build();
        sliderAd.bindSliderAd(sliderViewBinder);
        final List<NativeAd> nativeAds = sliderAd.getNativeAds();
        for (final NativeAd nativeAd : nativeAds){
            final NativeAdView nativeAdView = mLayoutInflater.inflate(R.layout.widget_native_ad, mSliderAdView, false);
            final NativeAdViewBinder viewBinder = new NativeAdViewBinder.Builder(nativeAdView)
                    .setAgeView(age)
                    .setBodyView(body)
                    .setCallToActionView(callToAction)
                    .setDomainView(domain)
                    .setFaviconView(favicon)
                    .setFeedbackView(feedback)
                    .setIconView(icon)
                    .setMediaView(media)
                    .setPriceView(price)
                    .setRatingView(rating)
                    .setReviewCountView(reviewCount)
                    .setSponsoredView(sponsored)
                    .setTitleView(title)
                    .setWarningView(warning)
                    .build();

            nativeAd.bindNativeAd(viewBinder);
            mSliderAdView.addView(nativeAdView);
        }
    } catch (final NativeAdException exception){
        //log error
    }
}

Testing the integration of the native ad slider

Using demo ad units for ad testing

We recommend using test ads to test your native ad slider integration and your app itself.

To guarantee that test ads are returned for every slider request, we created a special demo ad placement ID. designed to help you test your ad integration.

Demo adUnitId for the native ad slider: demo-native-slider-yandex.

Warning

Before publishing your app in the store, make sure to replace the demo placement ID with the real ID you obtained in the interface Boost.

Testing ad integration

You can check your native ad slider integration using the SDK's built-in analyzer.

The tool makes sure the slider is integrated properly and outputs a detailed report to the log. To view the report, search the keyword “YandexAds” in Logcat, a tool for debugging Android apps.

adb logcat -v brief '*:S YandexAds'

If the integration is successful, the following message is returned:

adb logcat -v brief '*:S YandexAds'
mobileads$ adb logcat -v brief '*:S YandexAds'
I/YandexAds(13719): [Integration] Slider native ad was integrated successfully

If you're having problems integrating your native ad slider, you'll get a detailed report on the issues and recommendations for how to fix them.

Previous
Native ad assets
Next
Requirements for ad assets and ad placement