In Feed

Scenario

  • Insert ad into ListView/RecyclerView when user is scrolling it.

Ad Formats Supported

  • Card Ad

  • Native Ad

How to Integrate

CrystalExpress™ SDK provides CEInFeedHelper to simplify in-feed integration of Card Ad and Native Ad. Please follow the step below:

Step 1: Copy the adsource, component under infeed folder.

You can modify the CEIFNativeAdView.java /CEIFDisplayAdView.java to customize the ad view.

Step 2: Prepare placement

  • You can have only one placement for a given RecyclerVIew/ListView.

  • The placement also could be obtained from your backend server to improve the scalability.

Step 3: Initialize CEInFeedHelper

  • If your app consists of multiple RecyclerVIew/ListView, each RecyclerView/ListView needs to be associated with one CEInFeedHelper.

// Prepare CEInFeedHelper
//
mInFeedHelper = new CEInFeedHelper(mActivity, placement, IS_DEBUG);

Step 4: Initial and Add ad source to CEInFeedHelper

The CEIFAdSource define the ad format you want to show on the feed placement.

  • For Card Ad format, please initialize CEIFDisplayAdSource.

// Init the Card ad source format.
adSource = new CEIFDisplayAdSource(mActivity){
    @NonNull
    @Override
    public Map<String, Object> getAdProps() {
        // TODO
        // Make your custom ad props (Option)
        // For example
        // adProps.put(AdProperty.HIDE_WIFITAG, true);
        // adProps.put(AdProperty.HIDE_SPEAKER, true);
        // ...
        return super.getAdProps();
        }
};
// Add ad source to CEInFeedHelper
mInFeedHelper.setAdSource(adSource);

For more detail of customizing ad props, you can refer to AdProperty

  • For Native Ad format, please initialize CEIFNativeAdSource.

// Init the Native Ad source format.
adSource = new CEIFNativeAdSource(mActivity){
    @NonNull
    @Override
    public Map<String, Object> getAdProps() {
        // TODO
        // Make your custom ad props (Option)
        // For example
        // adProps.put(AdProperty.HIDE_WIFITAG, true);
        // adProps.put(AdProperty.HIDE_SPEAKER, true);
        // ...
        return super.getAdProps();
        }

    @NonNull
    @Override
        public View getNativeAdView(NativeAd nativeAd) {
            //  Get ad title string.
            String title = mNativeAd.getAdTitle()

            //  Get ad description string.
            String adBody = mNativeAd.getAdBody();

            //  Get call to action string.
            String callToAction = mNativeAd.getAdCallToAction();

            //  Instantiate MediaView
            //  please make sure to pass activity on to the mediaview
            //
            int width = your_defined_width;
            mMediaView = new MediaView(activity);
            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
              width, RelativeLayout.LayoutParams.WRAP_CONTENT);
            mMediaView.setLayoutParams(params);
            mMediaView.setNativeAd(mNativeAd);

            //  Add these materials to the UI hierarchy
            adView.addView(mediaView);

            return adView;
        }
};

// Add ad source to CEInFeedHelper.
mInFeedHelper.setAdSource(adSource);

For more detail of customizing ad props, you can refer to AdProperty

Step 5 (Optional) : Set ad event listener if you want to receive ad event status.

If you want to track the impression, click, mute.... etc, you can implement the CEIFHelperAdEventListener to override the corresponding function.

// Set ad event listener if you want to receive ad event status. (Option)
//
mInFeedHelper.setAdEventListener(new CEInFeedHelper.CEIFHelperAdEventListener() {
            @Override
            public void onAdClicked(int index, Object ad) {

            }

            @Override
            public void onAdImpression(int index, Object ad) {

            }

            @Override
            public void onAdMute(int index, Object ad) {

            }

            @Override
            public void onAdUnmute(int index, Object ad) {

            }

            @Override
            public void onAdVideoStart(int index, Object ad) {

            }

            @Override
            public void onAdVideoEnd(int index, Object ad) {

            }

            @Override
            public void onAdVideoProgress(int index, Object ad, int totalDuration, int currentPosition) {

            }
        });

Step 6

Case 1 (Recommend): Put your adapter and CEInFeedHelper into CEIFAdapter()/CEIFRecyclerViewAdapter()

The CEIFAdapter/CEIFRecyclerViewAdapter can handle perform dynamic ad insertion and placement management. You can integrate the related adapter according to

  • ListView: Please use CEIFAdapter

 mAdapter = new CEIFAdapter(mActivity, YourListViewAdapter, mInFeedHelper);
  • RecyclerView: Please use CEIFRecyclerViewAdapter

 mAdapter = new CEIFRecyclerViewAdapter(mActivity, YourRecycleViewAdapter, mInFeedHelper);

Case 2: Get the Ad View from CEInFeedHelper each time in onBindViewHolder to make sure the ad can insert into your dataset in order.

If you want to assign Ad position by your own, you can pass the step6, and handle the content order as you prefer or contact your solutions engineer.

Step 7 : Implement the RecyclerView.OnScrollListener to notify InFeedHelper the scroll and scroll state.

The CEInFeedHelper needs to know the scroll state to make sure whether to prepare the Ad.

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);
        if (mInFeedHelper != null) {
            mInFeedHelper.onScrollStateChanged(newState);
        }
    }

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        int firstVisibleItem, visibleItems, totalItems;
        visibleItems = mRecyclerView.getChildCount();
        totalItems = mLayoutManager.getItemCount();
        firstVisibleItem = mLayoutManager.findFirstVisibleItemPosition();

        if (mInFeedHelper != null) {
            mInFeedHelper.onScroll(firstVisibleItem, visibleItems, totalItems);
        }
    }
});

Step 8: Add helper.onDestroy() and adapter.onDestroy()in the Activity.onDestroy() for memory release

@Override
protected void onDestroy() {
    if (mAdapter != null) {
        mAdapter.onDestroy();
        mAdapter = null;
    }


    if (mInFeedHelper != null) {
        mInFeedHelper.onDestroy();
        mInFeedHelper = null;
    }
    ...
    ...
    super.onDestroy();
}

Last updated