Отслеживаем действия пользователя с помощью CSS

[Akuma]

Покажите мне современный проект у которого есть «Аудитория с выключенным JavaScript», пожалуйста. Существенная аудитория, а не 2.5 киберманьяка-параноика.

Нашли? Отлично. А теперь чтобы сайт приэтом еще и не терял функциональности?

Нашли, но не можете ответить? Включите JavaScript

[hcbogdan]

Вы в чем-то правы, как правило JavaScript включен у всех. Но существуют такие решения, которые работают без JS. Да и в целом — вы же не можете отключить или заблокировать CSS верно? Тогда весь сайт превратиться в простую разметку.

Я не призываю отказываться от JS-жучков, а только заполняю пробел между «JS-жучками» и «статическими счетчиками» (которые до сих пор идут в комплекте с JS-жучками в теге ).

С помощью методов описанных в статье вы сможете:
1. Обойти плагины блокирующие JS жучки, или uncaught exception.
3. Добавить еще один метод сепарации реальных пользователей от ботов phantomjs.
4. Если, ввиду особенности проекта, у ваших пользователей нет JS — анализировать их поведение.

[ivan386]

9 апреля эта система работать не будет.

[Akuma]

Ни разу не видел это в действии. Выкинуть день из прибыли?

[ivan386]

Целых два дня. Праздник проходит 48 часов. Он для того чтобы показать чего ваш сайт стоит без CSS. Здесь чуть больше: https://css-naked-day.github.io

Я периодически вижу сайты без css. Таблица стилей по каким то причинам не подгрузилась и получаем голый HTML. Причём и обновление иногда не помогает.

[Akuma]

Надо будет попробовать найти такие сайты 9 апреля :)

Правда я думаю, что сейчас они ничего интересного не покажут, т.к. табличной верстки уже нет нигде, а блоки без стилей — прямая линия вниз.

[ivan386]

Потому что надо использовать block и inline элементы правильно.

[Akuma]

Есть верстка на CSS-Grid, например.
Расскажите пожалуйста какие HTML элементы надо использовать, чтобы без CSS все осталось на своих местах?

[ivan386]

Если вам очень нужна сетка даже в случае когда отвалился CSS. То тут только таблицы использовать.

Сайт может быть не столь красивым без CSS но должен сохранять необходимую функциональность. Тоже касается и Javascript. Очень раздражают сайты на которых просто пустая страница без Javascript. Что сложного в том чтобы показать мне текст который поисковик нашол на этой странице без Javascript и CSS?

Недавно наткнулся на сайт который без аналитики гугла не хотел мне файл давать скачать. Не учли программеры что кто то её заблокировать может и в консоль сыпались ошибки.

[daggert]

> Сайт может быть не столь красивым без CSS но должен сохранять необходимую функциональность.

Зачем?

[ivan386]

Чтоб им могли пользоваться?

[Areso]

Внезапно некоторые посещают сайты с браузеров, где JS/CSS не поддерживаются by design. К примеру, если у меня сломалась DE, я использую Links (либо Lynx). Причем регулярно. И с серверов тоже пользуюсь. Впрочем, есть и графические браузеры, не поддерживающие JS/CSS.
Для меня самое главное на большинстве сайтов — это их наполнение, а не свистелки на JS и украшательства на CSS.
Более того, у меня время от времени чешутся руки написать граббер, который будет собирать с интересных мне страниц и сайтов только текст.

[daggert]

Согласен с вами, но только отчасти. Я тоже иногда захожу через такие браузеры и тоже граблю контент через скрипты (прокси-скрипты для сайтов где нет rss), однако может вам нужен не сайт без css, а сайт с хорошей семантикой?
Ок — можно прожить без JS — я сам ругаюсь на такие сайты, однако мне их приходится делать, но вот CSS… боюсь что это необходимый минимум. Правда я за то чтобы анимации можно было отключать.

[Areso]

Анимации? А видео, встроенное в фон страницы?) Ради одного этого я готов уфигачить CSS в ноль или использовать кастомное CSS всегда и везде.

[daggert]

Видео вроде как не в css, или я отстал от жизни?

[Areso]

Отстали.
www.myprovence.fr/snapshots2012/en
www.clinicadrmauro.com.br
Здесь у нас замечательная смесь CSS3, HTML5, video as background (трафик!).
у пэйпола было одно время видео в фоне, было у фейсбука, кажется у Эппл было…

[daggert]

Боюсь что вы не правы. Это просто контейнер video, а css тут только для выравнивания его по z-index'у и на нужной позиции.

[Areso]

Значит, я был неправ. Что не отменяет моего желания найти и покарать)

[tutam]

чешутся руки написать граббер

Зачем изобретать велосипед? в некоторых браузерах (например, яндекс) есть такая функция как режим чтения.

[ValdikSS]

Более того, у меня время от времени чешутся руки написать граббер, который будет собирать с интересных мне страниц и сайтов только текст.

Пишите плагины для weboob.

[VolCh]

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

[ivan386]

Я про то что минимум текст страницы должен быть доступен в любом случае. Даже если поисковики умеют полноценно обрабатывать страницу.

[Jokerjar]

Статья 2009 года. В то время, в эпоху табличной верстки, эта «шутка», может, и имела место: сайт становился «голым», но не терял свой, так скажем, скелет. Сейчас же, с блочной версткой, с адаптивом и со слоями, если снять CSS, сайт просто превратится в нечитаемую кашу.

[Kicker]

Боты phantomjs как раз обрабатывают js)

[hcbogdan]

Конечно, но в таком случае нужно получать hover / focus и другие псевдоклассы — нужно потрудиться чтобы написать такой сценарий.
Если триггеры не срабатывают — вероятно это бот.

[Areso]

Встречаются люди с расширениями User CSS / Stylebot / Stylish / etc, которые могут к чертям сломать такую аналитику. У меня есть знакомые, которые их используют.

[Goodkat]

Я использую, чтобы отключать вырвиглазные шрифты, но описанные в статье приёмы я вряд ли замечу и отключу, даже случайно.
Впрочем, в последнее время я просто отключил левые шрифты в ublocker-e, и стили давно уже не подправлял.

[Mihail72]

тут, как мне кажется, вопрос про блокировку js способов различными плагинами.

[Areso]

Старые форумы работают отлично без JS.

[Deosis]

Есть расширения блокирующие скрипты по доменам.

[ivan386]

Noscript

[ademaro]

У всех есть JavaScript, да?

[Akuma]

Да никто ж не спорит. А еще могут свет выключить в момент покупки пользователем Ламборджини, а их сайт этого не предусматривает, вот беда то.

Давайте ориентироваться на нормальных пользователей, которых большинство.

[Vest]

У меня к вам вот тут вопрос:

то есть мы не получаем информацию о том, каким образом пользователь вел себя на странице.

Вы же обрабатываете запросы на сервере. Уже как минимум отлавливаете переходы по своим ссылкам. События с формами также относятся к серверной активности.

Вариант с hover || focus мне не нравится потому, что я (как пользователь) смогу породить вам много паразитных запросов, например, зажав tab. Я думаю, что вашему серверу это не понравится, и мне как пользователю тоже.

Простите, писал с телефона, потому не форматировал текст.

[MiXei4]

Ссылка может быть внешняя и вы хотите знать кликают пользователи по ней или нет.
Сомневаюсь, что запрос будет происходить каждый раз при hover/focus. Скорее всего один раз на один элемент. И тут вы уже сами вольны распоряжаться на сколько элементов вешать такой обработчик.

[hcbogdan]

Как правильно заметил MiXei4 это актуально для отслеживания как внутренних так и внешних ссылок.

По поводу форм, я согласен с вами — мы получим данные на сервере. Но цель же не просто отследить факт отправки формы, а понять как пользователь себя вел на странице. Допустим такой кейс:
У вас есть форма заказа, те пользователи которые ее заполнили и отправили — да мы приняли эту информацию. Но есть еще пользователи которые не прошли этот этап и на чем-то остановились. Цель поведенческой аналитики как раз в этом.

По поводу «смогу породить вам много паразитных запросов, например, зажав tab» — насколько я тестировал, вы не сможете такого сделать, запрос приходит лиш один раз за сеанс (после загрузки страницы) повторный фокус или клик — не создает запросов.

[aamonster]

Хм. А все эти url будут отрабатывать каждый раз или один раз скачаются и осядут в кэше?
Хотя, наверное, можно Cache-Control выставить...

[hcbogdan]

Есть некоторая особенность в обработке таких запросов.
Прежде всего все загрузки url(x) будут происходит один раз за сеанс (во множестве браузеров так). Другими словами, вы:
1. заходите на страницу spycss.hcbogdan.com
2. наводите курсор на ссылку google.com
3. на сервер отправляется GET
4. потом повторно наводите курсор на ссылку google.com
5. повторных запросов нет

Только если вы обновите страницу, или откроете в другой вкладке, вы сможете пройти путь снова с пункта №1.

Конечно нужно учитывать кэширование браузера, например можно использовать такие заголовки — github.com/Bogdaan/spycss-demo/blob/master/src/controllers.php#L181

[altervision]

Как думаете, а каким образом можно было бы с помощью CSS вытаскивать данные из форм? Например, из форм заказов на сворованных конкурентами лендингах. Существует ли вообще такая возможность?

[hcbogdan]

Хм… Ответ зависит от того, в каком состоянии находиться форма.
Допустим, если у вас есть форма в которой сервер заранее устанавливает какие-либо значения (исходя из данных пользователя). В таком случае вы сможете загрузить эти данные к себе используя CSS.

Например, таким образом: jsfiddle.net/hcbogdan/1wdky4t6/1

[hcbogdan]

Определенно, существует угроза «утечки» данных. Некоторую информацию вы можете найти в статье: создаем CSS кейлоггер

[Methos]

файл hosts

добавляем 127.0.0.1 mc.yandex.ru

и все ваши правила прекращают работать

[MiXei4]

Причём тут яндекс? Мы же можем все запросы отправлять на свой сервер. На тот же домен на котором расположен собственно сайт.

[aamonster]

hosts — халявный метод, идеален, если ненужный мусор на отдельном домене. Если он на том же домене, что сайт — опаньки. Но можно подавить с помощью extension. Для Chrome нужное API — chrome.webRequest onBeforeRequest, для Firefox, наверное, то же в browser. Но за всё приходится платить: это лишний код, выполняющийся перед загрузкой каждого файлика.

[devalone]

Current url schema:
/<user_id>/<endpoint>/<value>

и всё-таки лучше использовать сессию, а не id пользователя.

[hcbogdan]

Не согласен с вами по следующим причинам:
1. Запросы могут идти на другой домен. К примеру у вас сайт a.aa на нем загружены стили с домена b.bb
2. State-less бэкенд прост в реализации
3. Ничто не мешает вам игнорировать UserId, в случае, если ваш бэкенд поддерживает сесии (state-full, как например реализован spycss.hcbogdan.com). Но если у вас сессии не допустимы, данные потеряються.

[riky]

Пользователи отключающие js могут и картинки отключить. А если их отключить то ваше отслеживание уже не работает.

[hcbogdan]

Не согласен с вами. Есть методы, которые я не описал в этой статье. К примеру загрузка внешнего шрифта директивой @font-face {src: url()}
Они работают даже тогда, когда картинки и JS отключен.

[LynXzp]

uBlock блокирует загрузку внешних шрифтов. А про картинки, я подумал, вот про это:

JavaScript жучки не подходят исходя из требований. За исключением таких, которые идут в комплекте с статичным счетчиком. (пример яндекс счетчика)

Нормальные блокировщики (ну кроме nojs) отключают и то и то, и речи не идет чтобы оставить что-то одно. Конечно можно свою картинку запилить.

У меня подход простой: считаете меня на своем сайте — считайте на здоровье. Отправляете мои данные другим (яндексу, гуглу, ...) — обойдетесь. (Точнее обойдется яндекс и гугл).