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

1. 简介

上次更新时间： 2022 年 2 月 25 日

构建内容

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

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

学习内容

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

所需条件

  • Android Studio 3.6 或更高版本
  • Firebase 账号

2. 准备工作

获取代码

Firebase 官方指南在 GitHub 中提供了 示例代码。我们需要它来完成此项目。

7074c0e83b5fd4b1.png

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

3. 创建和设置 Firebase 项目

如需开始使用 Firebase，您需要创建并设置 Firebase 项目。

创建 Firebase 项目

  1. 登录 Firebase。

在 Firebase 控制台中，点击“添加项目”（或“创建项目”），然后将您的 Firebase 项目命名为“Webview-test-codelab”或您喜欢的任何名称。

fd93054e27d6b386.png

  1. 点击相应的项目创建选项。在系统提示是否接受 Firebase 条款时选择“接受”。您应为此项目启用 Google Analytics，因为您需要使用 Google Analytics 事件来跟踪操作事件并分析转化数据。

d711cb170a42a355.png

如需详细了解 Firebase 项目，请参阅 了解 Firebase 项目。

4. Android 的 Firebase 配置

在 Firebase 控制台中配置 Android

  1. 在 Firebase 控制台首页中，您可以点击 Android 图标，如下图所示。 143983fdc86ff670.png

或者，您可以前往左侧导航栏中的项目概览 ，然后点击“将 Firebase 添加至您的应用即可开始使用”下的 Android 按钮

然后，您会看到“将 Firebase 添加到 Android 应用”屏幕，如下图所示。

74e684bd64bd8d9d.png

  1. 您可以在应用目录中的 android/app/src/main/AndroidManifest.xml 中找到 Android 软件包名称（例如 com.xxxx.myproject）。
package="com.xxxx.myproject"
  1. 此处不需要 SHA-1 密钥。只有当您想使用 Google 登录 或 Firebase Dynamic Links，或者从 Google Play 导入应用内购买数据时，才需要此密钥，而这不属于此 Codelab 的范围。
  2. 点击注册应用 。
  3. 在 Firebase 控制台中下载配置文件 google-services.json，然后将此文件复制并粘贴到应用项目中的 android/app 目录中。a2c930b2dd517980.png
  4. 返回 Firebase 控制台，跳过其余的步骤，然后返回 Firebase 控制台的主页面。
  5. 最后，您需要使用 Google 服务 Gradle 插件 来读取 Firebase 生成的 google-services.json 文件
  6. 在 IDE 或编辑器中，打开 android/app/build.gradle，然后将以下代码行添加为文件的最后一行： 
apply plugin: 'com.google.gms.google-services'
  1. 打开 android/build.gradle。然后，在 buildscript 标记内添加新的依赖项。
buildscript { 
   repositories {
      // ...
   }
   dependencies {
      // ...
      Classpath 'com.google.gms:google-services:4.3.3'
   }
}
  1. 如果您的应用仍在运行，请将其关闭并重新构建，以允许 Gradle 安装依赖项。

您的应用已针对 Android 配置完毕！

5. 在 Web 中开发 Analytics Web 界面并记录自定义事件

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

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

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

66a13d9290c3b2c7.png

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

1bf11ba7b8fae269.png

当 Android 应用中的 WebView 中触发事件时，系统会调用“window.AnalyticsWebInterface”，并将事件转发到应用中的 WebInterface 代码。

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

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

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

这将安装 Firebase CLI。

  • firebase login
  • firebase init
  • 当系统询问您要设置哪些功能时，选择“托管”。
  • 选择为 Android 应用设置的项目。
  • 对于所有其余提示，接受默认设置即可。
  • firebase deploy --only hosting - 部署到 Firebase 托管。

a2c132502ffa8a04.png

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

86b44d7bf72383a7.png

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

如需使用 GA4F 跟踪 WebView 中的事件，您需要在 Web 和 Android 中插入代码。在本部分中，我们来看看您需要在 Android 应用中放置哪些代码，以接收来自 WebView 中网页的事件。

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

796981318ff44346.png

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

b1bd1d9bb50d418f.png

如需查看完整代码，请参阅您在“准备工作”步骤中从 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

在应用中点击“LOG EVENT 1”，如果您的代码运行良好，您将看到如下所示的日志。

f84d06d3534ad034.png

如果您想在 Firebase 控制台中进行检查，也可以使用“实时”标签页。前往 Firebase 控制台，然后点击“实时”标签页，如下图所示。

然后，使用“添加比较”功能过滤 Android 平台事件。

aa804eb02f0b7d3f.png

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

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

b72cf934a76e174b.png

如需在 Google Ads 中将 event1 导入为转化，请将标记为转化 开关向右滑动，将其标记为转化。

486010186b929deb.png

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

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

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

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

  1. 点击项目概览 旁边的按钮转到 Firebase 设置 。
  2. 在集成 标签页中，您会看到 Google Ads 和对应的关联 按钮。点击关联 ，然后点击继续 。

67fc1b7f75f9dcaa.png

  1. 选择 Google Ads 账号。

现在，Firebase 部分已完成。

转到 Google Ads。

  1. 登录并转到工具与设置 > 衡量 > 转化 ，用于将自定义事件导入为转化。
  2. 点击 + 按钮即可添加新的转化操作。

1eb800ed1ae776cc.png

  1. 选择 Google Analytics 4 媒体资源 (Firebase) ，然后点击继续 。

8b0a0b34b1d3eae2.png

  1. 您可以看到标记为转化的所有分析事件。找到我们之前实现的 event1 事件。

e2bd5e1f7b9b73d9.png

  1. 检查操作，点击导入 ，然后点击继续 。

2402f11ee4e3ed2e.png

将 event1 设置为转化操作后，您便可以发布带有 event1 事件的应用操作广告系列。

10. 使用导入的事件发布应用操作广告系列

  1. 转到当前账号的“广告系列”标签页，然后点击 + 按钮制作新的广告系列。点击新广告系列 ，然后点击继续 。
  2. 发布一个应用宣传广告系列，其中包含应用安装 选项。

eda56ea9bd38c6d5.png

  1. 输入应用名称、软件包名称或发布商，找到您的应用。
  2. 在出价 部分，从下拉菜单中选择应用内操作 。
  3. 在提供的列表中找到您的自定义事件。设置目标每次转化费用，并完成任何其他选项。

438e581eb1b40003.png

  1. 完成广告系列的设置。

11. 恭喜

恭喜！您已成功将 Firebase 与 Google Ads 集成！这有助于通过 Firebase 导入的事件提升广告系列的效果。

您学到的内容

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

12. 参考资料

官方指南

  • 在 WebView 中使用 Analytics - Firebase - Google

Firebase 和 Google Ads 设置