Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Разработка веб-приложений
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
26
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

25
Битрикс24

Битрикс24

www.bitrix24.ru

13
WebResidentTeam

WebResidentTeam

webresident.agency

12
Логомашина

Логомашина

logomachine.ru

12
Devicerra

Devicerra

devicerra.com

11
Reader

Reader

Интернет-журнал о современных технологиях.

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Aword

Aword

Приложение для изучения английских слов

9
GIFTD

GIFTD

giftd.tech

8
Eczo.bike

Eczo.bike

www.eczo.bike

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

Как собрать статистику сайта если отключен JavaScript

2 778 3 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Что делать если для части клиентов технические ограничения не позволяют использовать код от Google Analytics? Узнайте как в этом может помочь CSS.

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

Но важно ли это всё для клиентов? Продают ли они больше или получают достаточно посетителей? Конечные результаты показывают успешность нашей работы. В качестве измерительного инструмента мы берём статистику используя инструменты вроде Google Analytics. Это хороший способ собрать информацию.

Проблема

Мы разработали приложение которое должно было работать на разных устройствах. У нас не было возможности протестировать результат на всех устройствах и мы решили сделать всё просто. Настолько просто, что написать глючный код не было возможности. Дизайн был простым и минимальным, а приложение не содержало сложной бизнес-логики.

Это был сайт рассказывающий о продукте одного из наших клиентов. Одной из задач было следить за посещением и тем как посетители взаимодействуют с сайтом. В большинстве случаев для этого мы используем Google Analytics. Всё что требуется это разместить внизу страницы код вроде этого:

b_549f1924c7fd8.jpg

Этого достаточно, чтобы следить за просмотрами, трафиком, сессиями и другими метриками. Дополнительно мы размещаем JavaScript там, где посетитель может взаимодействовать с сайтом: переходит по ссылке, заполняет текстовое поле или ставит флажок в каких-либо настройках.

b_549f1989674c2.jpg

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

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

Решение

В поисках решения я разглядывал вкладку Network в Хроме и пока не увидел эти строчки:

b_549f1ab9c6008.jpg

На первый взгляд ничего необычного. Аналитика делает пару HTTP запросов к своим процессам. Но моё внимание привлёк четвёртый столбец, а точнее сontent-type заголовка. Это была картинка. Не JSON или HTML, но картинка. Я начал читать документацию, попал на этот обзор и самым интересным в нём было это:

Вся собранная информация отправляется на сервера Аналитики в виде длинного списка параметров которые прикрепляются к запросу на GIF изображение в один пиксель.

Так Google делал запрос не привычным аяксом, а добавляя параметры на ссылку с картинкой. Для таких запросов даже существует название: beacon. У меня возник вопрос: почему Google использует такой подход? Но, оказалось, что у него есть преимущества:

Это просто. Мы инициализируем новый объект Image и добавляем значение к его атрибуту src:b_549f1cb00fdb4.jpg

Такой код работает везде одинаково. Например аякс инициализируется по разному в разных браузерах.

Размер ответа — 1×1px GIF-изображение весит всего 42 байта.

Зная параметры запроса я мог составить собственную ссылку на изображение. Остаётся только загрузить картинку на страницу. А ещё это будет работать на чистом CSS: b_549f1e5d509bf.jpg

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

Мониторинг действий

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

b_549f2043ca34f.jpg

Другой подходящий псевдокласс :focus. С его помощью мы записывали сколько раз пользователи начинали заполнять форму. Так мы выяснили, что в 10% случаев пользователи не завершали отправку формы.

b_549f219cd009b.jpg

На одной из страниц у нас была анкета разбитая на шаги. В конце пользователю предлагали согласиться с некоторыми условиями. Некоторые посетители не завершали этот шаг. В первой версии сайта мы не знали что они выбирали в форме ведь данные отправлялись только после завершения. Но в итоге, так как в форме поля были флажками, мы использовали псевдо класс :checked чтобы узнать что они выбрали

b_549f231da1a19.jpg

Размеры экрана были важны для нашей статистики. Их узнавали благодаря медиа-запросам:

b_549f23fe3c85c.jpg

Можно использовать разные логические операторы и определять экраны со специфическим разрешением, разное положение экрана или экраны с разрешением 300dpi.

Проблемы

Недостаток этого подхода в том, что мы получаем только первое событие. Для примера возьмём сниппет с псевдоклассом :active. Запрос к изображению происходит только один раз. Если нужно обрабатывать каждый клик, то нужно менять URL, что невозможно без JavaScript.

Иногда свойство background-image использовать не получится потому, что оно будет занято реальным изображением для дизайна приложения. В таких случаях можно использовать свойство content. Оно часто используется для текста или значков, но принимает и изображения:

b_549f2635edf03.jpg

Запрашивая изображение, мы должны быть уверены, что браузер не закешировал файл. Сервер статистики должен обрабатывать каждый запрос. Этого можно добиться задав правильные заголовки. Изображение ниже показывает пример заголовков в ответе от Google:

b_549f266f159c6.jpg

Такие заголовки дадут гарантию, что изображение не будет закэшировано:

b_549f26d73624e.jpg

Об этом стоит знать если вы разрабатываете свой сервер статистики.

Выводы

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

Это был вольный перевод статьи Красимира Цонева со Smashing Magazine.

+7
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
Михаил
Вот вы и узнали про one pixel — технология стара как веб, все сервисы статистики вставляют код в noscript с ссылкой на пиксельную картинку
Ответить
Dave Trent
Как ни крути — костыль.
Ответить
Иљя Коробов
Уверен, что париться с заголовками не кеширования не стоит, т.к. Все нормальные сервера сами ставят их правильно. Вы же обрабатываете картинку пхп скриптом, а пхп скрипты не кешируются, они сами передают правильные заголовки. Даже если вы назовёте файл img.png и сделаете редирект на php файл, всё равно заголовки будут нормальные. Возможно какие то вебсервера криво отработают, я использую nginx + php5-fpm всё работает шикарно само, хотел ставить заголовки, а не потребовалось.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать