如何將Firebase Analytics添加到NativeScript移動應用程序中

當您想要盡快發布移動應用時，我們都知道這一點。 你工作了幾個月，經過測試，它看起來不錯，而你的重要人物甚至喜歡它。 您和已發布的應用之間需要做的最后一件事是更多的工作。 然而，為您的應用添加分析是一項值得投資的工作。只需半小時的工作，您就會知道用戶需要什么，如何滿足他們的需求，以及在哪里投入寶貴的開發時間。

先決條件

在開始之前，您需要使用自己的Google帳戶創建新的Firebase應用程序。 只需點擊幾下即可實現。 Firebase提供免費套餐，涵蓋了所有Google Analytics服務，因此您無需取出信用卡。 導航至 https://firebase.google.com ，使用您的Google憑據進行身份驗證，然后按照“添加項目”向導進行操作。 通常，除非您具有與“分析”以外的服務相關的特定要求，否則您無需更改“步驟3”中的任何默認選項。

在新創建的項目中，您必須導航到項目設置并添加iOS和Android應用程序。 對于iOS中的Bundle ID或Android中的Package名稱，請使用 NativeScript應用程序中 applicationId 設置 的 屬性 值 package.json 。 因此，您應該擁有 GoogleServices-Info.plist 和 google-services.json 文件。 這些文件包含Firebase SDK用于將用戶交互與Google Analytics項目正確關聯的配置屬性。 您可以安全地跳過有關如何添加Firebase SDK以及如何向應用添加初始化代碼的說明，因為此設置將由插件處理。 以下是該過程對iOS的看法（Android非常相似）：

建立

首先，您需要安裝 nativescript-plugin-firebase 插件。 按照 Eddy Vebruggen（這個很棒的插件的作者）提供 的 安裝步驟 進行操作。 你需要把 GoogleServices-Info.plist 該文件 App_Resources/iOS 夾以及 google-services.json 中 App_Resources/Android 的文件夾。 firebase.nativescript.json 一旦完成插件的安裝， 一個附加文件 將添加到項目的根目錄中。 在安裝過程中，您必須回答幾個有關您計劃使用的Firebase插件部分的問題。 輸出是一個 firebase.nativescript.json 文件，看起來應該類似于：

{

“using_ios”：是的，

“using_android”：是的，

“firestore”：假的，

“realtimedb”：虛假，

“remote_config”：false，

“消息”：虛假，

“崩潰”：真的，

“crash_reporting”：false，

“存儲”：錯誤，

“facebook_auth”：false，

“google_auth”：false，

“admob”：假的，

“邀請”：假，

“dynamic_links”：false，

“ml_kit”：false

}

注意： 您絕不應將GoogleServices-Info.plist和google-services.json文件提交到公共存儲庫。 它們包含您的秘密，如果沒有得到適當保護，其他人將能夠利用您帳戶中的數據。 理想情況下，應該通過CI基礎結構為生產構建插入構建時間。

下一步是在應用程序中初始化插件。 最合適的地方是 Angular應用程序 的 根組件  ，如 啟動接線說明中所述 。 它很簡單：

app.component.ts

導入 *  的 火力 從 “nativescript-插件，火力點” ;

...

ngOnInit（）：void {

firebase。init（{

          }）。然后（

            instance  => {

              控制臺。log（“firebase.init done”）;

            }，

            error  => {

              控制臺。log（`firebase.init error：$ { error } `）;

            }

          ）;

};

如果您使用的是{N}核心框架，則可以使用該應用程序的啟動事件并附加到該框架：

app.js

申請。上（應用。launchEvent，（ARGS）=> {

    firebase。init（{

          }）。然后（

            instance  => {

              控制臺。log（“firebase.init done”）;

            }，

            error  => {

              控制臺。log（`firebase.init error：$ { error } `）;

            }

          ）;

    };

}）;

完成安裝后，運行 tns run 命令。 當您的應用程序在您的設備上啟動時，您應該會在Google Analytics信息中心的“最近30分鐘內的用戶”磁貼中看到一些動作。 車輪開始旋轉的另一個跡象是，一旦第一個數據被注冊，iOS和Android項目旁邊的紅點就會消失：

完成所有這些后，您已經領先于游戲，并且比Android和iOS開發人員控制臺中的曝光更具洞察力。 火力地堡將開始跟蹤一些事件為你的盒子，如：   first_open ，   screen_view ，和   session_start   （名單與自動跟蹤的事件，可以發現 在文檔中 ）。 它還會報告有關您的用戶的一些人口統計信息 - 他們所在的國家/地區，性別，年齡，興趣，他們使用的設備以及他們未使用的設備。 此外，您的用戶將自動報告為新用戶或返回用戶。 這將使您更好地了解您的受眾及其興趣，并調整您的應用程序，使其更具吸引力。 您可以使用該 setUserProperty   方法 輕松地為用戶添加其他信息，   并進一步將用戶群劃分為多個細分。

跟蹤頁面視圖

雖然Firebase會 screen_view 自動 跟蹤名為“  ”的 事件 ，但由于NativeScript的體系結構，它們不會非常有用。 所有用戶的約定都將在Android的一個Activity或iOS的ViewController中報告。 因此，為了更好地理解我們的應用程序的使用方式，我們需要實現一個自定義事件，并添加一些屬性。

出于本文的目的，我將此類活動稱為“頁面瀏覽量”。 這個術語可能很模糊，根據您的應用程序，具體細節可能意味著不同的東西。 此外，我們不僅要跟蹤頁面被查看，還要跟蹤哪個頁面，以便我們可以分析哪些頁面最有用。

所有這些都可以使用nativescript-plugin-firebase插件公開的API輕松實現。 分析對象提供了   logEvent   完全符合我們需要的方法。 這是一個示例代碼段：

導入 *  的 火力 從 “nativescript-插件，火力點” ;

...

firebase。分析。logEvent（{

    key：“page_view”，

    參數：[

           {

                key：“page_id”，

                價值：“家”

           }

           //如果需要，可在此處添加其他參數

    ]

}）;

這將記錄一個名為“  page_view ”  的事件 ，其參數“  page_id ”的值為“  Home ”。 一種方法是在每個Component初始化時添加手動調用。 這將是一項非常繁瑣且容易出錯的任務，我們可以做得比這更好。 讓我們利用Angular路由器公開的事件并在那里記錄事件，如下所示：

app.component.ts

這個。路由器。事件

    。pipe（filter（（event：any）=>  事件 instanceof  NavigationEnd））

    。subscribe（（event：NavigationEnd）=> {

        firebase。分析。logEvent（{

            key：“page_view”，

            參數：[{

                key：“page_id”，

                價值：事件。urlAfterRedirects

            }]

        }）;

    }）;

注意： 如果您使用的是{N}核心框架，則可以使用該  navigatedTo 事件并實現類似的邏輯。

這將使用URL作為   page_id   值。 在大多數情況下，它可以很好地表示訪問哪些URL以及訪問頻率。 當然，如果您的URL架構不合適，您可以滿足您的需求。

一個缺陷是您需要在開始使用之前在Firebase控制臺中注冊參數。 要執行此操作，請在Firebase控制臺中打開項目，打開“事件”屏幕，單擊“  page_view ”事件并顯示“添加事件參數”按鈕。 從那里，添加您要跟蹤的參數 - 在我們的例子中，這是'  page_id 。'

此時，您將了解應用程序的哪些部分最有用。 通過此添加，您將獲得用戶的完整地圖以及他們與您的移動應用互動的方式。 以下是它在Firebase控制臺中的外觀：

跟蹤轉化

根據應用程序的用途，您可能需要跟蹤轉換的不同內容。 默認情況下，有ecommerce_purchase和in_app_purchase等事件。 您可以將任何現有事件標記為轉換，具體取決于用戶的流程和業務邏輯。 要執行此操作，只需導航到“轉換”屏幕并按照“新建轉換事件”向導進行操作。

此外，您還可以創建渠道來跟蹤轉化的進展情況，并確定用戶旅程中需要改進的區域。 這也是從漏斗屏幕很容易實現的。

作為一個非常簡單的例子，我準備 了一個示例應用程序 。 在主頁上，有兩個按鈕：“添加到購物車”和“購買”。 “購買”按鈕將使用Firebase考慮轉化的其中一個內置密鑰記錄新事件，稱為“ecommerce_purchase”。 另一個按鈕“添加到購物車”正在記錄一個名為“add_to_cart”的新事件，我可以將其標記為來自Firebase控制臺的轉換。 通過這種方式，我可以輕松構建一個漏斗來跟蹤我的轉化，例如“first_open” - >“add_to_cart” - >“ecommerce_purchase”。 這將讓我深入了解我應該在哪里改善用戶體驗和轉化。 以下是漏斗在采取這些步驟后可以看到的方式：

顯然，現在我的虛擬漏斗中有一些東西需要解決！

故障排除

從Firebase控制臺中無法立即看到從您的應用程序記錄的事件。 數據最多可能需要24小時才能獲得。 根據我的經驗，至少需要幾個小時。 這可能會使調試變得困難，因為您必須等待很長時間才能測試更改。

幸運的是，Firebase控制臺中有一個名為“DebugView”的視圖。 您需要為您的應用程序或設備啟用它，然后，一旦報告，您的設備上的事件就會立即顯示。 對于Android，這就像運行一樣簡單：

adb shell setprop debug.firebase.analytics.app <packageName，like：org.nativescript.nativescriptanalyticssample>

對于iOS，您必須在XCode中打開項目并添加 -FIRDebugEnabled   要在啟動時傳遞 的   參數。 有關如何實現此目標的更多信息，請參閱 Firebase文檔 。

摘要

總而言之，添加Google Analytics非常簡單，讓您更聰明，可以節省您的時間和金錢，而且絕對沒有理由不開始這樣做。 Firebase免費提供優質功能，但您還可以瀏覽其他優秀的Google Analytics服務。 您需要做的最難的事情是考慮應用程序成功的含義并定義如何衡量它。 實際測量現在很容易。