本頁面由 Cloud Translation API 翻譯而成。

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

1. 簡介

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

建構項目

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

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

課程內容

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

軟硬體需求

Android Studio 3.6 以上版本
Firebase 帳戶

2. 開始設定

取得程式碼

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

如要開始使用，請下載程式碼，並在慣用的開發環境中開啟。我們將使用 2 個目錄：Android 和網路。「android」目錄適用於 Android 應用程式，「網站」目錄適用於應用程式，將透過 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 匯入 in_app_purchase 資料時，才需要這個金鑰，但這些資料不在本程式碼研究室的討論範圍內。
按一下「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」函式呼叫「AnayticsWebInterface」(Android) 和「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 程式碼，才能在 Web js 檔案中連結 logEvent 函式 (如下所示)。

接下來，您需要在「活動」中新增 JavaScript 介面，以呼叫 WebView，如下所示。

如要查看程式碼的完整程式碼，請參閱從 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 驗證

>adb logcat -v 時間 -s FA FA-SVC

按一下 [記錄事件 1]，如果程式碼正常運作，您會看到以下記錄。

你也可以前往「即時」分頁查看 Firebase 控制台。前往 Firebase 控制台，然後類似下方的「即時」分頁。

接著，使用「新增比較項目」篩選 Android 平台事件函式。

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

幾小時後，您就能在 Firebase 控制台的「事件」分頁中查看已記錄的事件。只要在 Firebase 控制台的 Analytics 專區中按一下「事件」分頁標籤即可。只要按一下事件，也可以查看事件 event1 中的值。

如要在 Google Ads 中將「event1」匯入為轉換，請將「標示為轉換」切換鈕向右滑動。

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

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

9. 在 Google Ads 中匯入數據分析事件

Firebase 設定完成後，您就可以推出含有動作事件的應用程式廣告活動。首先，請將 Firebase 連結至 Google Ads。只要將 Firebase 連結至 Google Ads，應用程式廣告活動就能匯入 Firebase 事件。這也有助 Google Ads 進一步瞭解目標對象，進而提升應用程式廣告活動。