[AndroidStudio] 加入 MoPub 廣告中介服務 - KnucklesNote板

Disp BBS guest 註冊登入(i) 線上人數: 934

首頁(home) 上頁(↑) 下頁(↓) 末頁(end)

看板 KnucklesNote

作者 Knuckles (站長那克斯)
標題 [AndroidStudio] 加入 MoPub 廣告中介服務
時間 2016-12-25 Sun. 06:11:00

使用 MoPub 在 ListView 列表中加上原生廣告(Native Ads)

像這樣

在 MoPub 網站新增廣告單元

在 MoPub 網站 https://www.mopub.com/
註冊一個帳號後登入

新增一個 App

新增一個 Native 的廣告單元

這邊我們設定廣告顯示位置為5 (從0開始算，也就是在第6列)

按下一步後取得 Ad Unit ID

不需下載 Android SDK 檔案，接下來是用 Gradle 來安裝 SDK

在 Android Studio 安裝 MoPub SDK

參考 https://github.com/mopub/mopub-android-sdk/wiki
裡的 Getting Started

需求:
Android 的 API Version 至少要為9
要安裝 Google Play Services 版本至少為 7.8.0

這邊我們使用 jCenter AAR 的方式安裝

先確認在 project 的 build.gradle 裡有 jcenter()

buildscript {

    repositories {

        //...

        jcenter()

    }

修改 app 的 build.gradle
在 dependencies { 裡加上

    // For native static (images).

    compile('com.mopub:mopub-sdk-native-static:4.9.0@aar') {

        transitive = true

    }

這邊我們只安裝 MoPub SDK 的 Native static 部份

確認 AndroidManifest.xml 裡有允許存取網路的權限

    <uses-permission android:name="android.permission.INTERNET" />

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

廣告有需要取得使用者位置的話再加上

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

確認在 AndroidManifest.xml 的 <application> 裡有

        <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" />

以使用 Google Play Service

在 AndroidManifest.xml 的 <application> 裡加上

        <activity android:name="com.mopub.common.MoPubBrowser" android:configChanges="keyboardHidden|orientation|screenSize"/>

加上 MoPub Native Ads

接下來參考 https://github.com/mopub/mopub-android-sdk/wiki
裡的 Native Ads Integration

新增一個廣告欄位的 Layout 設定檔名為 row_nativeads.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent" android:layout_height="match_parent">

    <ImageView android:id="@+id/nativeads_icon_image"

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:layout_marginLeft="0dp"

        android:layout_alignParentLeft="true"

        android:layout_centerVertical="true"

        android:scaleType="centerCrop"

        android:background="@null"

        />

    <ImageView android:id="@+id/nativeads_main_image"

        android:layout_width="0dp"

        android:layout_height="0dp"

        android:visibility="invisible"

        />

    <TextView

        android:id="@+id/nativeads_title"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginLeft="5dp"

        android:layout_marginRight="50dp"

        android:layout_toRightOf="@+id/nativeads_icon_image"

        android:layout_alignTop="@+id/nativeads_icon_image"

        android:textColor="#9CF"

        android:textSize="16sp"

        android:textStyle="bold" />

    <TextView

        android:id="@+id/nativeads_desc"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/nativeads_title"

        android:layout_alignLeft="@+id/nativeads_title"

        android:maxLines="3"

        android:ellipsize="end"

        android:textColor="#CCC"

        android:textSize="14sp"/>

    <TextView

        android:id="@+id/nativeads_sponsored"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/nativeads_title"

        android:layout_alignParentBottom="true"

        android:text="Sponsored"

        android:textColor="#888"

        android:textSize="14sp"/>

    <ImageView android:id="@+id/nativeads_privacy_image"

        android:layout_width="40dp"

        android:layout_height="40dp"

        android:padding="10dp"

        android:layout_alignParentRight="true"

        android:layout_alignParentEnd="true"

        android:layout_alignParentTop="true"/>

</RelativeLayout>

排版的結果會像這樣 (要再修改程式才會顯示圖和文字)

我們只使用 nativeads_icon_image 做為擺在左邊的圖示

而 nativeads_main_image 為較大的圖，我們在列表時設為不顯示

使用 nativeads_title, nativeads_desc 來顯示標題與簡述文字

使用 nativeads_sponsored 在下方顯示顯示"Sponsored"的字樣

nativeads_privacy_img 為右上角的隱私權按鈕
MoPub 會自動設定按鈕的點擊行為

接著修改要顯示原生廣告的列表頁 java 檔

新增成員變數

    private MoPubAdAdapter mAdAdapter;

    private static final String MOPUB_AD_UNIT_ID = "your_ad_unit_id";

將「your_ad_unit_id」改為之前在 MoPub 網站取得的 ad unit id

新增成員函式 initAdpter()

    private void initAdapter() {

        //原本使用的 Adapter

        mAdapter = new MainAdapter(mContext);

        //使用 VieweBinder 設定之前建立的廣告欄位 Layout 與 id

        ViewBinder viewBinder = new ViewBinder.Builder(R.layout.row_nativeads)

            .iconImageId(R.id.nativeads_icon_image)

            .mainImageId(R.id.nativeads_main_image)

            .titleId(R.id.nativeads_title)

            .textId(R.id.nativeads_desc)

            .privacyInformationIconImageId(R.id.nativeads_privacy_image)

            .build();

        //adPositioning 為廣告要出現在哪個位置，

        //使用 serverPositioning() 取得在 MoPub 網站設定的廣告位置

        MoPubNativeAdPositioning.MoPubServerPositioning adPositioning =

                MoPubNativeAdPositioning.serverPositioning();

        //將 viewBinder 轉為 adRenderer

        MoPubStaticNativeAdRenderer adRenderer = new MoPubStaticNativeAdRenderer(viewBinder);

        //使用原本的 mAdapter 來建立新的 mAdAdapter

        mAdAdapter = new MoPubAdAdapter(mContext, mAdapter, adPositioning);

        mAdAdapter.registerAdRenderer(adRenderer);

        //ListView 改為使用新的 mAdAdapter

        mListView.setAdapter(mAdAdapter);

    }

使用 MoPubAdAdapter 將原本的 mAdapter 包起來
建立成一個新的 mAdAdapter

將程式原本載入 Adapter 的地方
mAdapter = new MainAdapter(mContext);
setListAdapter(mAdapter);
改為執行上面新增的成員函式

        initAdapter();

將程式載入列表資料的地方，載入廣告內容

                mAdAdapter.loadAds(MOPUB_AD_UNIT_ID);

如果要提供座標資訊或關鍵字的話，可加上第二個參數 mRequestParameters

                mRequestParameters = new RequestParameters.Builder()

                        .location(location)

                        .keywords(keywords)

                        .build();

                mAdAdapter.loadAds(MOPUB_AD_UNIT_ID, mRequestParameters);

在 onDestroy() 事件加上 mAdAdapter.destroy();

    @Override

    public void onDestroy() {

        //...

        mAdAdapter.destroy();

        super.onDestroy();

    }

執行看看，沒問題的話第6列會出現 MoPub 預設的內容

設定第三方廣告來源

接下來我們使用FB的廣告(Facebook Audience Network)來做第三方廣告來源

參考 https://developers.facebook.com/docs/audience-network/android
先安裝 Facebook Audience Network 的 Android SDK

在 https://developers.facebook.com/docs/android 下載SDK檔
解壓縮後，在 AudienceNetwork/bin/ 目錄中有個 AudienceNetwork.aar 檔
將 AudienceNetwork.aar 的副檔名改為 .zip，解壓縮後取得裡面的 classes.jar 檔
將 classes.jar 的檔名改為 AudienceNetwork.jar

複製 AudienceNetwork.jar 到專案資料夾的 app/libs/ 下
然後在 Android Studio 裡按滑鼠右鍵選「Add As Library...」

檢查 app 的 build.gradle 裡的 dependencies { 有沒有自動加上這行

compile files('libs/AudienceNetwork.jar')

在 AndriodManifest.xml 的 <application> 裡加上

        <activity android:name="com.facebook.ads.AudienceNetworkActivity" android:configChanges="keyboardHidden|orientation|screenSize" />

裝好 FAN 的 SDK 後，再來要加上 MoPub 裡的 custom event file

參考
https://github.com/mopub/mopub-android-sdk/wiki/Integrating-Native-Third-Party-Ad-Networks
http://www.mopub.com/how-to-integrate-fb-audience-network-using-custom-events/

在 https://github.com/mopub/mopub-android-sdk 點「Clone or dowload」
下載 zip 檔，解壓縮後，
複製裡面的 extras/src/com/mopub/nativeads/FacebookNative.java 檔

在專案資料夾的 app/src/main/java 下新增一個資料夾「com.mopub」
將剛才複製的 FacebookNative.java 檔貼在這邊

登入 MoPub 網站，在「Networks」點「Add a Network」，
再點「Custom Native Network」

在 Title 隨意輸入個名字
在 Custom Even Class 輸入「com.mopub.nativeads.FacebookNative」
在 Custom Event Class Data 輸入「{"placement_id":"<enter your placement id here>"}」

其中 <enter your placement id here> 為 Facebook Audience Network 的版位編號
在 Facebook Audience Network 開一個版位後取得版位編號

再來到 MoPub 網站的「Segments」，點一下「Global Segment」

點一下 Enabled 的開關把他打開

後面可以設定一下這個廣告的 eCPM

執行程式看看廣告是否有出現了

--
※ 作者: Knuckles 時間: 2016-12-25 06:11:00
※ 編輯: Knuckles 時間: 2017-05-25 21:34:14

※ 看板: KnucklesNote　文章推薦值: 0 目前人氣: 0 累積人氣: 442　

分享網址: 複製

DispBBS

回到看板(←)《KnucklesNote》

r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄同主題: =)首篇 [)上篇 ])下篇

回列表(←) 分享