Android Integeration with Mopub Mediation
Mopub網站: https://app.mopub.com, 登入可對後台進行設定。
註: 請將擋廣告的插件關閉(如Adblock),否則後台瀏覽、設定會有問題
Mopub後台設定
Step 1: 新增APP與版位,取得Mopub版位ID
進入Apps分頁後,點擊Add a New App
輸入APP資訊,如APP Name、Package Name…等
新增版位並進行設定
- a. Format為橫幅廣告Banner (320x50):
- b. Format為插頁式廣告Fullscreen (320x480):
- c. Format為原生廣告Native (Custom Layout):
完成設定後,點選Save and View Code Integration,並記下Mopub的版位ID
若欲新增其他版位,請點選剛剛新增的APP並點選Add an Ad Unit
Step 2: 新增廣告聯播網
進入Network分頁,並點選Add a Network
設定Network Title(名字可任意取),並設定實作的類別名稱與參數,以下以Banner作為範例:
依欄位填入
- Custom Event Class: 用於實作com.mopub.mobileads.CustomEventBanner的類別名稱,必須輸入完整的package name,如com.taiwanmobile.pt.adp.mediation.TAMediaMopubBanner
- Custom Event Class Data: 請依指定格式輸入您的版位ID (可向您的TAMedia窗口詢問),格式為 {"adUnitId":"<版位ID>"}
Mopub程式整合
Step 1: Download TAMedia & Mopub SDK
- a. 請參照 Mopub Github 所提供的方式,將Mopub SDK加到您的專案中。
- b. Download TAMedia SDK
Step 2: 在AndroidManifest.xml加入所需的權限與Activity
<!-- Mopub & TAMedia Permission --> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <!-- optional --> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <!-- optional -->
<!-- TAMedia Permission --> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <!-- SDK4.0以上版本請移除 --> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name="android.permission.VIBRATE" /> <!-- optional --> <uses-permission android:name="android.permission.CAMERA"/> <!-- optional, SDK4.0上請加入, 以獲得更豐富的廣告內容 --> <uses-permission android:name="android.permission.RECORD_AUDIO"/> <!-- optional, SDK4.0上請加入, 以獲得更豐富的廣告內容 -->
<!-- Mopub Permission --> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!-- TAMedia Activities --> <activity android:name="com.taiwanmobile.pt.adp.view.TWMAdActivity" android:configChanges="orientation|keyboardHidden|navigation|keyboard|screenLayout|uiMode|screenSize|smallestScreenSize" android:hardwareAccelerated="true" android:theme="@android:style/Theme.Translucent" > </activity> <!-- Mopub activity --> <activity android:name="com.mopub.mobileads.MoPubActivity" android:configChanges="keyboardHidden|orientation|screenSize"/> <activity android:name="com.mopub.mobileads.MraidActivity" android:configChanges="keyboardHidden|orientation|screenSize"/> <activity android:name="com.mopub.common.MoPubBrowser" android:configChanges="keyboardHidden|orientation|screenSize"/> <activity android:name="com.mopub.mobileads.RewardedMraidActivity" android:configChanges="keyboardHidden|orientation|screenSize" /> <activity android:name="com.mopub.mobileads.MraidVideoPlayerActivity" android:configChanges="keyboardHidden|orientation|screenSize"/> <activity android:name="com.google.android.gms.ads.AdActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|uiMode|screenSize|smallestScreenSize" />
<!-- Mopub meta-data --> <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version"/>
Step 3: 將code整合至專案中
Banner: 依下列方式實作Mopub所提供的CustomEventBanner
package com.taiwanmobile.pt.adp.mediation; import android.app.Activity; import android.content.Context; import android.util.Log; import com.mopub.common.util.Views; import com.mopub.mobileads.CustomEventBanner; import com.mopub.mobileads.MoPubErrorCode; import com.taiwanmobile.pt.adp.view.TWMAd; import com.taiwanmobile.pt.adp.view.TWMAdRequest; import com.taiwanmobile.pt.adp.view.TWMAdSize; import com.taiwanmobile.pt.adp.view.TWMAdView; import com.taiwanmobile.pt.adp.view.TWMAdViewListener; import java.util.Map; // 需將本class的完整類別名稱 com.taiwanmobile.pt.adp.mediation.TAMediaMopubBanner 填入後台的Custom Event Class欄位 public class TAMediaMopubBanner extends CustomEventBanner { private static final String TAG = "TAMediaMopubBanner"; private TWMAdView adView = null; @Override protected void loadBanner(Context context, final CustomEventBannerListener customEventBannerListener, Map<String, Object> localExtras, Map<String, String> serverExtras) { Log.d(TAG, "loadBanner(" + serverExtras.get("adUnitId") + ") invoked!!"); String adUnitId = serverExtras.get("adUnitId"); adView = new TWMAdView( (Activity)context, TWMAdSize.SMART_BANNER, adUnitId ); adView.setAdListener(new TWMAdViewListener(){ @Override public void onReceiveAd(TWMAd ad) { customEventBannerListener.onBannerLoaded(adView); } @Override public void onFailedToReceiveAd(TWMAd ad, TWMAdRequest.ErrorCode errorCode) { customEventBannerListener.onBannerFailed(MoPubErrorCode.NETWORK_NO_FILL); } @Override public void onPresentScreen(TWMAd ad) { customEventBannerListener.onBannerClicked(); } @Override public void onDismissScreen(TWMAd ad) {} @Override public void onLeaveApplication(TWMAd ad) { customEventBannerListener.onLeaveApplication(); } }); adView.loadAd(new TWMAdRequest()); } @Override protected void onInvalidate() { // Called when MoPubView is being invalidated or destroyed Log.e(TAG, "onInvalidate invoke !!"); Views.removeFromParent(adView); if (adView != null) { adView.destroy(); } } }
Interstitial: 依下列方式實作Mopub所提供的CustomEventInterstitial
package com.taiwanmobile.pt.adp.mediation; import android.app.Activity; import android.content.Context; import android.util.Log; import com.mopub.mobileads.CustomEventInterstitial; import com.mopub.mobileads.MoPubErrorCode; import com.taiwanmobile.pt.adp.view.TWMAd; import com.taiwanmobile.pt.adp.view.TWMAdRequest; import com.taiwanmobile.pt.adp.view.TWMAdViewListener; import com.taiwanmobile.pt.adp.view.TWMInterstitialAd; import java.util.Map; // 需將本class的完整類別名稱 com.taiwanmobile.pt.adp.mediation.TAMediaMopubInterstitial 填入後台的Custom Event Class欄位 public class TAMediaMopubInterstitial extends CustomEventInterstitial { private static final String TAG = "TAMediaInterstitial"; private TWMInterstitialAd interstitialAd = null; private CustomEventInterstitialListener mInterstitialListener; @Override protected void loadInterstitial(final Context context, final CustomEventInterstitialListener customEventInterstitialListener, final Map<String, Object> localExtras, final Map<String, String> serverExtras) { Log.d(TAG, "loadInterstitial(" + serverExtras.get("adUnitId") + ") invoked!!"); mInterstitialListener = customEventInterstitialListener; String adUnitId = serverExtras.get("adUnitId"); interstitialAd = new TWMInterstitialAd( (Activity)context, adUnitId ); interstitialAd.setAdListener(new TWMAdViewListener(){ @Override public void onReceiveAd(TWMAd ad) { mInterstitialListener.onInterstitialLoaded(); } @Override public void onFailedToReceiveAd(TWMAd ad, TWMAdRequest.ErrorCode errorCode) { mInterstitialListener.onInterstitialFailed(MoPubErrorCode.NETWORK_NO_FILL); } @Override public void onPresentScreen(TWMAd ad) { mInterstitialListener.onInterstitialClicked(); } @Override public void onDismissScreen(TWMAd ad) { mInterstitialListener.onInterstitialDismissed(); } @Override public void onLeaveApplication(TWMAd ad) { mInterstitialListener.onLeaveApplication(); } }); interstitialAd.loadAd(new TWMAdRequest()); } @Override protected void showInterstitial() { // Called when MoPubInterstitial Object called show() if (interstitialAd != null) { interstitialAd.show(); mInterstitialListener.onInterstitialShown(); } } @Override protected void onInvalidate() { // Called when MoPubInterstitial is being invalidated or destroyed. } }
Native: 依下列方式實作Mopub所提供的CustomEventNative
package com.taiwanmobile.pt.adp.mediation; import android.app.Activity; import android.content.Context; import android.util.Log; import android.view.View; import com.mopub.nativeads.CustomEventNative; import com.mopub.nativeads.NativeErrorCode; import com.taiwanmobile.pt.adp.view.TWMAd; import com.taiwanmobile.pt.adp.view.TWMAdRequest; import com.taiwanmobile.pt.adp.view.TWMAdViewListener; import com.taiwanmobile.pt.adp.view.TWMNativeAd; import org.json.JSONException; import org.json.JSONObject; import java.util.Map; // 需將本class的完整類別名稱 com.taiwanmobile.pt.adp.mediation.TAMediaMopubNative 填入後台的Custom Event Class欄位 public class TAMediaMopubNative extends CustomEventNative { private static final String TAG = "TAMediaMopubNative"; private TWMNativeAd nativeAd; @Override protected void loadNativeAd(final Context context, final CustomEventNativeListener customEventNativeListener, final Map<String, Object> localExtras, final Map<String, String> serverExtras) { Log.d(TAG, "loadNativeAd(" + serverExtras.get("adUnitId") + ") invoked!!"); String adUnitId = serverExtras.get("adUnitId"); nativeAd = new TWMNativeAd((Activity) context, adUnitId); final TWMediaStaticNativeAd staticNativeAd = new TWMediaStaticNativeAd(nativeAd, customEventNativeListener); nativeAd.setAdListener(staticNativeAd); nativeAd.loadAd(new TWMAdRequest()); } static class TWMediaStaticNativeAd extends com.mopub.nativeads.StaticNativeAd implements TWMAdViewListener { private final CustomEventNativeListener mCustomEventNativeListener; private final TWMNativeAd nativeAd; // Native ad assets. private String longSubject; private String body; private String iconUrl; private String imageUrl; private String targetUrl; public TWMediaStaticNativeAd(final TWMNativeAd nativeAD, final CustomEventNativeListener customEventNativeListener) { mCustomEventNativeListener = customEventNativeListener; nativeAd = nativeAD; } @Override public void destroy() { nativeAd.destroy(); super.destroy(); } @Override public void prepare(View view) { super.prepare(view); view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { notifyAdClicked(); nativeAd.handleClick(); } }); notifyAdImpressed(); } // TWMAdViewListener @Override public void onReceiveAd(TWMAd twmAd) { if (nativeAd.isReady()) { JSONObject content = nativeAd.getNativeAdContent(); try { longSubject = (content.has("LONGSUBJECT")) ? content.getString("LONGSUBJECT") : null; body = (content.has("BODY")) ? content.getString("BODY") : null; iconUrl = (content.has("ICONSQUARE")) ? content.getString("ICONSQUARE") : null; imageUrl = (content.has("IMAGE1200X627")) ? content.getString("IMAGE1200X627") : null; targetUrl = (content.has("nurl")) ? content.getString("nurl") : null; if(longSubject != null) setTitle(longSubject); if(body != null) setText(body); if(imageUrl != null) setMainImageUrl(imageUrl); if(iconUrl != null) setIconImageUrl(iconUrl); if(targetUrl != null) setClickDestinationUrl(targetUrl); mCustomEventNativeListener.onNativeAdLoaded(this); } catch (JSONException e) { Log.e(TAG, "Native Content Parse Error: " + e.getMessage()); mCustomEventNativeListener.onNativeAdFailed(NativeErrorCode.INVALID_RESPONSE); } } } @Override public void onFailedToReceiveAd(TWMAd twmAd, TWMAdRequest.ErrorCode errorCode) { mCustomEventNativeListener.onNativeAdFailed(NativeErrorCode.NETWORK_NO_FILL); } @Override public void onPresentScreen(TWMAd twmAd) {} @Override public void onDismissScreen(TWMAd twmAd) {} @Override public void onLeaveApplication(TWMAd twmAd) {} } }
加入上述Code後,即完成Mopub整合,開發者可透過Mopub取得TAMedia的廣告。
以下以Banner為例來演示取得廣告的方式:
在Layout中加入Mopub Banner (※僅供參考,開發者可依照自訂的layout進行配置使用)
<!-- fragment_banner.xml --> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.taiwanmobile.pt.tamedia.guide6.sub1.BannerFragment"> <com.mopub.mobileads.MoPubView android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true"/> </RelativeLayout>
在程式內,設定Banner的Ad Unit Id (先前於後台設定中取得的Mopub版位ID),並呼叫loadAd()取得廣告
import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.mopub.mobileads.MoPubView; public class BannerFragment extends Fragment { private static final String TAG = BannerFragment.class.getSimpleName(); private static final String BANNER_ADUNIT_ID = "<Mopub Ad Unit Id for Banner>"; private View fragmentView; private MoPubView moPubView; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { fragmentView = inflater.inflate(R.layout.fragment_banner, container, false); initBanner(fragmentView); return fragmentView; } @Override public void onDestroyView(){ if(moPubView != null) { moPubView.destroy(); moPubView = null; } super.onDestroyView(); } private void initBanner(View view){ moPubView = (MoPubView) view.findViewById(R.id.banner); // Set mopub adunit id moPubView.setAdUnitId(BANNER_ADUNIT_ID); // Load Banner and Show moPubView.loadAd(); } }
詳細範例可見Mopub Tutorial Project (包含插頁、原生廣告)。