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

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

² 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 доступной в качестве инструментов .

³ Solution

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

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

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