Video Header Ad

This page describes the in-app video header ad format: where it should be displayed, how to implement it and the available APIs.

Table of contents

1. Overview
2. Setup your insertion on Equativ Monetization Platform (EMP)
3. Integration
   1. Overall information
   2. Android dedicated integration
   3. iOS dedicated integration

---

Overview

The Video Header Ad format is an outstream video displayed on top of the screen, shrinking itself according to the scroll and displayed above the content of your application once small enough. This is actually not a dedicated ad object but a specific integration of the SASBannerView.

As most of this integration must be done on the application side and can not be easily done on the Equativ Display SDK side, we provide everything you need to integrate this format seamlessly in your app.

Setup your insertion on Equativ Monetization Platform (EMP)

First of all you have to setup a dedicated ad insertion for your video header ad integration.

To do so, create an insertion as you usually do, and make sure to choose one of the templates named Video-Header compatible with the App environment.

You will find more information about the insertion management in EMP here.

Integration

Overall information

You will find our Video Header Ad integration samples by clicking the following buttons.

Android samples on GitHub iOS samples on GitHub

For both platform, the integration follows the same idea:

• We create an object wrapping a SASBannerView called SASVideoHeaderAd on Android and SASVideoHeaderAdCell on iOS.
• This SASVideoHeaderAd object has all the code needed to update its wrapped SASBannerView size following the scroll of your app.
• This SASVideoHeaderAd object must be displayed as the content of the very first cell of your list.
• You have to inform this SASVideoHeaderAd object about the scrolling events, using dedicated APIs.
• You have to specify a dedicated area in your layout where the ad will be moved to once the list is scrolled enough to trigger the “stick to top” effect.

Android dedicated integration

Copy the needed classes in your project

You have to copy the class named SASVideoHeaderAd that you will find in the following location: src/main/kotlin/com/equativ/displaysdk/ad/banner/SASVideoHeaderAd.kt.

Update your layout to achieve the stick-to-top effect

In your activity’s layout, define a view which will contain the video header ad once it must be sticked to top. To achieve a proper stick-to-top effect, this container view must overlay any other view of your activity and must be positioned close to the top of the screen.

In the sample, we chose the following solution. Please take a look to the FrameLayout with the headerAdStickToTopContainer id:

XML

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical">

    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/swipeRefreshLayout" >

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </androidx.recyclerview.widget.RecyclerView>

    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/headerAdStickToTopContainer" />
</FrameLayout>

Instantiate and configure your SASVideoHeaderAd object

You will find in the VideoHeaderAdActivity how we integrate the SASVideoHeaderAd object as content of our first list cell.

The most important things to do are:

• Add the SASVideoHeaderAd’s stickToTopContainerView to your “header ad stick to top container” view:

Kotlin

binding.headerAdStickToTopContainer.addView(videoHeaderAd.stickToTopContainerView)

• Listen to the scroll events of your recycler view and forward the appropriate values to the SASVideoHeaderAd instance:

Kotlin

binding.recyclerView.addOnScrollListener(object: RecyclerView.OnScrollListener(){
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        super.onScrolled(recyclerView, dx, dy)
        videoHeaderAd.onParentViewScrolled(dx, dy)
    }
})

And that’s enough to have a fully working SASVideoHeaderAd. This way, the SASVideoHeaderAd will be aware of the scroll changes and will automatically adapt the size of the SASBannerView. Then, once the ad is small enough, it will move the SASBannerView from its view to its stickToTopContainerView that you added in your own “header ad stick to top container”.

The SASVideoHeaderAd also has a listener similar to the SASBannerView.BannerListener. Implementing it is totally optional.

There is some more details and tips to integrate this ad format in our sample, so we advise you to open it and try it by yourself! Click here to checkout the Android sample.

iOS dedicated integration

Copy the needed classes in your project

You have to copy the files named SASVideoHeaderAdCell.swift and SASVideoHeaderAdCell.xib that you will find in the folder: VideoHeaderAdSample/.

Instantiate and configure your SASVideoHeaderAd object

You will find in the VideoHeaderAdViewController class how we integrate the SASVideoHeaderAdCell object as content of our first list cell.

The most important things to do are:

• Add the the current ViewController’s view as stickToTopContainerView to your SASVideoHeaderAdCell instance:

Swift

headerAdCell.stickToTopContainerView = self.view

• Listen to the scroll events of your tableView and forward the appropriate values to the SASVideoHeaderAdCell instance:

Swift

// MARK: - UIScrollViewDelegate methods

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    headerAdCell.scrollViewDidScroll(offset: scrollView.contentOffset)
}

And that’s enough to have a fully working SASVideoHeaderAdCell. This way, the SASVideoHeaderAdCell will be aware of the scroll changes and will automatically adapt the size of the SASBannerView. Then, once the ad is small enough, it will move the SASBannerView from its own view to its stickToTopContainerView that you set.

The SASVideoHeaderAdCall also has a delegate protocol similar to the SASBannerViewDelegate. Implementing it is totally optionnal.

There is some more details and tips to integrate this ad format in our sample, so we advise you to open it and try it by yourself! Click here to checkout the iOS sample.

Note that this particular integration requires the use of a simple UIViewController, it will not work with a UITableViewController.