使用 Google Analytics for Firebase 追蹤 WebView 中的事件

1. 簡介

上次更新時間：2022 年 2 月 25 日

建構項目

在本程式碼研究室中，您將瞭解如何將 WebView 內網頁的事件轉送至原生程式碼，以便 GA4F 追蹤事件。

我們將使用範例 Hybrid Android 應用程式，透過 WebView 呼叫網頁。

課程內容

如何在混合式應用程式中初始化 GA4F (Google Analytics for Firebase)
如何在網頁中建立自訂事件和參數
如何將 WebView 中網頁上的事件轉送至原生程式碼
偵錯方式
如何匯入事件，並用於動作廣告活動。

軟硬體需求

Android Studio 3.6 以上版本
Firebase 帳戶

2. 開始設定

取得程式碼

Firebase 官方指南提供 GitHub 中的程式碼範例。我們需要這項資訊才能完成專案。

如要開始進行本專案，請先下載程式碼並在慣用的開發環境中開啟。我們會使用 2 個目錄：android 和 web。「android」目錄適用於 Android 應用程式，「web」目錄則適用於應用程式透過 WebView 呼叫的網頁。

3. 建立及設定 Firebase 專案

如要開始使用 Firebase，請建立及設定 Firebase 專案。

建立 Firebase 專案

登入 Firebase。

在 Firebase 控制台中，按一下「新增專案」或「建立專案」，然後將 Firebase 專案命名為 Webview-test-codelab 或任何您喜歡的名稱。

點選專案建立選項。當系統顯示提示時，請接受 Firebase 條款。您應為這項專案啟用 Google Analytics，因為您需要 Google Analytics 事件來追蹤動作事件及分析轉換。

如要進一步瞭解 Firebase 專案，請參閱「瞭解 Firebase 專案」一文。

4. Android 適用的 Firebase 設定

在 Firebase 控制台中設定 Android

在 Firebase 控制台首頁中，您可以點選 Android 圖示，如下所示。

或者，您也可以前往左側導覽列中的「專案總覽」，然後按一下「將 Firebase 新增至應用程式即可開始使用」下方的「Android」按鈕

接著會看到「將 Firebase 新增至您的 Android 應用程式」畫面，如下所示。

您可以在應用程式目錄的 android/app/src/main/AndroidManifest.xml 中找到 Android 套件名稱 (例如：com.xxxx.myproject)。

package="com.xxxx.myproject"

這裡不需要 SHA-1 金鑰。只有在您想使用 Google 登入或 Firebase 動態連結，或是從 Google Play 匯入應用程式內購資料時，才需要這個金鑰，但這並非本程式碼研究室的範圍。
按一下「Register App」(註冊應用程式)。
在 Firebase 主控台下載設定檔 google-services.json，然後將這個檔案複製並貼到應用程式專案的 android/app 目錄中。
返回 Firebase 控制台，略過其餘步驟，然後返回 Firebase 控制台主頁面。
最後，您需要 Google 服務 Gradle 外掛程式，才能讀取 Firebase 產生的 google-services.json 檔案
在 IDE 或編輯器中開啟 android/app/build.gradle，然後在檔案中最後一行加入下列程式碼：

apply plugin: 'com.google.gms.google-services'

開啟 android/build.gradle。然後在 buildscript 標記內新增依附元件。

buildscript { 
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}

如果應用程式仍在執行中，請關閉並重建應用程式，讓 Gradle 安裝依附元件。

您已完成 Android 應用程式設定！

5. 在網頁中開發 Analytics 網頁介面，並記錄自訂事件

如要使用 Google Analytics 追蹤 WebView 中的事件，您必須在網站和 Android 應用程式中插入程式碼。

在本節中，我們將瞭解需要在網頁中加入哪些程式碼。

首先，請建立要在 HTML 檔案中使用的 JavaScript 檔案。在程式碼範例中，js 檔案名為 index.js。您需要建立「logEvent」函式，以便為 Android 呼叫「AnayticsWebInterface」，並為 iOS 呼叫「messageHander」，如下列程式碼所示。

然後在 HTML 檔案中呼叫這個函式，追蹤事件，如下所示。

在 Android 應用程式的 WebView 中觸發事件時，系統會呼叫「window.AnalyticsWebInterface」，並將事件轉送至應用程式中的 WebInterface 程式碼。

6. 託管網頁目錄，取得網頁網址

在應用程式的 WebView 中呼叫網頁之前，您需要網頁網址。網頁的代管方式有很多種。在本程式碼研究室中，我們將使用 Firebase 託管服務，方便您操作。

在終端機中輸入網頁目錄 (例如 cd web)，然後執行下列指令：
npm install -g firebase-tools

這會安裝 Firebase CLI。

firebase login
firebase init
系統詢問要設定的功能時，請選擇「託管」。
選擇為 Android 應用程式設定的專案。
接受所有其餘提示的預設值。
firebase deploy --only hosting - 部署至 Firebase 託管。

取得網頁網址後，請前往 Android Studio 中的應用程式專案，並在 WebView 中插入這個步驟剛建立的網頁網址，如下所示。

7. 在 Android 應用程式中開發介面程式碼

如要使用 GA4F 追蹤 WebView 中的事件，您必須在網頁和 Android 中插入程式碼。在本節中，我們將瞭解您需要在 Android 應用程式中加入哪些程式碼，才能接收 WebView 網頁中的事件。

建立「AnalyticsWebInterface.java」檔案，製作「AnalyticsWebInterface」類別。在這個課程中，您需要編寫 @JavascriptInterface，才能連結網頁 js 檔案中的 logEvent 函式，如下所示。

接著，您需要在呼叫 WebView 的 Activity 中新增 JavaScript 介面，如下所示。

如要查看完整程式碼，請參閱「設定」步驟中從 GitHub 下載的程式碼範例。

8. 檢查及偵錯事件

如要偵錯事件，請連線測試裝置或啟動模擬器，然後在 Android Studio 終端機中使用下列程式碼。

> adb shell setprop debug.firebase.analytics.app [應用程式套件名稱]

> adb shell setprop log.tag.FA VERBOSE

> adb shell setprop log.tag.FA-SVC VERBOSE

> adb logcat -v time -s FA FA-SVC

在應用程式中點選「LOG EVENT 1」，如果程式碼運作正常，您會看到如下所示的記錄。

如要透過 Firebase 控制台查看，也可以使用「即時」分頁。前往 Firebase 控制台，然後點選「即時」分頁標籤，如下所示。

然後使用「新增比較項目」功能，篩選 Android 平台事件。

如果程式碼導入正確，您會在「即時」分頁中看到 Android 應用程式的事件。

過幾小時後，您就能在 Firebase 控制台的「事件」分頁中，看到記錄的事件。只要在 Firebase 控制台的「Analytics」部分中，按一下「事件」分頁標籤，您也可以點選事件，查看事件 event1 內的值。

如要將「event1」匯入 Google Ads 做為轉換，請將「標示為轉換」切換鈕滑到右側，將其標示為轉換。

如果事件顯示在「轉換」分頁中，表示您已成功將事件標示為轉換。Google Ads 現在可以從 Firebase 匯入這項事件。

如要進行偵錯，請使用 Firebase DebugView。詳情請參閱「偵錯事件」。

9. 在 Google Ads 中匯入 Analytics 事件

完成 Firebase 設定後，即可放送含有動作事件的應用程式廣告活動。首先，請將 Firebase 連結至 Google Ads。將 Firebase 連結至 Google Ads 後，應用程式廣告活動就能匯入 Firebase 事件。此外，Google Ads 也能藉此進一步瞭解目標對象，進而提升應用程式廣告活動成效。