Monetize With MoPub

Twitter Kit provides easy integration with the MoPub SDK, which makes it easy to monetize your app with native ads in timelines. With just a few lines of code, you can:

• Display engaging native ads inside Twitter timelines
• Implement native ad best practices
• Style ads with customizable light and dark styles to match the exact look and feel of your app

Create a MoPub Account and Ad Unit

Note, it is recommended that you create a new native ad unit ID for timeline ads.

Follow these 3 steps to set up an ad unit ID:

• Create a MoPub account if you do not have one already
• Add your application to the MoPub dashboard once you have a MoPub account
• Create a new native ad unit with the desired configurations

To learn more about MoPub's ad exchange and marketplace, see more

Add Twitter-MoPub Dependency

Add twitter-mopub to your build.gradle dependencies:

dependencies {
  ...

  compile('com.twitter.sdk.android:twitter-mopub:3.1.1@aar') {
      transitive = true;
  }
}

Twitter-MoPub Adapter

twitter-mopub provides TwitterMoPubAdAdapter, which will contact MoPub's ad server to determine ad position, register an ad renderer TwitterStaticNativeAdRenderer, and load ads in a Timeline.

Here is an example of using TwitterMoPubAdAdapter:

public class UserTimelineFragment extends ListFragment {

    private MoPubAdAdapter moPubAdAdapter;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        ...

        final UserTimeline userTimeline = new UserTimeline.Builder().screenName("twitterdev").build();
        final TweetTimelineListAdapter adapter = new TweetTimelineListAdapter.Builder(getActivity())
                .setTimeline(userTimeline)
                .setViewStyle(R.style.tw__TweetLightWithActionsStyle)
                .setOnActionCallback(actionCallback)
                .build();

        moPubAdAdapter = new TwitterMoPubAdAdapter(getActivity(), adapter);
        final TwitterStaticNativeAdRenderer adRenderer = new TwitterStaticNativeAdRenderer();
        moPubAdAdapter.registerAdRenderer(adRenderer);
        moPubAdAdapter.loadAds(BuildConfig.MOPUB_AD_UNIT_ID);

        setListAdapter(moPubAdAdapter);
    }

    @Override
    public void onDestroy() {
        // You must call this or the ad adapter may cause a memory leak
        moPubAdAdapter.destroy();
        super.onDestroy();
    }
}

Styling

twitter-mopub provides predefined styles, tw__ad_LightStyle and tw__ad_DarkStyle. Styles are defined by the following attributes:

<!--attrs.xml-->
<resources>
    <declare-styleable name="tw__native_ad">
        <attr name="tw__ad_container_bg_color" format="color"/>
        <attr name="tw__ad_card_bg_color" format="color"/>
        <attr name="tw__ad_text_primary_color" format="color"/>
        <!-- call to action -->
        <attr name="tw__ad_cta_button_color" format="color"/>
    </declare-styleable>
</resources>

The tw__ad_LightStyle is configured by default in TwitterStaticNativeAdRenderer. The desired style can be specified as follows:

final TwitterStaticNativeAdRenderer adRenderer = new TwitterStaticNativeAdRenderer(R.style.tw__ad_DarkStyle);

Custom Styling

Customizing the styling to match the look and feel of your app is easy:

<!--styles.xml-->
<style name="tw__ad_MyAppStyle" parent="tw__ad_LightStyle">
    <item name="tw__ad_cta_button_color">@color/custom_color_1</item>
    <item name="tw__ad_text_primary_color">@color/custom_color_2</item>
    <item name="tw__ad_container_bg_color">@color/custom_color_3</item>
    <item name="tw__ad_card_bg_color">@color/custom_color_4</item>
</style>

If an attribute is not set, the value defaults to values from tw__ad_LightStyle. The custom style reference needs to be passed to TwitterStaticNativeAdRenderer.

final TwitterStaticNativeAdRenderer adRenderer = new TwitterStaticNativeAdRenderer(R.style.tw__ad_MyAppStyle);