使用 Google Analytics 在 WebView 中跟踪事件

1. 简介

上次更新日期：2021 年 12 月 22 日

构建内容

在此 Codelab 中，您将学习如何将 WebView 中的网页事件转发到原生代码，以便 GA4F 可以跟踪这些事件。

我们将使用通过 WebView 调用网页的混合 Android 应用示例。

学习内容

如何在混合应用中初始化 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 项目命名为“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 密钥（请注意，这些并非此 Codelab 的一部分）。如果您打算从 Google Play 导入 in_app_purchase 数据，则稍后必须设置该密钥。
点击注册应用。
还是在 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. 在 Web 中开发 Analytics Web 界面并记录自定义事件

如需使用 Google Analytics 跟踪 WebView 中的事件，您需要在 Web 应用和 Android 应用中都插入代码。

在此部分中，我们来看看您需要在网页中放置哪些代码。

首先，创建一个要在 HTML 文件中使用的 JavaScript 文件。在示例代码中，js 文件名为 index.js。您需要创建函数“logEvent”，以便为 Android 调用 AnalyticsWebInterface，并为 iOS 调用 messageHander，如以下代码所示。

在您想要跟踪事件的位置调用此函数，如下所示。

当 Android 中的 WebView 触发事件时，系统会调用“window.AnalyticsWebInterface”，并将事件连接到原生应用。

6. 托管网页目录以获取网页网址

在应用中调用 WebView 内的网页之前，您需要一个网页网址。有很多方法可以托管网页，但在此 Codelab 中，为方便起见，我们将引导您使用 Firebase Hosting 服务。

在终端中，输入 Web 目录（例如 cd web），然后运行以下命令：
npm install -g firebase-tools - 这将安装 Firebase CLI。
firebase login
firebase init
当系统询问您要设置哪项功能时，请选择“托管”。
选择您为 Android 应用设置的项目。
对于其余所有提示，接受默认设置即可。
firebase deploy --only hosting - 部署到 Firebase 托管。

7. 在 Android 应用中开发接口代码

如需使用 Google Analytics 跟踪 WebView 中的事件，您需要在 Web 和 Android 中都插入代码。在本部分中，我们来看看需要在 Android 应用中放置哪些代码。

创建“AnalyticsWebInterface.java”文件以生成“AnalyticsWebInterface”类。在此类中，您需要对 @JavascriptInterface 进行编码，以连接 Web js 文件中的 logEvent 函数，如下所示。

接下来，您需要在调用 WebView 的 activity 中添加 JavaScript 接口，如下所示。

如需查看其完整代码，请参阅您在“准备工作”步骤中下载的示例代码。

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 中导入分析事件

完成 Firebase-Flutter 设置后，您可以随时发布带有操作事件的应用广告系列。首先，将 Firebase 关联到 Google Ads。通过将 Firebase 关联到 Google Ads，应用广告系列可导入 Firebase 事件。这样，Google Ads 就能帮助 Google Ads 详细了解受众群体，从而提升应用广告系列的效果。