如果您要构建的应用可在离线状态下运行,那么了解用户在没有连接的情况下如何与您的应用互动,对于优化该体验至关重要。
分析服务提供商(如 Google Analytics 需要使用广告网络 将数据发送到服务器,这意味着如果连接 这些请求将失败,这些互动也将 您的分析报告中缺少哪些数据一切好像从未发生过。
Workbox Google Analytics 为 Google Analytics 用户解决了这个问题,具体方法为: 利用 Service Worker 的功能检测失败的请求。
Google Analytics 通过向 Measurement Protocol 这意味着 Service Worker 脚本可以添加一个提取处理程序来检测 向 Measurement Protocol 发送失败的请求它可以将这些请求存储在 IndexedDB 中,然后在连接恢复后稍后重试。
Workbox Google Analytics 正是为此而生。还会添加
来缓存
analytics.js 和
gtag.js
因此它们也可以离线运行。最后,当失败的请求
Workbox Google Analytics 还会自动设置(或更新)
qt
,以确保 Google Analytics 中的时间戳反映
初始用户互动的时间
启用 Workbox Google Analytics
如需启用 Workbox Google Analytics,请调用 initialize()
方法:
import * as googleAnalytics from 'workbox-google-analytics';
googleAnalytics.initialize();
这是将失败的请求加入队列并重新尝试 它是让 Google Analytics 正常运行的最简单方法 离线使用。
不过,如果只使用上述代码,重试的请求将 这与首次尝试成功的请求无法区分。这意味着 您将会收到来自线下用户的所有互动数据, 能够判断出用户离线时发生了哪些互动。
为了解决此问题,您可以使用 来修改或注释在 重试请求。
修改要发送的数据
如果您希望能够区分重试的请求和未重试的请求,可以指定 parameterOverrides
或 hitFilter
配置选项。
利用这些选项,您可以修改
Measurement Protocol 参数
发出的所有请求如果您想为每个重试请求的特定参数设置相同的值,则应使用 parameterOverrides
选项。如果需要在运行时计算特定参数的值或从其他参数的值派生值,则应使用 hitFilter
选项。
以下示例展示了如何使用这两种选项。
示例
使用自定义维度跟踪线上和线下互动
Google Analytics 没有用于衡量线上与线下互动的内置维度。不过,您可以自行创建维度 一种称为 自定义维度。
如需使用 Workbox Google Analytics 与自定义维度一起跟踪由服务工件重放的请求,请按以下步骤操作:
- 创建新的自定义维度 。为其命名,例如“网络状态”并将其设置为 将范围限定为“匹配” (因为任何互动都可能是线下的)。
记下为新创建的维度指定的索引,然后将 将其作为参数名称传递给
parameterOverrides
配置选项 添加到 Workbox Google Analytics 代码中。例如,如果这是您的第一个自定义维度,则其编号为
1
,参数名称为cd1
(如果编号为8
,则为cd8
):import * as googleAnalytics from 'workbox-google-analytics'; googleAnalytics.initialize({ parameterOverrides: { cd1: 'offline', }, });
(可选)由于仅应用
parameterOverrides
中的值 重试(“离线”)请求,您可能还需要设置一个默认值 /“在线”所有其他请求。虽然这不是绝对必要的 将使报告更易于阅读
例如,如果您使用默认的 analytics.js 跟踪代码段安装 Google Analytics,则可以添加ga('set', 'dimension1', 'online')
行,以便为服务工件未重放的所有请求使用“网络状态”自定义维度的默认值'online'
。<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXX-Y', 'auto'); // Set default value of custom dimension 1 to 'online' ga('set', 'dimension1', 'online'); ga('send', 'pageview'); </script>
使用自定义指标跟踪请求在队列中花费的时间
如果您想知道某次离线访问之间经过了多长时间
但连接恢复的时间和请求的状态,
重试之后,您可以使用
自定义指标和
hitFilter
配置选项:
- 创建新的自定义指标 。为其命名(例如“离线队列时间”),将其范围设置为“命中”,并将其格式设置类型设置为“时间”(以秒为单位)。
使用
hitFilter
选项可获取qt
param 并将其除以 1000(可转换为秒)。然后,将该值作为参数设置为新创建的指标的索引。如果这是您 第一个自定义指标,参数名称将为'cm1'
:import * as googleAnalytics from 'workbox-google-analytics'; googleAnalytics.initialize({ hitFilter: (params) => { const queueTimeInSeconds = Math.round(params.get('qt') / 1000); params.set('cm1', queueTimeInSeconds); }, });
测试 Workbox Google Analytics
由于 Workbox Google Analytics 使用后台同步功能重放事件,因此它可以 测试起来不够直观如需了解详情,请参阅测试 Workbox 后台同步。
类型
GoogleAnalyticsInitializeOptions
属性
-
cacheName
字符串(选填)
-
parameterOverrides
对象(可选)
-
hitFilter
void 可选
hitFilter
函数如下所示:(params: URLSearchParams) => {...}
-
params
URLSearchParams
-
方法
initialize()
workbox-google-analytics.initialize(
options?: GoogleAnalyticsInitializeOptions,
)