Регулярные выражения в CSS-селекторах и GTM
В предыдущих материалах я описывал работу CSS-селекторов и селекторов в jQuery, отдельно останавливаясь на такой теме, как селекторы атрибутов. В этой статье хочу более подробно разобрать регулярные выражения, которые можно использовать при составлении CSS-селекторов.
Еще раз тезисно:
- селектор — это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применен стиль;
- регулярные выражения - инструмент для поиска строк и их проверки на соответствие какой-либо конструкции. Результатом применения регулярного выражения является подмножество данных, отобранное согласно логике, заложенной в выражении.
- у HTML-элементов на странице могут быть атрибуты - дополнительные значения, которые настраивают элементы или регулируют их поведение различным способом, чтобы соответствовать критериям пользователей;
- CSS-селекторы применяются в Google Tag Manager для условий активации триггеров, а также в пользовательских переменных.
Чтобы узнать какой CSS-селектор у элемента, необходимо открыть панель разработчика (в Google Chrome клавиша F12) и:
- переключиться на вкладку Elements;
- нажать на кнопку инспекции элемента;
- выбрать элемент, у которого хотим определить CSS-селектор;
- после этого кликнуть правой кнопкой мыши на тот элемент, который подсветился на вкладке Elements;
- выбрать Copy - Copy selector (6):
В результате мы получим значение CSS-селектора. Например, такого вида:
1 |
#home > div > div > div > div > div > a.button.hp-button-1.slide-button.w-button.green.fancybox |
Верно и обратное. Зная CSS-селектор элемента, мы можем с помощью расширения CSS Selector Tester найти его на странице. Введя значение в соответствующем поле, расширение подсветит его:
Это дает нам возможность понять, встречается ли где-нибудь еще элемент с таким же CSS-селектором на странице. Или же он является уникальным. Если такой элемент на странице не один, а целая группа, CSS Selector Tester выделит красным пунктирным прямоугольником все встречающиеся на странице элементы.
Помимо этого в CSS-селекторах можно использовать регулярные выражения. Если быть точнее, то с помощью специальной конструкции (спецсимволов) вы можете задать определенное правило, которое будет распространяться на атрибут не одного элемента, а сразу на целую группу, которая попадает под заданное условие.
Давайте разберем практическую задачу. На сайте по производству мебели необходимо отслеживать клик по адресу магазина и передавать эту информацию в инструменты веб-аналитики.
Например, в Google Analytics, чтобы получить данные в таком виде:
Чтобы мы делали в обычной ситуации? Определяли бы для каждого элемента свой CSS-селектор и настраивали бы триггер с конкретным условием, а потом еще и собственный тег для передачи данных в Яндекс.Метрику и Google Analytics. В результате у нас бы получилось много триггеров и много тегов. Нам это не подходит.
Если мы исследуем каждый из этих элементов, то найдем закономерность - все они имеют одинаковое начало атрибута id вида store-span-...
Далее отличается только цифра: 69, 86, 77, 78, 85 и т.д. Чтобы отследить клики по всем таким адресам, нам в GTM потребуется прописать всего лишь 1 условие для триггера, используя регулярные выражения, и создать 1 тег.
У маркетологов часто встречается схожая задача - отследить клик по кнопке Купить или Добавить в корзину. Товаров может быть много, у каждого из них своя кнопка, в которой отличие только в ее идентификаторе, классе, атрибуте:
Так или иначе, все это можно отслеживать благодаря Google Tag Manager, а прописывать условия с помощью CSS-селекторов и регулярных выражений.
В предыдущей статье про CSS-селектор я рассматривал принцип работы селекторов атрибутов. Они отбирают элементы по его наличию или значению. Посмотреть весь список можно в справочной документации Mozilla. Вот в них как раз и можно использовать регулярные выражения: ^=, $=, *=, ~=, |=
Давайте разберем на примерах.
[attribute^=value] Начинается с ^=
Атрибут начинается с value. Сам символ ^ используется для обозначения начала строки. Возьмем вышеописанный пример, где необходимо отследить клики по адресам магазинов и передать эту информацию в Google Analytics. Атрибут id начинается одинаково с store-span , поэтому мы можем написать такую конструкцию:
1 |
[id^=store-span] |
С помощью CSS Selector Tester мы можем проверить какие элементы будут подсвечены на странице с данным атрибутом.
Для настройки триггера в Google Tag Manager можно воспользоваться типом Клик - Все элементы. В качестве условия активации триггера задать Некоторые клики - Click Element - соответствует селектору CSS - [id^=store-span]Ну а далее, чтобы передать значение самого названия магазина, можно воспользовать встроенной переменной Click Text, которую нужно добавить в тег Universal Analytics с типом Событие в любое из 4 компонентов (Категория, Действие, Ярлык). Триггер активации - наш настроенный выше триггер Клик - Все элементы.
[attribute$=value] Заканчивается на $=
Противоположный вариант, когда атрибут заканчивается на value. Символ $ используется для обозначения окончания строки. Например, активировать триггер при нажатии на ссылки, которые заканчиваются на .jpg. Конструкция такая:
1 |
img[src$=jpg] |
В качестве условия активации триггера в Google Tag Manager можно задать тоже самое: Некоторые клики - Click Element - соответствует селектору CSS - img[src$=jpg]. Либо же воспользоваться другим триггером Клик - Только ссылки.
[attribute*=value] Подстановочный знак *=
Атрибут содержит подстроку value и может быть равен myvalue, value2020, myvalue2020 и т.д. То есть выбираются все элементы с attribute, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) value.
Таким образом, мы можем указать часть значения (без начала или конца) и при выполнении условия триггер в GTM также будет срабатывать. Приведу пример:
1 |
[title*=зыв] |
В этом случае произойдет активация триггера только в том случае, если пользователь нажмет на элемент, который содержит title со значением зыв. Я не дописал слово целиком целенаправленно, чтобы продемонстрировать, что подстановочный знак * все равно выделяет нужный элемент. А наше значение (value) находится ни в начале, ни в конце, а посередине.
В качестве условия активации триггера в Google Tag Manager можно задать аналогичную конструкцию: Некоторые клики - Click Element - соответствует селектору CSS - [title*=зыв]. Либо же воспользоваться другим триггером Клик - Только ссылки.
Существует еще два селектора атрибутов со спецсимволами: [attribute|=value] и [attribute~=value].
[attribute|=value]
Атрибут равен value или начинается с value- (дефис следом!). Эта же конструкция подошла бы и для отслеживания кликов по адресам из предыдущего примера. Задав:
1 |
[id|=store-span] |
Мы бы получили тот же самый результат:
[attribute~=value]Атрибут содержит содержит value, значением которого является набор слов, разделенных пробелами, одно из которых в точности равно value. То есть value должно идти как отдельное слово через пробел, иначе конструкция не будет работать. Например: [attribute~=value] верно для 2020 value и неверно для 2020value или 2020-value.
В качестве примера разберем набор товаров на сайте, у которых есть класс cat-good. У части мебели есть дополнительный класс sale, отделенный пробелом, а у некоторых моделей такого класса через пробел нет.
Задав конструкцию:
1 |
[class~=sale] |
CSS Selector Tester выделит нам странице только те товары, которые содержат в себе класс со значением sale, разделенный пробелом.
Для последних двух селекторов по атрибутам условие активации триггера в GTM такое же - Некоторые клики - Click Element - соответствует селектору CSS - CSS-селектор.
Таким образом, конструкции CSS-селекторов с регулярными выражениями помогут вам создать наиболее гибкие условия для активации триггеров и пользовательских переменных в Google Tag Manager.