此页面由 Cloud Translation API 翻译。

使用 Google Analytics 在 WebView 中跟踪事件

1. 简介

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

构建内容

在此 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 配置

配置 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. 在网络中开发 Google Analytics 网络界面并记录自定义事件

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

在本部分中，我们来看一下您需要将哪些代码放到网络中。

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

6d9fac050fb64f4e

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

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

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。

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

要使用 Google Analytics 跟踪 WebView 中的事件，您需要将代码同时插入到网站和 Android 设备中。在本部分中，我们来看一下需要在 Android 应用中放置哪些代码。

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

6f069f438e4667ba

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

如果您的代码能够正常运行，您将看到如下所示的日志。

33c64f811e7e9a0f

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

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

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

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

通过将标记为转化开关向右滑动，将event1标记为转化。

486010186b929deb

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

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

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

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