npm 包 @redux-beacon/google-analytics 使用教程

阅读时长 4 分钟读完

前言

@redux-beacon/google-analytics 是一个能够将 Redux Action 与 Google Analytics 进行集成的 npm 包,可以很方便的帮助开发者去追踪用户在应用中的行为以及行为的时间线,从而更好地了解和优化自己的应用。

本篇文章将介绍这个 npm 包的使用方法,从安装、配置、编写代码等方面详细讲解,帮助读者们更好地了解和掌握这个工具的使用方式。

安装

配置

在使用 @redux-beacon/google-analytics 之前,需要先在 Google Analytics 中创建一个应用的跟踪代码(Tracking ID)。

接着在应用中添加以下配置:

-- -------------------- ---- -------
------ - ---------------- - ---- ---------------------
------ ---------------------- ---- ---------------------------------
------ - --------- ----- - ---- ---------------------------------

----- --------------- - -----------------------
  - ----------- ------------------ --
  -----------
--

----- ------------ - -----------------------
  - ----------- ------------------ --
  --------
--

----- ---------- - ---------------------------------- ---------------

----- ----- - -------------------- -----------------------------

createMiddleware 用来创建和配置 @redux-beacon/google-analytics 的中间件。在这里,我们接受两个跟踪器(Tracker),分别是 pageViewTrackereventTracker

编写代码

假设我们在应用中有一个按钮,点击这个按钮会触发一个 Redux Action,我们可以利用 @redux-beacon/google-analytics 来追踪这个按钮的点击事件。

-- -------------------- ---- -------
------ - ----- - ---- ---------------------------------

------ ----- ----------- - -- -- -
  ------ -------- -- -
    ----------
      ----- ---------------
    ---

    ----------------------
      --------- ---------
      ------- --------
    -----
  -
-

当按钮被点击时,我们首先会 dispatch 一个 Redux Action 类型为 CLICK_BUTTON 的 Action。接着,利用 track 方法去触发一个 event 类型的 Tracker,该 Tracker 会将按钮点击的分类(category)和操作(action)发送到 Google Analytics 中。

总结

在本文中,我们介绍了 @redux-beacon/google-analytics 的使用方法。通过配置和编写代码,我们可以很方便地将 Redux Action 与 Google Analytics 进行集成,从而更好地了解和优化自己的应用。

当然,想要更加深入地了解这个工具的使用方式还需要结合实际情况去实践和探究。希望本文能够为读者们提供一些有益的指引和帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/redux-beacon-google-analytics