在前端开发中，我们经常需要通过 Google Analytics（简称 GA）来追踪网站的数据。而对于使用 React 和 Redux 构建的应用程序，我们可以通过使用 npm 包 redux-ga-screen-tracker 来轻松集成 GA，以便跟踪不同页面的访问情况和用户行为。
安装
首先，我们需要安装 redux-ga-screen-tracker 包。打开终端，执行以下命令：
--- ------- ------ -----------------------
集成
要将 GA 集成到 React 和 Redux 应用程序中，请按照以下步骤进行操作：
1. 安装 Google Analytics
首先，需要在 Google Analytics 中创建一个帐户并获取一个跟踪 ID。这是后面将用于标识您的网站并在其中跟踪数据的唯一 ID。
2. 初始化 GA
接下来，在 React 和 Redux 应用程序中初始化 GA。为此，请在您的根 reducer 中创建一个新的 store 对象，并添加以下内容：
------ - ------------ ---------------- ------- - ---- --------
------ - -------- ------------------- - ---- --------------------------
------ ----------- ---- -------------
----- ---------- - ---------------- -- -- -- -------- --
----- -------------- - --- -- -------------
----- ----- - ------------
------------
--------
-------------------------------------
------------------- ---------------
-
--3. 配置屏幕
现在，您需要为每个页面定义一个屏幕，并使用 redux-ga-screen-tracker 包中的 screenviewAction 方法来记录每个屏幕视图。这是在页面加载时自动调用的，以便向 GA 报告页面浏览量。
------ - ---------------- - ---- --------------------------
----- -------- - -- -- -
------------ -- -
---------------------- -------
-- ----
-- ---
--4. 使用事件跟踪器
如果要跟踪其他用户事件（例如单击按钮），您可以使用 redux-ga-screen-tracker 包中的 eventAction 方法来记录它们。这可以在组件内部应用单击处理程序中完成。
------ - ----------- - ---- --------------------------
------ - ------ - ---- -------
----- ----------- - -- -- -
-------------
--------- --- ----------
------- --- --------
------ --- -------
------ ---
---
--
----- ----------- - -- -- -
------ -
-----
------- --------------------------- -----------
------
--
--示例代码
以下是完整的 React 和 Redux 应用程序代码示例，显示了如何配置 redux-ga-screen-tracker 包。
------ ------ - --------- - ---- --------
------ - ------------ ---------------- ------- - ---- --------
------ - -------- -------------------- ----------------- ----------- - ---- --------------------------
------ ----------- ---- -------------
------ - ------ - ---- -------
----- ---------- - ---------------- -- -- -- -------- --
----- -------------- - --- -- -------------
----- ----- - ------------
------------
--------
-------------------------------------
------------------- ---------------
-
--
----- -------- - -- -- -
------------ -- -
---------------------- -------
-- ----
----- ----------- - -- -- -
-------------
--------- --- ----------
------- --- --------
------ --- -------
------ ---
---
--
------ -
-----
----------- -- -- -------------
------- --------------------------- -----------
------
--
--
----- --- - -- -- -
------ -
--------- --------------
--------
--------
------ ----- -------- -------------------- --
------ ------------- --------------------- --
---------
---------
-----------
--
--结论
在本文中，我们介绍了如何在 React 和 Redux 应用程序中使用 npm 包 redux-ga-screen-tracker 来集成 Google Analytics。通过遵循上述步骤，您可以轻松跟踪不同页面的访问情况和用户行为，并大大提高您的应用程序的用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f8d238a385564ab6ea5