React Native Facebook Native Ads 奮鬥戰記

Native Ads?

文章標題就出現了兩次 Native，實在有點拗口。關於甚麼是 Native Ads（原生廣告）可以參見 Facebook 的官方說明，以下引用之：

原生廣告能讓您在為應用程式設計完美的廣告單位時，掌控所有細節。透過「原生廣告 API」，您可決定廣告的外觀、風格、大小和位置。因為廣告的格式由您決定，所以廣告能與應用程式搭配的天衣無縫。

簡單來說就是「將廣告和你的 App 更好的整合」，以期能帶來更多地的點擊，騙更多的使用者按下去，比如最常見的就是你大狄卡留言區塊藏著的業配廣告啦，還有 twitter、Facebook 各平臺偽裝成一般貼文廣告等等。

React Native Integration

React Native 把網頁開發的體驗帶到 App 上，不過 Facebook 沒有提供官方版的 Native Ads 模組，我們只好自行想辦法啦。我們這裡選擇的是 CallStack 提供的第三方模組：react-native-fbads。

花式踩雷

先講結論：

開源專案當覺得 README 寫的不痛快的時候，去看 example code，找出範例比你多寫的地方。
有問題先看 Log。Native Module 的 Log 得用各平臺原生 IDE 看，比如 XCode 或 Android Studio。雖然不想開還是得開一下
噴錯誤訊息時從上游(原生模組的來源)文件查起

SDK 設定

大多新版 React Native 原生模組的安裝都可以用 react-native link xxx-module 搞定，不過有些時候卻沒啥用，跑完指令之後還需要手動設定。

iOS 版 SOP：

加入 node_modules/xxx-module/ios/xxx.xcodeproj 到 Library
把 Product xxx.a 加到 Build Phase 裡
若有額外引用 header，更新 Header search Path

Android SOP:

修改 settings.gradle、build.gradle、MainApplication.java 等
檢查 AndroidManefist.xml 需不需要修改

大 GUY 是這樣，react-native-fbads 的 README 就有些簡單，關於 Android 的寫的也不多，算是一個大坑，AndroidFanefist 的修改還是看他們範例才發現的，不知道到底寫在文件的哪裡，若有人知道希望可以回報下讓我瞭解（感謝）。原生如果設定到 Build 成功，而且引入之後沒有噴錯基本上就 OK 了。若還有其它錯誤可以視為上游問題或 Native 層的問題（汗）

更新：結果就寫在 README 裡，眼殘崩潰，不過還是給我遇到個新坑，參見 callstack-io#17 (comment)

Audience Network 驗證流程

Audience Network 分成好幾個驗證階段，簡略過程如下：

拿到版位 Placement ID 之後編寫 App 顯示廣告的程式碼
在 Audience Network 新增應用程式 3. 用「原生模擬器」（iOS 就 Simulator，Android 要用 AVD）傳送廣告要求
等待應用程式審核通過

其中第三點「傳送廣告要求」是最多雷的，iOS 早早就審核過了，Android 怎麽發要求 Facebook 就是無法接到，最後改用 Android Studio 原生的模擬器就一次 OK，原來是沒法用 Genymotion 的模擬器跑…

最後上 TestFlight 之後在我自己手機上無法顯示，查了一下錯誤代碼 1001 - No Fill，發現原來是手機上沒有安裝 原生 FB App，難怪我 Dcard 從來沒看過廣告 XDD，以下是其它不會顯示廣告狀況，從文件引用：

Error 1001 - No Fill. May be due to one or more of the following:

User not logged into Native Facebook App on Mobile Device

Limit Ad Tracking turned on (iOS)

Opt out of interest-based ads turned on (Android)

No Ad Inventory for current user

Your testing device must have the native Facebook application installed.

Your application should attempt to make another request after 30 seconds.

Daily Oops!