Android FaceBook原生廣告與統計接入教程（精簡版）

阿新 • • 發佈：2019-02-06

公司專案主要做海外市場，並且是資訊類的產品，所以接入一些廣告公司的廣告是一項不錯的創收，昨天下午產品告訴我要馬上接入Facebook的原生廣告需求，於是下午就開始閱讀Facebook廣告接入的官方開發文件進行接入測試了，當然，接入的過程並沒有那麼順利，遇到了好多坑，還好有一個有接入經驗的大哥幫助加上自己堅持不懈的努力，最終成功的接入了。
FaceBook的原生廣告的文件寫的很詳細，從建立專案到接入Facebook的廣告sdk，再到自定義廣告佈局，呼叫廣告api展示廣告介紹的都非常詳細，只不過新手第一次做的話，只做這些還不夠，接下來跟你細細分析我的爬坑之路。

先把正確的接入流程寫出來：
1、註冊Facebook賬號(這個就不多說)
2、找到原生廣告整合文件（提示：先看https://developers.facebook.com/docs/audience-network/android 緊接著再看這個

https://developers.facebook.com/docs/audience-network/android-native ）
3、配置相關資訊：

使用 Facebook SDK 之前，需要先進行初始化。將呼叫新增到 Application 類中 onCreate 的 FacebookSdk.sdkInitialize： 

public class MyApplication extends Application { 
// Updated your class body: 
		@Override 
	public void onCreate() { 
		super.onCreate(); 
		// Initialize the SDK before executing any other operations, 
		FacebookSdk.sdkInitialize(getApplicationContext()); 
		// Facebook統計開啟
		AppEventsLogger.activateApp(this); 
		//FaceBook Ads廣告，這個addTestDevice("")中的字串是裝置的編號，第一次執行實      從log日誌裡面觀察可以看到，複製進來即可，不寫這裡會導致不出來廣告的異常
		AdSettings.addTestDevice("1b0a5f0c-877d-4fe8-99df-a0322cde3a8e")
	} 
}

AndroidMainfest.xml中要配置Facebook的應用id

<application
        android:name=".MyApplication"
        android:icon="@mipmap/icon"
        android:label="@string/app_name"
        android:roundIcon="@drawable/icon_logo"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
<!--  Facebook的應用id -->
<meta-data
            android:name="com.facebook.sdk.ApplicationId"
            android:value="@string/facebook_app_id" />
 <!--  如果需要接入Facebook統計的話需要整合這個 -->
<activity
            android:name="com.facebook.FacebookActivity"
            android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
            android:label="@string/app_name" />

</application>

注意不要忘記在AndroidMainfest.xml檔案中寫入MyApplication

4 、新增依賴
在app級別下的build.gradle下新增如下依賴，這個也是Facebook官方文件最推薦的方式

dependencies {
  ...
  implementation 'com.facebook.android:facebook-android-sdk:4.6.0'
  implementation 'com.facebook.android:audience-network-sdk:4.28.1'  
  ...
}

5、寫主要邏輯程式碼和自定義廣告佈局部分，這裡會分步驟詳解：
第一步：先建立一個native_ad_layout.xml檔案寫自己的自定義廣告佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/native_ad_unit"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:orientation="vertical"
    android:paddingLeft="10dp"
    android:paddingRight="10dp">

    <LinearLayout
        android:id="@+id/ll_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingTop="10dp">

        <ImageView
            android:id="@+id/native_ad_icon"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_gravity="center_vertical"/>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="5dp">

            <TextView
                android:id="@+id/native_ad_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxLines="2"
                android:textColor="@android:color/black"
                android:textSize="15sp"/>

            <TextView
                android:id="@+id/sponsored_label"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:text="Sponsored"
                android:textColor="@android:color/darker_gray"
                android:textSize="10sp"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ad_choices_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:orientation="horizontal"/>
    </LinearLayout>

    <com.facebook.ads.MediaView
        android:id="@+id/native_ad_media"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:gravity="center"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="5dp">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:orientation="vertical"
            android:paddingRight="10dp">

            <TextView
                android:id="@+id/native_ad_social_context"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:gravity="center_vertical"
                android:lines="2"
                android:paddingRight="5dp"
                android:textColor="@android:color/darker_gray"
                android:textSize="10sp"/>

            <TextView
                android:id="@+id/native_ad_body"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:gravity="center_vertical"
                android:lines="2"
                android:textColor="@android:color/black"
                android:textSize="10sp"/>
        </LinearLayout>

        <Button
            android:id="@+id/native_ad_call_to_action"
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:layout_gravity="center_vertical"
            android:layout_weight="1"
            android:background="#4286F4"
            android:gravity="center"
            android:paddingLeft="3dp"
            android:paddingRight="3dp"
            android:textColor="@android:color/white"
            android:textSize="11sp"/>
    </LinearLayout>
</LinearLayout>

第二步：在你要顯示這個廣告的佈局裡面建立一個容器，來動態新增這個廣告的佈局

<?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"
    android:gravity="center_horizontal"
    android:paddingTop="50dp">
    ...
    <!--自定義Facebook ads佈局容器-->
    <LinearLayout
        android:id="@+id/native_ad_container"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical"/>
    ...
</RelativeLayout>

第三步：寫載入廣告的函式

    //宣告三個變數
    private var nativeAd: NativeAd? = null
    private var nativeAdContainer: LinearLayout? = null
    private var adView: LinearLayout? = null

private fun showNativeAd() {
//        nativeAd = NativeAd([email protected], "YOUR_PLACEMENT_ID") //加入你的廣告版位號 測試的話直接用這個"YOUR_PLACEMENT_ID"就可以，不用改寫
        nativeAd = NativeAd([email protected], "1445302316225142_1445305302891510") // 正式的廣告版位號
        //  手機上必須安裝並且登陸谷歌play和Facebook app，然後Facebook賬號必須在賬號中心管理者後臺新增開發者和測試者

        nativeAd!!.setAdListener(object : AdListener {
            override fun onAdClicked(p0: Ad?) {
                Log.d(TAG, "onAdClicked")
            }

            override fun onError(p0: Ad?, p1: AdError?) {
                Log.d(TAG, "onError")
                toast("Ad onError")
            }

            override fun onAdLoaded(p0: Ad?) {
                Log.d(TAG, "onAdLoaded")

                if (nativeAd != null) {
                    nativeAd!!.unregisterView()
                }

                // Add the Ad view into the ad container.
                nativeAdContainer = native_ad_container
                var inflater: LayoutInflater = LayoutInflater.from([email protected])
                // Inflate the Ad view.  The layout referenced should be the one you created in the last step.
                adView = inflater.inflate(R.layout.native_ad_layout, nativeAdContainer, false) as LinearLayout
                nativeAdContainer?.addView(adView)


                // Create native UI using the ad metadata.
                val nativeAdIcon = adView!!.native_ad_icon as ImageView
                val nativeAdTitle = adView!!.native_ad_title as TextView
                val nativeAdMedia = adView!!.native_ad_media as MediaView
                val nativeAdSocialContext = adView!!.native_ad_social_context as TextView
                val nativeAdBody = adView!!.native_ad_body as TextView
                val nativeAdCallToAction = adView!!.native_ad_call_to_action as Button

                // Set the Text.
                nativeAdTitle.setText(nativeAd!!.getAdTitle())
                nativeAdSocialContext.setText(nativeAd!!.getAdSocialContext())
                nativeAdBody.setText(nativeAd!!.getAdBody())
                nativeAdCallToAction.setText(nativeAd!!.getAdCallToAction())

                // Download and display the ad icon.
                var adIcon: NativeAd.Image = nativeAd!!.getAdIcon()
                NativeAd.downloadAndDisplayImage(adIcon, nativeAdIcon)

                // Download and display the cover image.
                nativeAdMedia.setNativeAd(nativeAd)
                    toast("成功了")
                // Add the AdChoices icon
                var adChoicesContainer: LinearLayout = adView!!.ad_choices_container
                var adChoicesView: AdChoicesView = AdChoicesView([email protected], nativeAd, true)
                adChoicesContainer.addView(adChoicesView)

                // Register the Title and CTA button to listen for clicks.
                var clickableViews = mutableListOf<View>()
                clickableViews.add(nativeAdTitle)
                clickableViews.add(nativeAdCallToAction)
                nativeAd!!.registerViewForInteraction(nativeAdContainer, clickableViews)

            }

            override fun onLoggingImpression(p0: Ad?) {
                Log.d(TAG, "onLoggingImpression")
                toast("")
            }

        })
        // Request an ad
        nativeAd!!.loadAd()
    }

第四步：在你的activity中onCreate方法裡面呼叫這個showNativeAd()的函式就行

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         showNativeAd()
    }

其實這裡如果正常的話會正常的出來廣告，但是我這裡沒有出來，原因很簡單：
手機上沒有安裝Facebook和谷歌play，
裝上後一定要登陸上你的Facebook賬號，
並且這個賬號必須在你註冊的應用賬號中心管理者後臺新增為開發者，
然後檢查手機網路確認已經翻牆後，就可以正常的顯示廣告了。
以上這幾點也是我遇到的最坑的幾點，要不是一個接過廣告的老手幫忙除錯，我還不知道怎麼能把廣告顯示出來估計
另外這裡再介紹給大家一種新的除錯Android應用的方法，因為Facebook是認簽名的，釋出版才能正常呼叫分享，廣告等功能，跟微信一樣，以前都是打包成釋出版的apk包進行測試，這樣的壞處是不能正常看log日誌，不能正常跟蹤異常資訊，總是打包也不太方便，然後就發現了一種可以測試環境也可以直接用釋出版簽名的方法，很方便，這裡做下記錄：

在app級別的bulide.glide中的Android{}中新增或者修改為如下
 signingConfigs {
        release {
            keyAlias 'your keyAlias'
            keyPassword 'adminis'
            storeFile file('C:/Users/EASY/Desktop/key/mykey.jks')
            storePassword 'your storePassword '
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
        debug {
            signingConfig signingConfigs.release
        }
    }

然後這樣就可以直接debug跑專案的時候也可以直接除錯釋出版才能除錯的功能了，而且log，error資訊隨時掌握，非常方便，哈哈，感覺收穫滿滿的今天！

Android FaceBook原生廣告與統計接入教程（精簡版）

Android FaceBook原生廣告與統計接入教程（精簡版）

HashMap與HashTable的區別（精簡版）

AdMob Android谷歌廣告接入（精簡版）

最新微信Tinker 熱修復平臺接入教程（超詳細）

短視訊直播平臺第三方特效SDK接入教程（完整版）

*Android 多線程下載仿下載助手（改進版）

【Unity編程】歐拉角與萬向節死鎖（圖文版）

python基礎教程（第二版）---1.4數字和表達式

OpenAcc社區版安裝教程（Linux版）

Visual Studio 2017 安裝使用教程（詳細版）

多多客小程序開源版8步快速安裝教程（圖文版）

Git 與 GitLab 環境配置（Mac版）

後續遍歷--遞迴與非遞迴（java版）

用優啟通製作U盤啟動盤教程（UEFI版）

美圖DPOS以太坊教程（Docker版）

百度網站收錄教程（個人版）

【RL-TCPnet網路教程】第40章 RL-TCPnet之TFTP客戶端（精簡版）

基於UMeng訊息推送測試-demo教程（iOS版）

Windows 10 + kali Linux 雙系統安裝教程（詳細版）

嵌入式linux基礎教程（第二版）第一章

Android FaceBook原生廣告與統計接入教程（精簡版）

相關推薦