CSS-единственное решение для отслеживания пользовательского интерфейса

Веб растет.Мы строим приложения, которые работают полностью в браузере.Они отзывчивы;они имеют тонны особенностей и работы под многими устройствами.Нам нравится обеспечивая высокое качество кода, который хорошо структурирован и проходят .

Но что вопросы, в конце концов влияние на клиентов.Они получают больше продуктов продано, или есть больше посетителей на свои сайты кампании?Окончательные результаты, как правило, показывают, если наш проект является успешным.И мы полагаться на статистику, как измерительного инструмента.Мы все используем такие инструменты, как Google Analytics 1 .Это мощный способ сбора данных.В этой статье, мы увидим CSS только подход для отслеживания взаимодействий интерфейса, используя Google Analytics .

2 Problem

Мы разработали приложение, которое пришлось работать на различных устройствах.Мы не смогли протестировать на большинстве из них, и решил, что мы должны были сделать все просто.Так просто, что wasn’ TĀ шанс произвести глючный код.Дизайн был чистым, минималистичный, и wasn’ т любой сложной бизнес-логики .

Это был сайт отображения информации об одном из client’ сек продукции.Одна из наших задач было отслеживать посещения пользователем и взаимодействия.В большинстве случаев мы использовали 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');

Этот фрагмент был достаточно видом отслеживания страниц, трафик, сессий и т.д. Кроме того, мы разместили наличие, где пользователь взаимодействует со страницей.Например, нажав на ссылку, заполнив поле ввода или проверки вариант коробки .

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

Ребята из Google обрабатываются эти события хорошо, и мы смогли увидеть их в наш счет.Тем не менее, в какой-то момент клиент сообщил, что было устройства, которые имеют плохой или нет поддержки JavaScript.Они представляли примерно 2% всех устройств, которые посетили сайт.Мы начали искать решение, которое вообще не предполагало наличие.Мы были готовы признать, что мы не могли собирать статистические данные в этих условиях .

Это не так уж плохо, но клиент поделился еще один вопрос.Наша маленькая приложение собирается быть частью частной сети.Компьютеры есть у JavaScript выключен по соображениям безопасности.Кроме того, это частная сеть важно для клиента.Таким образом, он настаивал, что мы до сих пор получить статистику в этих случаях.Мы должны были обеспечить правильное решение, но проблема в том, что у нас было только CSS и HTML имеющихся в качестве инструментов .

3 Solution

В поисках решения, я был мониторинг вкладку Chrome’ | Network__38 сек инструменты для разработчиковкогда я заметил следующее:

4
( Просмотр большой version 5 )

В начале я думал, что не было ничего необычного.Google Analytics’ ы код из нескольких HTTP запросов для своих процессов слежения.Тем не менее, четвертый столбец показывает Content-type заголовок ответа.Это изображения.Не JSON или HTML, но изображение.Тогда я начал читать документацию и приземлился на этой Отслеживание код Overview __20 | 6 | __7.Самая интересная часть была:

При собраны вся эта информация, он отправляется на серверы Analytics в виде длинного списка параметров, прикрепленного к запросу изображения GIF в один пиксель .

Таким образом, Google действительно сделал запрос HTTP, но не тривиально вызова Ajax.Это просто добавляет все параметры к image’ ов URL.После этого он выполняет запрос на файл GIF.Существует даже название для таких запросов: beacon 7 .Я задавался вопросом, почему Г.А. использует этот подход.Тогда я понял, что есть некоторые преимущества:

  • Это просто.Мы инициализируем новый Image объект и применить значение его src атрибута:
    new Image().src = '/stats.gif?' + parameters
  • Это работает везде.Там нет необходимости добавлять обходные пути для различных браузеров, как мы делаем для Ajax запросов .
  • Крошечные ответ.Как Стоян Стефанов said 8 , 1 × 1px GIF изображений может быть только 42 байт .

Я сделал несколько кликов и послал события в Google Analytics.Зная параметры запроса, я был в состоянии построить свои собственные адреса изображения.Единственное, что делать в конце было загрузить изображение на странице.И да, это было возможно с чистого CSS .

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

Настройка background-image CSS свойство заставляет браузер загружать изображение.Наконец, мы успешно использовали этот метод для отслеживания действий пользователя .

9 Отслеживание пользователя Actions

Есть несколько способов, чтобы изменить стили на основе пользовательского ввода.Первое, что мы думали о было :active псевдо-класс.Этот класс соответствует когда элемент активируется пользователем.Это время между моментом пользователь нажимает кнопку мыши и отпускает ее.В нашем случае, это было идеально подходит для отслеживания кликов:

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

Еще один полезный класс псевдо составляет :focus.Мы записали, сколько раз …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.