引言
在当前的软件开发行业中，网页应用程序已经成为了现代化的标准。由于网页应用程序的流行，我们需要更好的了解用户行为，更好的管理与推动网页应用的发展。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 服务注入到 route 和 controller 中，以便在后续的使用中我们可以轻松的调用并管理它。
配置
接下来，我们需要为 Google Analytics 配置。我们可以在 Google Analytics 管理后台中创建一个新的项目，或者使用现有的项目。在管理后台中，你需要找到 Tracking ID 和 Domain Name。Tracking ID 是一个形如 UA-XXXXXXXX-X 的字符串，Domain Name 是你的网站域名。复制以下代码到你的项目的 config/environment.js 文件中，并将你自己的 Tracking ID 和 Domain Name 替换代码中的默认值。
if (environment === 'production') {
ENV.googleAnalytics = {
webPropertyId: 'UA-XXXXXXX-X',
trackableDomains: ['example.com'],
displayFeatures: true
}
}现在 Google Analytics 配置已经完成了！在前往下一步前，我们先看一下 config/environment.js 中的其他常见配置。
ENV.contentSecurityPolicy = {
'default-src': "'none'",
'script-src': "'self' 'unsafe-inline' 'unsafe-eval' https://www.google-analytics.com",
'font-src': "'self'",
'connect-src': "'self'",
'img-src': "'self' https://www.google-analytics.com",
'media-src': "'self'"
};上述代码将配置 CSP（Content Security Policy）内容安全策略对 Google Analytics 跟踪脚本白名单进行了限制，从而为你的网站安全提供额外的保障。
使用
现在已经可以使用 ember-google-analytics-embed 对网站进行跟踪了！我们可以使用 send 方法给 Google Analytics 发送请求，发送以下数据：
this.googleAnalytics.send('pageview', {
page: this.router.currentURL,
title: this.currentTitle
});以上代码定义了一个 pageview 类型的结构体，并使用 this.router.currentURL 和 this.currentTitle 描述了页面 URL 和页面标题，以便跟踪并记录用户行为。如果你需要记录其他的数据，可以根据以下向导来进行扩展：
this.googleAnalytics.send('<type>', {
'<key>': '<value>',
'<key>': '<value>',
...
});建议使用 pageview 和 event 来记录用户行为。pageview 可以记录页面打开次数，event 可以记录用户点击事件等。
扩展
在使用 ember-google-analytics-embed 包时，我们可以使用一些额外的功能和优化。例如：
记录每个路由和外链的行为
我们可以继承一个扩展工具类 Ember.Route，在其中重写 activate 和 deactivate 方法来记录链接和路由的行为。
-- -------------------- ---- -------
------ ----- ---- --------
----- ----- - --------------------
---------- -
--------------------------
-- --------------------------------------- -
-------------------------------------------
-
--
------------ -
--------------------------
-- --------------------------------------- -
-------------------------------------------- -
-------- --------
-------------- -------
------------ --------
----------- ------------------------------------
----------- -
---
-
-
---
------ ------- ------在上述代码中，activate 方法会在路由进入时自动记录一个 pageview。deactivate 方法则记录的是一个 event 类型的日志。这里我们使用了 router.currentRouteName 记录了路由名称，将其直接作为 eventLabel 进行了使用。
自定义参照比率的轨迹
使用 ember-google-analytics-embed，你可以轻松地使用百分比（%）或小数（0.0 - 1.0）来跟踪页面内的按钮是否已经被点击。要实现此功能，请在页面上添加一个自定义属性 data-tracker，并将其设置为您想要跟踪的比率。例如，您想知道标记为 #button1 的按钮是否已经被点击了 33% 的次数，则在 <button> 标记中添加以下属性：
<button data-tracker="0.33" id="button1">Click me!</button>
然后，请在 events.js 中为您的跟踪使用以下代码：
-- -------------------- ---- -------
-- --------- ---------
------ ------- -
------ ---------------- ----------- -
-- -------------------------------- -
---------------------------------- -
-------------- ---------
------------ ----------
----------- ------------
----------- ---------------------------------------------- - ---- ---
---
-
-
-注意，上述代码会将自定义属性 data-tracker 的值转换为数字类型。您必须以小数表示所要跟踪的百分比。
总结
在本文中，我们已经学习了如何使用 ember-google-analytics-embed 将 Google Analytics 嵌入到您的 Ember.js 应用程序中来收集分析数据。我们已经了解了如何配置 Google Analytics，如何使用 send 方法记录主要的数据，以及如何使用 activate 和 deactivate 方法来记录路由的行为。我们也给出了一些可以优化网站的小技巧。希望本文能够对你实现更好的数据记录和网站优化有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e581e8991b448e07f5
