Популярное

Свежее

Моя лента

Сообщения

Рейтинг

Курсы

Темы

Маркетинг

Сервисы

AI

Личный опыт

Деньги

Инвестиции

Право

Карьера

Путешествия

Крипто

Показать все

vc.ru

О проекте

Правила

Реклама

Приложения

Natalia Kurinna

+5

с 2020

2 подписчика

26 подписок

Посты Комментарии

Свежее

Natalia Kurinna

18.07.2020

Как отслеживать клики по выпадающим меню/спискам

События выбора из выпадающего меню или списка являются очень важными и информативными микро-конверсиями. Их отслеживание может быть полезно, если, например, в зависимости от выбора пользователя, инициируется загрузка файла или происходит перемещение пользователя на другую страницу. И даже когда немедленных действий нет - полезно знать, сколько поль…

Показать полностью

1

10

Natalia Kurinna

Разработка

28.06.2020

Девять CSS-селекторов на заметку начинающему веб аналитику

Свободный перевод. Ссылка на оригинальную статью Симо Ахава: #GTMTips: 10 Useful CSS Selectors.

Использование CSS-селекторов в Google Tag Manager — без сомнен…

Показать полностью

3

1

15

10

Natalia Kurinna

Сервисы

30.01.2020

Веб парсинг: 10 вещей, на которые следует обратить внимание, чтобы избежать обнаружения

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

Показать полностью

4

4

46

7

Установите тег на срабатывание триггера DOM Ready.

Измените строку, которая начинается с var selectMenu = ..., чтобы селектор соответствовал элементу, который вы хотите отслеживать непосредственно в вашем случае.

Если CSS селекторы вам незнакомы, вы можете прочитать о них здесь или использовать document.getElementById (), или другой метод DOM, который вам больше подходит. Независимо от используемого вами селектора, вам нужно задать именно элемент select в переменной selectMenu, чтобы это решение работало.

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

Итак, когда наш слушатель обнаруживает событие 'change', обратный вызов помещает в dataLayer объект, который содержит кастомное событие selectionMade и ссылку на объект для опции, выбранной пользователем.

Чтобы ваш тег каждый раз срабатывал при выборе, вам понадобится пользовательское событие, который выглядит следующим образом:

Далее, в зависимости от того, как был настроен элемент option, вы можете использовать одну из следующих переменных уровня данных:

Вот и все! Когда пользователь делает выбор - первая захватывает значение атрибута value выбранной опции. Если же value нет, она захватывает текст. Вторая - захватывает текст, даже если опция имеет атрибут value.

Таким образом вы можете отслеживать клики по любым выпадающим меню или спискам.

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

Эту статью в оригинале и другие полезные статьи по digital аналитике вы можете найти на англоязычном блоге Симо Ахавы.

Свободный перевод. Ссылка на оригинальную статью Симо Ахава: #GTMTips: 10 Useful CSS Selectors.

Использование CSS-селекторов в Google Tag Manager — без сомнения, одна из его самых полезных опций. Это дает непревзойденную гибкость, особенно в сочетании с триггерами кликов и форм.

CSS-селекторы позволяют проверять HTML-элемент на соответствие заданному вами селектору. Таким образом, когда вы используете триггер клика или формы, вы можете проверить соответствуют ли встроенные переменные клика или формы определенному селектору, и убедиться, что действие произошло именно с тем элементом, который вам нужен.

Вы можете использовать CSS-селекторы в любом JavaScript (или CSS), который развертываете у себя на сайте или в GTM, но, полагаю, наиболее типичным вариантом использования будет условие триггера «соответствует селектору CSS». Оно позволяет оценить элемент, по которому кликнули. Ниже более подробно об этом.

Итак, вы хотите отправлять событие по условию, что клик произошел по определенному HTML-элементу. Чтобы реализовать это, вам потребуется триггер клика или формы. В рамках данного триггера нужно выбрать опцию «Некоторые клики» и добавить свое условие.

Например, приведенный ниже триггер сопоставит элемент, который был нажат, с CSS-селектором и сработает только в том случае, если выбранный элемент является прямым потомком элемента с идентификатором myDiv.

Помимо того, что CSS-селекторы используются для создания триггеров, сами по себе они тоже могут вам очень пригодиться. Разумеется, они нужны в таблицах стилей, но их также можно использовать с такими DOM-методами как querySelector() и querySelectorAll(), а также с matches() (для поддержки кросс-браузерности могут потребоваться некоторые дополнительные настройки).

Ниже перечислены девять CSS-селекторов, с помощью которых вы сможете настроить отслеживание большинства распространенных видов событий для сайта.

Следующие селекторы используются для точного определения элементов на основе их атрибутов или их позиции в DOM. Их можно комбинировать, размещая один за другим. Например, div[title=”someTitle”][data-gtm-event=”someEvent”] будет соответствовать любому элементу div, который имеет атрибуты title и data-gtm-event.

Эти универсальные селекторы являются основой практически всего, что вы делаете с CSS-селекторами.

Этот селектор соответствует любой ссылке (<a>), у которой атрибут href начинается с “tel:”, например: <a href=”tel:01010101\">. С помощью этого селектора вы можете трекать клики по номеру телефона.

Вот так вы можете адаптировать его для трекинга кликов по имейлам: a[href^=”mailto:”]

Этот селектор соответствует любой ссылке, у которой атрибут href содержит “example.com”. Таким образом, можно использовать его, чтобы отсеять (или включить) клики по внутренним ссылкам на сайте.

Этот селектор соответствует любой ссылке, у которой атрибут href заканчивается на «.pdf». Вы можете просто заменить «.pdf» на любой тип файла, который хотите отслеживать.

Общие селекторы уже рассмотрены выше, но есть очень важный момент, который хотелось бы отметить.

Когда вы работаете с триггером «Клик/Все элементы», рекомендую добавить проверку соответствия для каждого элемента, который вы хотите отслеживать:

Click Element соответствует CSS-селектору

a[href*=”example.com”], a[href*=”example.com”] *

Другими словами, после вашего селектора добавьте еще один, который соответствует любому его потомку. Иногда это необходимо, поскольку триггер Все элементы фиксирует непосредственно только тот элемент, по которому кликнули. Но в виду вложенности структуры DOM, вы можете столкнуться с неожиданной штукой. Например, если у вас есть такая ссылка:

Клик по ссылке фактически придется на <span/>, и обычный триггер клика по ссылке в данном случае не будет работать. Используя селектор a[href=”mailto:some@email.com”], a[href=”mailto:some@email.com”] *, вы захватываете как клики на ссылку, так и на любых ее потомков (включая <span/>).

Часто в формах присутствуют чекбоксы, радиокнопки, списки выбора. Вы можете использовать псевдо-селектор :checked, чтобы трекать такие элементы. Например, form#myForm option:checked ищет любой элемент <option>, выбранный в форме. Таким образом вы можете использовать этот селектор для идентификации выбранной опции в раскрывающихся списках и других элементах, где присутствует этот псевдо-класс.

Псевдо-селектор :not срабатывает если условие, что элемент не содержит заданное значение, возвращает true. Например, селектор вроде a:not([href*=”example.com”]) будет трекать клики по любым ссылкам, которые не содержат “example.com” в href.

Селектор: first-child соответствует первому дочернему элементу по отношении к заданному. Например, ol > li:first-child будет соответствовать первому элементу из списка

Другие похожие селекторы — :last-child (соответствует последнему дочернему элементу) и :nth-child(N) (соответствует Н-ному дочернему элементу, например :nth-child(3) будет соответствовать третьему дочернему элементу относительно родительского элемента).

Квадратные скобки обозначают атрибуты. Если вы пропустите знак равенства (=), то можете просто проверить, имеет ли элемент данный атрибут. Например, селектор a[data-gtm-event] будет соответствовать любой ссылке с атрибутом data-gtm-event, независимо от значения этого атрибута.

Десятый пункт — совет, а не селектор. Старайтесь избегать длинных и сложных цепочек селекторов. Чем длиннее цепочка, чем больше вы используете отсылок на прямые отношения родителей и потомков(>) — тем больше точек отказа вы добавляете в ваш селектор.

Все, что нужно, чтобы ваш селектор перестал работать — изменение всего лишь одного элемента в длинном пути DOM, который указывает на ваш элемент. Особенно если об этом не вкурсе ваши старательные фронтенд разработчики.

Старайтесь всегда находить наиболее общий селектор, но который все еще достаточно точно соответствует тому, который вы пытаетесь захватить.

Надеюсь кому-нибудь это пригодилось)

Если у вас есть полезные кейсы и селекторы, которые вас выручали, и которыми вы хотели бы поделиться — буду рада расширить ими этот список.

#css #html

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

Переключение или рандомное назначение юзер агентов является одной из наиболее эффективных тактик предотвращения обнаружения. Многие сисадмины и IT-менеджеры отслеживают количество запросов с разных юзер агентов. Если они видят необычно большое количество запросов с одного IP и юзер агента - user agent/IP нарушителя будут заблокированы. Вы можете наблюдать это в действии, когда парсите с использованием стандартных заголовков, предоставляемых HTTP библиотеками. Попробуйте запросить страницу Amazon, используя стандартные заголовки запросов Python, и вы сразу получите 503.

Чтобы минимизировать вероятность блокировки, вы можете установить кастомный юзер агент. Лучше выбирать юзер агент рандомно из списка самых распространенных. С помощью библиотеки запросов Python можно сделать это следующим образом:

Приведенный выше фрагмент кода возвращает случайный юзер агент и стандартный заголовок Chrome ‘Accept’. Этот фрагмент кода содержит десять наиболее часто используемых браузеров для десктопа. Стоит время от времени обновлять список браузеров, чтобы обеспечить актуальность юзер агентов, включенных в список.

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

Даже когда вы меняете юзер агенты, есть вероятность, что вас раскроют. Иногда вас могут выдать другие элементы заголовков. Заголовки ‘accept’ и ‘accept encoding’, отправляемые HTTP библиотеками, как правило отличаются от тех, которые отправляются реальными браузерами. Вы можете модифицировать эти заголовки, чтобы сделать их максимально похожими на заголовки реального браузера.

Любой, кто присмотрится к заголовкам ‘Accept’ в примере с рандомной сменой юзер агента, быстро поймет, что различные юзер агенты используют один и тот же заголовок ‘Accept’. К счастью, большинство системных администраторов полностью игнорируют хитросплетения этих заголовков и просто проверяют, отправляют ли браузеры что-либо правдоподобное.

Слишком частые запросы - распространенная причина обнаружения парсинга. Пытаясь быстро получить данные, часто забывают о том, что большое количество запросов в короткий промежуток времени с одного IP выглядит подозрительно. Установив таймаут между запросами в несколько секунд, вы увеличите свои шансы не попасть под радар того, кто пытается вас остановить. Для некоторых задач таймаута бывает недостаточно. Парсинг больших объемов данных может занимать слишком много времени - для таких задач вам потребуются прокси.

В некоторых случаях прокси - это необходимость. Для парсинга больших объемов данных требуется много ресурсов, поэтому нет необходимости «изобретать велосипед», разрабатывая собственную внутреннюю инфраструктуру для управления прокси. Если в парсинге вы новичок - за прокси лучше обратится к прокси-провайдеру, который поможет вам их настроить и позаботится о всех трудностях с их управлением.

Хорошим примером такого провайдера является Infatica. Они предоставляют резидентные прокси, которые идеально подходят для парсинга, поскольку это IP реальных пользователей. Обнаружить парсинг с такими прокси практически невозможно - они маскируют ваши запросы и для сайта, который активно препятствует скрепингу, ваши запросы поступают с разных источников.

Даже крупные e-commerce компании передают управление прокси на аутсорс прокси-сетям, поскольку приоритетом № 1 для большинства компаний являются данные, а не управление прокси. Многие SEO-агентства и компании, занимающимся digital маркетингом, также прибегают к подобным SaaS-компаниям для получения данных о ранжировании в поисковых системах. Они “вращают” и контролируют состояние своих прокси с целью извлечения огромных объемов данных из Google и других поисковиков.

JavaScript используется сейчас практически везде. Количество людей, браузеры которых не поддерживают JavaScript, составляет менее <1%. Поэтому для некоторых сайтов IP, отправляющие большое количество запросов без рендеринга JavaScript, являются одним из триггеров для блокировки. Простое решение - рендерить JavaScript, используя безголовый браузер и Selenium.

Для блокировки ботов такие компании как Cloudflare используют проверку на предмет включен ли у пользователя JavaScript. Однако в настоящее время существует несколько библиотек, которые помогут обойти защиту, реализованную Cloudflare. Библиотека Python cloudflare-scrape представляет собой обертку вокруг библиотеки запросов, которая просто запускает тест JavaScript Cloudflare в среде узлов, если обнаружит, что такая защита установлена.

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

То, что многие краулеры и парсеры не могут делать, - это отключение после того, как начинают получать ошибки 403 и 503. Когда после прохождения множества страниц с ошибками парсер продолжает запрашивать еще больше страниц, становится совершенно очевидно, что вы на самом деле бот. У вас должна быть возможность приостановить и возобновить парсинг, чтобы по ходу дела поправить код. Замедление и откаты назад, когда вы получаете ошибки запрещенного доступа, могут помочь вам избежать постоянного бана.

Некоторые вебмастера внедряют ловушки, которые стремятся захватить ботов путем направления их на страницы, единственная цель которых - определить, являются ли они ботами. Существует очень популярный плагин WordPress, который просто создает пустой каталог «/ blackhole /» на вашем сайте. Затем ссылка на этот каталог скрывается в нижнем колонтитуле сайта, который не виден тем, кто использует браузеры. При разработке парсера для конкретного сайта стоит посмотреть, не скрыты ли какие-либо ссылки для пользователей, загружающих страницу с помощью стандартного браузера.

Простое соблюдение robots.txt во время парсинга может избавить вас от многих проблем. Хотя сам файл robots.txt не обеспечивает защиту от парсеров, некоторые веб-мастера просто блокируют любой IP-адрес, который делает много запросов на заблокированные в robots.txt страницы. К счастью, процент веб-мастеров, которые это делают, довольно мал. Если контент, который вам нужен, заблокирован robots.txt, вам, конечно, придется его проигнорировать. Но я настоятельно рекомендую вам уважать чужие правила, а то, что не запрещено в нем - разрешено. Старайтесь соблюдать инструкции robots.txt - это определенно может избавить вас от серьезных проблем.

В некоторых случаях полезно собирать и хранить куки. При парсинге таких сервисов как Google, cookie-файлы могут влиять на результаты, возвращаемые поисковой системой. Большинство тех, кто парсит поиск Google, не отправляют cookie с запросами, что является ненормальным с точки зрения поведения обычного пользователя. Если вы не возражаете против получения персонализированных результатов, отправка куки вместе со своими запросами может быть хорошей идеей для некоторых задач.

Капча - одна из самых трудных для обхода мер по защите от парсинга. К счастью, капча невероятно раздражает и реальных пользователей, поэтому не многие сайты злоупотребляют ею. Справиться с капчей можно либо с помощью инструментов компьютерного зрения, таких как tesseract-ocr, либо можно приобрести решения в ряде API сервисов, которые используют людей для решения основных капч. Эти сервисы доступны даже для последних визуальных капч от Google - просто они будут стоить дороже.

Используя приведенные выше советы, вы сможете спарсить подавляющее большинство сайтов, не сталкиваясь с какими-либо проблемами.

P.S. Написано по материалам edmundmartin.com - полезный ресурс для всех, кто занимается парсингом или изучает его.