引言
在当前的软件开发行业中,网页应用程序已经成为了现代化的标准。由于网页应用程序的流行,我们需要更好的了解用户行为,更好的管理与推动网页应用的发展。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