介绍
Google Analytics 是一个免费的 Web 分析服务,可以帮助网站或应用程序的开发者了解用户行为和应用性能等各种数据。通过为您的 React 应用程序添加 Google Analytics,您可以轻松地跟踪用户浏览和交互。
在本文中,我们将了解如何在 React 应用程序中添加 Google Analytics 并跟踪用户浏览和事件。
步骤
1. 创建 Google Analytics 账户
第一步是创建一个 Google Analytics 账户。在 Google Analytics 网站 上,单击“开始免费使用”来创建您的帐户。
2. 创建追踪 ID
创建帐户后,您需要为您的应用程序创建一个追踪 ID。要执行此操作,请转到“提取追踪代码” 菜单,然后单击“新建追踪代码”按钮。在这一步,您需要选择应用程序的平台和名称以及相关细节。
3. 集成 Google Analytics 到 React
一旦您获得了追踪 ID ,您就可以将 Google Analytics 集成到您的应用程序中。我们将使用 react-ga 库实现这一目的。
首先,使用 npm 或 yarn 安装 react-ga:
--- ------- -------- ------
或者,使用 yarn:
---- --- --------
在应用程序中,我们需要将 react-ga 初始化配置和 Google Analytics 追踪 ID 联系起来。要执行此操作,请创建 index.js
,导入 ReactGA
库并在应用程序的入口点处添加以下代码:
------ ------- ---- ----------- ---------------------------------------
在这里,我们需要将 YOUR_TRACKING_ID
替换为您的 Google Analytics 追踪 ID。
接下来,我们将添加一个 React Router 路由器来跟踪页面浏览的事件。我们使用 useEffect()
hook 仅在组件第一次加载时执行以下代码:
------ - --------- - ---- -------- ------ - ----- - ---- ------------------- ------ ------- ---- ----------- -------- ----- - ------------ -- - ----------------------------------------- - ------------------------ -- ---- ------ - ----- ------ ----- -------- ---------------- -- ------ ------------- ----------------- -- ------ --------------- ------------------- -- ------ -- -
通过调用 ReactGA.pageview()
函数并传递当前路径,我们来跟踪当前页面的浏览。
现在,每当用户浏览这些路由器下的某个页面时,Google Analytics 就会记录页面浏览的事件。
4. 跟踪事件
您可以使用 ReactGA.event()
方法跟踪更多细粒度的事件。例如,我们可以在用户单击按钮时记录单击事件。要记录单击事件,请执行以下操作:
-------- ------------- - --------------- --------- --------- ------- -------- --- - -------- ------------- - ------ - ------- --------------------------- ------------ -- -
在这里,我们定义了类别和操作并使用 ReactGA.event()
方法来记录单击事件。
总结
在本文中,我们了解了如何在 React 应用程序中添加 Google Analytics 并跟踪用户浏览和事件。我们使用 react-ga
库和 React Router 路由器来实现这一目的。使用 Google Analytics,我们可以收集并分析应用程序的数据,有助于我们了解用户行为以及应用程序的性能优化。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64aa3f0f48841e9894666e80