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.gradlebuild.gradleMainApplication.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.