中山做网站:用于UI跟踪的仅CSS解决方案

2019.08.12 mf_web

187

网络正在成长。我们正在构建完全在浏览器中运行的应用程序。他们很敏感; 它们具有大量功能,可在许多设备下工作。我们喜欢提供结构合理,经过测试的高质量代码。中山做网站

但最重要的是对客户的影响。他们是否会销售更多产品,或者他们的广告系列网站是否有更多访问者?最终结果通常表明我们的项目是否成功。我们依靠统计数据作为衡量工具。我们都使用Google Analytics等工具。这是一种收集数据的强大方法。在本文中,我们将看到一种仅使用CSS的方法来跟踪使用Google Analytics的UI交互。

问题

我们开发了一个必须在各种设备上运行的应用程序。我们无法对大多数人进行测试,并决定我们必须使一切变得简单。如此简单,以至于没有机会产生错误的代码。设计干净,简约,没有任何复杂的业务逻辑。

这是一个显示客户产品之一的信息的网站。我们的任务之一是跟踪用户访问和互动。在大多数情况下,我们使用Google Analytics。我们所要做的就是在页面底部放置如下例子的代码:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', '......', '......');ga('send', 'pageview');
复制

此代码段足以跟踪网页浏览量,流量,会话等。此外,我们将JavaScript放置在用户与页面交互的位置。例如,单击链接,填写输入字段或选中选项框。

ga('send', 'event', 'ui-interaction', 'click', 'link clicked', 1);
复制

来自谷歌的人很好地处理了这些事件,我们能够在我们的帐户中看到它们。但是,在某些时候,客户端报告说有些设备支持错误或没有JavaScript支持。它们占访问该网站的所有设备的大约2%。我们开始寻找不涉及JavaScript的解决方案。我们准备承认在这种情况下我们无法收集统计数据。

它并没有那么糟糕,但客户分享了另一个问题。我们的小应用程序将成为私有网络的一部分。出于安全原因,那里的计算机已关闭JavaScript。此外,这个私人网络对客户来说很重要。所以,他坚持认为我们仍然可以获得这些情况下的统计数据。我们必须提供一个合适的解决方案,但问题是我们只有CSS和HTML可用作工具。

解决方案

在搜索解决方案时,当我注意到以下情况时,我正在监控Chrome开发人员工具中的“ 网络”标签:

使用CSS跟踪UI
(查看大图)

一开始,我认为没有什么不寻常的。Google Analytics的代码为其跟踪流程提出了很少的HTTP请求。但是,第四列显示Content-type了响应的标题。这是一张图片。不是JSON或HTML,而是图像。然后我开始阅读文档并登陆此跟踪代码概述。最有趣的部分是:

收集完所有这些信息后,它会以附加到单像素GIF图像请求的长参数列表的形式发送到Analytics服务器。

因此,Google确实提出了HTTP请求,但没有进行简单的Ajax调用。它只是将所有参数附加到图像的URL。之后,它执行GIF文件的请求。这些请求甚至有一个名字:beacon。我想知道为什么GA使用这种方法。然后我意识到有一些好处:

  • 很简单。我们初始化一个新Image对象并将值应用于其src属性:

    new Image().src = '/stats.gif?' + parameters
  • 它无处不在。没有必要像为Ajax请求那样为不同的浏览器添加变通方法。

  • 微小的回应。正如Stoyan Stefanov所说,1×1px的GIF图像可能只有42个字节。

我点击了几下,就将事件发送到Google Analytics。知道了请求参数,我就能够构建自己的图像URL。最后唯一要做的就是在页面上加载图像。是的,纯CSS可以实现这一点。

background-image: url('http://www.google-analytics.com/collect?v=1&_v=j23&a=...');
复制

设置background-imageCSS属性会强制浏览器加载图像。最后,我们成功使用此技术来跟踪用户操作。

跟踪用户操作

有几种方法可以根据用户输入更改样式。我们首先想到的是:active伪类。当用户激活元素时,此类匹配。这是用户按下鼠标按钮并释放它之间的时间。在我们的案例中,这非常适合跟踪点击次数:

input[type="button"]:active {
    background-image: url('http://www.google-analytics.com/collect?v=1&_v=j23&a=...');}
复制

另一个有用的伪类是:focus。我们记录了用户开始在联系表单中输入的次数。有趣的是,在大约10%的案例中,用户实际上没有提交表格。

input[name="message"]:focus {
    background-image: url('http://www.google-analytics.com/collect?v=1&_v=j23&a=...');}
复制

在一页上,我们有一个逐步调查问卷。最后,要求用户同意某些条款和条件。一些访客没有完成最后一步。在该网站的第一个版本中,我们无法确定这些用户在问卷中选择了什么,因为结果将在完成后发送。但是,由于所有步骤都只是单选按钮,我们使用:checked伪类并成功跟踪选择:

input[value="female"]:checked {
    background-image: url('http://www.google-analytics.com/collect?v=1&_v=j23&a=...');}
复制

我们必须提供的最重要的统计数据之一是屏幕分辨率的多样性。感谢媒体查询,这是可能的:

@media all and (max-width: 640px) {
    body {
        background-image: url('http://www.google-analytics.com/collect?v=1&_v=j23&a=...');
    }}
复制

实际上,我们可以使用相当多的逻辑运算符。我们可以跟踪具有特定宽高比的屏幕; 横向设备; 或分辨率为300dpi的那些。

缺点

这种CSS UI跟踪的问题在于我们只获得事件的第一次出现。例如,采用:active伪类示例。对背景图像的请求仅触发一次。如果我们需要捕获每次点击,那么我们必须更改URL,这在没有JavaScript的情况下是不可能的。

我们使用该background-image属性来发出HTTP请求。但是,由于应用程序的设计,有时我们可能需要将实际图像设置为背景。在这种情况下,我们可以使用该content属性。它通常用于添加文本或图标,但属性也接受图像。例如:

input[value="female"]:checked {
    content: url('http://www.google-analytics.com/collect?v=1&_v=j23&a=...');}
复制

因为我们正在请求图像,所以我们应该确保浏览器没有缓存文件。统计服务器应每次处理请求。我们可以通过提供正确的标头来实现这一点。看看下面的图片。它显示了Google发送的响应标头:

使用CSS跟踪UI
(查看大图)

发送以下标头可确保浏览器不会缓存图像:

Cache-Control: no-cache, no-store, must-revalidatePragma: no-cacheExpires: 0
复制

在某些情况下,我们可能会决定编写自己的统计服务器。这是我们在开发过程中必须考虑的一个重要说明。这是一个简单的基于Node.js的实现。我们将其用于测试目的:

var fs = require('fs'),
    http = require('http'),
    url = require('url'),
    img = fs.readFileSync(__dirname + '/stat.png'),
    stats = {};

var collectStats = function(type) {
    console.log('collectStats type=' + type);
    if(!stats[type]) stats[type] = 0;
    stats[type]++;}http.createServer(function(req, res){
    var request = url.parse(req.url, true);
    var action = request.pathname;
    if (action == '/stat.png') {
        collectStats(request.query.type);
        res.writeHead(200, {'Content-Type': 'image/gif', 'Cache-Control': 'no-cache' });
        res.end(img, 'binary');
    } else {
        res.writeHead(200, {'Content-Type': 'text/html' });
        res.end('Stats server:<pre>' + JSON.stringify(stats) + '</pre>\n');
    }}).listen(8000, '127.0.0.1');console.log('Server is running at http://127.0.0.1:8000');
复制

如果我们将代码保存到名为server.js的文件中并执行,node server.js我们将获得一个侦听端口8000的服务器。查询有两个可能的URL:

* http://127.0.0.1:8000/ - shows the collected statistics* http://127.0.0.1:8000/stat.png?type=something - collecting statistics.
复制

通过在第二个URL中请求PNG,我们正在递增值。以下代码显示了我们必须在浏览器中放置的HTML和CSS:

<input type="button" value="click me"/>

input[type="button"]:active {
    background-image: url('http://127.0.0.1:8000/stat.png?type=form-submitted');}
复制

最后,作为最后一个缺点,我们必须提到一些防病毒软件或浏览器设置可能会删除1×1px信标。所以我们在选择这种技术时要小心,并确保我们提供解决方法。

摘要

CSS通常被认为是将样式应用于网页的语言。但是,在本文中,我们看到它不止于此。它也是收集统计数据的便利工具。

中山做网站

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP