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

Но что вопросы, в конце концов влияние на клиентов.Они получают больше продуктов продано, или есть больше посетителей на свои сайты кампании?Окончательные результаты, как правило, показывают, если наш проект является успешным.И мы полагаться на статистику, как измерительного инструмента.Мы все используем такие инструменты, как 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=...');
}