用 ember-google-analytics-embed 实现网站 Google Analytics 的快速嵌入教程

阅读时长 8 分钟读完

引言

在当前的软件开发行业中,网页应用程序已经成为了现代化的标准。由于网页应用程序的流行,我们需要更好的了解用户行为,更好的管理与推动网页应用的发展。Google Analytics 是非常好的一个行为分析和统计工具,它帮助我们更好的了解我们网站的用户行为。

为了在网站中嵌入 Google Analytics,我们可以使用一个轻量级的 NPM 包:ember-google-analytics-embed。该包的使用非常简单,同时,它也允许我们在网站中更加深入地了解用户行为,并将各种指标用于网站的优化。在本文中,我们将介绍如何使用 ember-google-analytics-embed 这个包以及一些使用它来优化网站的小技巧。

安装 ember-google-analytics-embed

首先,我们需要安装 ember-google-analytics-embed 包。运行以下指令在你的项目中安装该包:

npm install ember-google-analytics-embed --save

该指令会将 ember-google-analytics-embed 安装在你项目的 node_modules 目录下,并将其添加到项目的 package.json 文件中。接下来,你需要在你的 app 模块中添加如下代码:

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

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

上述代码将 GoogleAnalytics 服务注入到 routecontroller 中,以便在后续的使用中我们可以轻松的调用并管理它。

配置

接下来,我们需要为 Google Analytics 配置。我们可以在 Google Analytics 管理后台中创建一个新的项目,或者使用现有的项目。在管理后台中,你需要找到 Tracking IDDomain Name。Tracking ID 是一个形如 UA-XXXXXXXX-X 的字符串,Domain Name 是你的网站域名。复制以下代码到你的项目的 config/environment.js 文件中,并将你自己的 Tracking IDDomain Name 替换代码中的默认值。

现在 Google Analytics 配置已经完成了!在前往下一步前,我们先看一下 config/environment.js 中的其他常见配置。

上述代码将配置 CSP(Content Security Policy)内容安全策略对 Google Analytics 跟踪脚本白名单进行了限制,从而为你的网站安全提供额外的保障。

使用

现在已经可以使用 ember-google-analytics-embed 对网站进行跟踪了!我们可以使用 send 方法给 Google Analytics 发送请求,发送以下数据:

以上代码定义了一个 pageview 类型的结构体,并使用 this.router.currentURLthis.currentTitle 描述了页面 URL 和页面标题,以便跟踪并记录用户行为。如果你需要记录其他的数据,可以根据以下向导来进行扩展:

建议使用 pageviewevent 来记录用户行为。pageview 可以记录页面打开次数,event 可以记录用户点击事件等。

扩展

在使用 ember-google-analytics-embed 包时,我们可以使用一些额外的功能和优化。例如:

记录每个路由和外链的行为

我们可以继承一个扩展工具类 Ember.Route,在其中重写 activatedeactivate 方法来记录链接和路由的行为。

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

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

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

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

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

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

在上述代码中,activate 方法会在路由进入时自动记录一个 pageview。deactivate 方法则记录的是一个 event 类型的日志。这里我们使用了 router.currentRouteName 记录了路由名称,将其直接作为 eventLabel 进行了使用。

自定义参照比率的轨迹

使用 ember-google-analytics-embed,你可以轻松地使用百分比(%)或小数(0.0 - 1.0)来跟踪页面内的按钮是否已经被点击。要实现此功能,请在页面上添加一个自定义属性 data-tracker,并将其设置为您想要跟踪的比率。例如,您想知道标记为 #button1 的按钮是否已经被点击了 33% 的次数,则在 <button> 标记中添加以下属性:

然后,请在 events.js 中为您的跟踪使用以下代码:

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

注意,上述代码会将自定义属性 data-tracker 的值转换为数字类型。您必须以小数表示所要跟踪的百分比。

总结

在本文中,我们已经学习了如何使用 ember-google-analytics-embed 将 Google Analytics 嵌入到您的 Ember.js 应用程序中来收集分析数据。我们已经了解了如何配置 Google Analytics,如何使用 send 方法记录主要的数据,以及如何使用 activatedeactivate 方法来记录路由的行为。我们也给出了一些可以优化网站的小技巧。希望本文能够对你实现更好的数据记录和网站优化有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600562e581e8991b448e07f5

纠错
反馈