Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

透過 Google Analytics 在 WebView 中追蹤事件

1. 簡介

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

建構項目

在本程式碼研究室中，您將瞭解如何將 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 設定

設定 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 追蹤網頁檢視中的事件，您必須在網頁和 Android 應用程式中插入程式碼。

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

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

然後在要追蹤事件的位置呼叫這個函式，如下所示。

在 Android 的 WebView 中觸發事件時，系統會呼叫「window.AnalyticsWebInterface」，並將事件連結至原生應用程式。

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 追蹤網頁檢視中的事件，您需要在網頁和 Android 中插入程式碼。在本節中，我們將瞭解您需要在 Android 應用程式中加入哪些程式碼。

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

接著，您需要在 Activity 中新增 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 VERBOSE

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

如果程式碼運作正常，您會看到如下所示的記錄。

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

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

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

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

將「標示為轉換」切換鈕滑到右側，將 event1 標示為轉換。

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

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

9. 在 Google Ads 中匯入 Analytics 事件

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