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

透過 Google Analytics 在 WebView 中追蹤事件

1. 簡介

上次更新時間：2021 年 12 月 22 日

建構項目

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

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

課程內容

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

軟硬體需求

Android Studio 3.6 以上版本
Firebase 帳戶

2. 開始設定

取得程式碼

Firebase 指南文件會將本專案所需的程式碼範例提供給 GitHub。

如要開始使用，請擷取程式碼，然後在慣用的開發環境中開啟。我們將使用 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 設定

設定 Android

在 Firebase 控制台中，選取左側導覽列的「專案總覽」，然後按一下「開始將 Firebase 新增至應用程式」下方的「Android」按鈕。

下一個畫面會顯示對話方塊。

提供的重要值是 Android 套件名稱，您將透過下列步驟取得。

在應用程式目錄中，開啟 android/app/src/main/AndroidManifest.xml 檔案。
在 manifest 元素中，找出 package 屬性的字串值。這個值是 Android 套件名稱 (格式為 com.yourcompany.yourproject)。複製這個值。
在 Firebase 對話方塊中，將複製的套件名稱貼到 Android package name 欄位中。
除非您打算使用 Google 登入或 Firebase Dynamic Links (請注意，這些金鑰並不屬於本程式碼研究室)，否則您不需要使用 SHA-1 金鑰。如果您打算從 Google Play 匯入「in_app_purchase」資料，稍後必須設定金鑰。
按一下「Register App」。
繼續透過 Firebase 操作，請按照操作說明下載設定檔 google-services.json。

前往應用程式目錄，將剛才下載的 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 檔案。在範例程式碼中，稱為 index.js 的 js 檔案。您必須建立「logEvent」函式呼叫 AnayticsWebInterface (適用於 Android) 以及 messageHander (適用於 iOS)，如下所示。

請在您想要追蹤事件的位置呼叫此函式，如下所示。

在 Android 的 WebView 中觸發的事件時，「window.AnalyticsWebInterface」這個 SDK 會將事件連結至原生應用程式。

6. 主機網站目錄可取得網頁網址

您必須先提供網頁網址，才能在應用程式的 WebView 中呼叫網頁。代管網頁的方法有很多種，但在本程式碼研究室中，我們會引導您使用 Firebase 託管服務，確保一切順利。

在終端機中輸入網站目錄 (例如cd web)，然後執行下列指令：
npm install -g firebase-tools - 這麼做會安裝 Firebase CLI。
firebase login
firebase init
選擇「代管」當系統詢問你想設定的功能時，
選擇你要為 Android 應用程式設定的專案。
接受所有其他提示的預設設定。
firebase deploy --only hosting：部署至 Firebase 託管。

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

若要使用 Google Analytics 追蹤 WebView 中的事件，您必須將程式碼同時插入網站和 Android 中。在本單元中，我們來看看需要在 Android 應用程式中加入哪些程式碼。

建立「AnalyticsWebInterface.java」即可將「AnalyticsWebInterface」檔案設為類別在本課程中，您需要編寫 @JavascriptInterface 程式碼，才能在 Web js 檔案中連結 logEvent 函式 (如下所示)。

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

如要查看完整程式碼，請參閱您在「開始設定」採用

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

如果您的程式碼運作正常，您會看到類似下方的記錄。

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

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

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

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

將「標示為轉換」切換按鈕向右滑動，將 event1 標示為轉換。

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

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

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

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