Native Ads?

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

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

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

React Native Integration

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

花式踩雷

先講結論：

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

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-stage

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

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

其中第三點「傳送廣告要求」是最多雷的，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.