Ad slider

Native advertising is an ad type where the layout can be defined on the app side. This feature allows you to change the visual style of ads and their placement, considering the app design specifics.

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

Native ads enhance the ad experience. As a result, you can display more ads without losing user interest. This ensures maximum revenue from advertising in the long run.

Prerequisite

1. Follow the SDK integration steps described in Quick start.
2. Initialize your ad SDK in advance.
3. Make sure you're running the latest Yandex Mobile Ads SDK version. If you're using mediation, make sure you're also running the latest 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.
• Display the loaded ad.

Features of native ad integration

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

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

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 components available in the ad from the NativeAd ad object. All required ad assets need to be rendered. You can find a description of ad assets on the Native ad assets page.

7. We recommend calculating the size of the ad container 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. Ads with video typically perform better. To display video ads, the size of the ad container and the MediaView component should be at least 300x160 dp (density-independent pixels).

10. We recommend that you use a layout that includes the complete set of possible assets. In our experience, layouts that include the entire set of assets convert better.

Loading the slider

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

Ad request parameters are configured using the NativeAdRequestConfiguration.Builder class object. As the request parameters, you can use the ad unit ID, method for loading images, age, gender, and other data that might improve the quality of ad selection.

To receive notifications about ad loading results, create a SliderAdLoadListener instance and set it as the event listener for the ad slider loader.

To load an 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 has the complete set of required assets and defines their arrangement relative to each other. The template works with any supported type of native ad.

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.

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. You can read more about this in Setting up the layout using a template.

Manual setup for the layout of the native ad 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. Your ad may contain both mandatory and optional display assets. You can find their full list in Native ad assets.

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.

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. Use it to check your ad integration.

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

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 for the YandexAds keyword in the Logcat tool for Android app debugging.

adb logcat -v brief '*:S YandexAds'

If the integration is successful, you'll see this message:

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.