此页面由 Cloud Translation API 翻译。

使用 Google Analytics for Firebase 在 WebView 中跟踪事件

1. 简介

上次更新日期：2022 年 2 月 25 日

构建内容

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

我们将使用示例 Hybrid Android 应用，该应用使用 WebView 调用网页。

学习内容

如何在 Hybrid 应用中初始化 GA4F (Google Analytics for Firebase)
如何在网页中创建自定义事件和参数
如何在 WebView 中将网页上的事件转发到原生代码
如何调试
如何导入事件并将其用于操作广告系列。

所需条件

Android Studio 3.6 或更高版本
Firebase 账号

2. 准备工作

获取代码

Firebase 官方指南在 GitHub 中提供了示例代码。我们需要为这个项目使用它。

7074c0e83b5fd4b1

首先，您需要下载代码并在您喜爱的开发环境中打开它。我们将使用 2 个目录：android 和 web。“android”“Web”目录的目录目录对应的是应用将通过 WebView 调用的网页。

3. 创建和设置 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 应用”如下图所示。

74e684bd64bd8d9d

您可以在应用目录的 android/app/src/main/AndroidManifest.xml 中找到 Android 软件包名称（例如 com.xxxx.myproject）。

package="com.xxxx.myproject"

此处不需要 SHA-1 密钥。仅当您想使用 Google 登录或 Firebase Dynamic Links 或者从 Google Play 导入 in_app_purchase 数据时才需要此密钥，此 Codelab 不在此 Codelab 的范围内。
点击注册应用。
在 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. 在网络中开发 Google Analytics 网络界面并记录自定义事件

如需使用 Google Analytics 跟踪 WebView 中的事件，您需要将代码同时插入网站应用和 Android 应用。

在本部分中，让我们看一下您需要将哪些代码放入网页中。

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

66a13d9290c3b2c7

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

1bf11ba7b8fae269

在 Android 应用的 WebView 中触发事件时，“window.AnalyticsWebInterface”将被调用，并且它会将事件转发到应用中的 WebInterface 代码。

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

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

在终端中，输入 Web 目录（例如cd web）并运行以下命令：
npm install -g firebase-tools

这将安装 Firebase CLI

firebase login
firebase init
选择“Hosting”（托管）当系统询问您想设置哪项功能时。
选择您为 Android 应用设置的项目。
接受所有其余提示的默认值。
firebase deploy --only hosting - 部署到 Firebase Hosting。

获取网页网址后，前往 Android Studio 中的应用项目，然后在 WebView 中插入此步骤中创建的网址，如下所示。

86b44d7bf72383a7

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

如需使用 GA4F 在 WebView 中跟踪事件，您需要将代码同时插入到网站和 Android 设备中。在本部分中，我们来看看您需要在 Android 应用中放置哪些代码，才能在 WebView 中接收来自网页的事件。

创建“AnalyticsWebInterface.java”“AnalyticsWebInterface”了类。在该类中，您需要编写 @JavascriptInterface 代码，以连接网络 js 文件中的 logEvent 函数，如下所示。

796981318ff44346

接下来，您需要在 activity 中添加用于调用 WebView 的 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

点击“记录事件 1”如果您的代码运行良好，您会看到如下所示的日志。

如果您想在 Firebase 控制台中查看，还可以使用“实时”标签页。转到 Firebase 控制台，然后点击如下所示的“实时”标签页。

然后，使用“添加对比项”过滤 Android 平台事件函数。

如果您的代码已正确实现，您会在“实时”标签页中看到来自 Android 应用的事件。 334afcae650c58d4

几小时后，您就可以在 Firebase 控制台的“事件”标签页中看到记录的事件。只需在 Firebase 控制台的“Analytics”部分点击事件标签页即可。您还可以点击事件 event1，查看事件中的值。

要将event1作为转化导入 Google Ads，请将标记为转化开关向右滑动，将其标记为转化。

486010186b929deb

如果该事件位于“转化”标签页中，则表示您已成功将该事件标记为转化。Google Ads 现在可以从 Firebase 导入此事件。

出于调试目的，请使用 Firebase DebugView。如需了解详情，请参阅调试事件。

9. 在 Google Ads 中导入分析事件

完成 Firebase 设置后，您就可以发布包含操作事件的应用广告系列了。首先，将 Firebase 与 Google Ads 相关联。将 Firebase 与 Google Ads 相关联后，应用广告系列即可导入 Firebase 事件。这样，Google Ads 就能帮助 Google Ads 详细了解受众群体，从而提升应用广告系列的效果。