中山做网站：用于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开发人员工具中的“ 网络”标签：

一开始，我认为没有什么不寻常的。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发送的响应标头：

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

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信标。所以我们在选择这种技术时要小心，并确保我们提供解决方法。