Регулярные выражения в CSS-селекторах и GTM

15 марта, 2020

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

Еще раз тезисно:

  • селектор — это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применен стиль;
  • регулярные выражения - инструмент для поиска строк и их проверки на соответствие какой-либо конструкции. Результатом применения регулярного выражения является подмножество данных, отобранное согласно логике, заложенной в выражении.
  • у HTML-элементов на странице могут быть атрибуты - дополнительные значения, которые настраивают элементы или регулируют их поведение различным способом, чтобы соответствовать критериям пользователей;
  • CSS-селекторы применяются в Google Tag Manager для условий активации триггеров, а также в пользовательских переменных.

Чтобы узнать какой CSS-селектор у элемента, необходимо открыть панель разработчика (в Google Chrome клавиша F12) и:

  1. переключиться на вкладку Elements;
  2. нажать на кнопку инспекции элемента;
  3. выбрать элемент, у которого хотим определить CSS-селектор;
  4. после этого кликнуть правой кнопкой мыши на тот элемент, который подсветился на вкладке Elements;
  5. выбрать Copy - Copy selector (6):
Регулярные выражения в CSS-селекторах

Определение CSS-селектора у элемента на странице

В результате мы получим значение CSS-селектора. Например, такого вида:

Верно и обратное. Зная CSS-селектор элемента, мы можем с помощью расширения CSS Selector Tester найти его на странице. Введя значение в соответствующем поле, расширение подсветит его:

Регулярные выражения в CSS-селекторах

CSS Selector Tester

Это дает нам возможность понять, встречается ли где-нибудь еще элемент с таким же CSS-селектором на странице. Или же он является уникальным. Если такой элемент на странице не один, а целая группа, CSS Selector Tester выделит красным пунктирным прямоугольником все встречающиеся на странице элементы.

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

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

Регулярные выражения в CSS-селекторах

Клик по адресу - Отправка события в аналитику

Например, в Google Analytics, чтобы получить данные в таком виде:

Регулярные выражения в CSS-селекторах

События в Google Analytics

Чтобы мы делали в обычной ситуации? Определяли бы для каждого элемента свой CSS-селектор и настраивали бы триггер с конкретным условием, а потом еще и собственный тег для передачи данных в Яндекс.Метрику и Google Analytics. В результате у нас бы получилось много триггеров и много тегов. Нам это не подходит.

Если мы исследуем каждый из этих элементов, то найдем закономерность - все они имеют одинаковое начало атрибута id вида store-span-...

Регулярные выражения в CSS-селекторах

У всех элементов одинаковое начало store-span-

Далее отличается только цифра: 69, 86, 77, 78, 85 и т.д. Чтобы отследить клики по всем таким адресам, нам в GTM потребуется прописать всего лишь 1 условие для триггера, используя регулярные выражения, и создать 1 тег.

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

Регулярные выражения в CSS-селекторах

Кнопка "Купить" с одинаковым атрибутом

Так или иначе, все это можно отслеживать благодаря Google Tag Manager, а прописывать условия с помощью CSS-селекторов и регулярных выражений.

В предыдущей статье про CSS-селектор я рассматривал принцип работы селекторов атрибутов. Они отбирают элементы по его наличию или значению. Посмотреть весь список можно в справочной документации Mozilla. Вот в них как раз и можно использовать регулярные выражения: ^=,  $=, *=, ~=, |=

Давайте разберем на примерах.

[attribute^=value] Начинается с ^=

Атрибут начинается с value. Сам символ ^ используется для обозначения начала строки. Возьмем вышеописанный пример, где необходимо отследить клики по адресам магазинов и передать эту информацию в Google Analytics. Атрибут id начинается одинаково с store-span , поэтому мы можем написать такую конструкцию:

С помощью CSS Selector Tester мы можем проверить какие элементы будут подсвечены на странице с данным атрибутом.

Регулярные выражения в CSS-селекторах

[id^=store-span]

Для настройки триггера в Google Tag Manager можно воспользоваться типом Клик - Все элементы. В качестве условия активации триггера задать Некоторые клики - Click Element - соответствует селектору CSS - [id^=store-span]

Регулярные выражения в CSS-селекторах

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

Ну а далее, чтобы передать значение самого названия магазина, можно воспользовать встроенной переменной Click Text, которую нужно добавить в тег Universal Analytics с типом Событие в любое из 4 компонентов (Категория, Действие, Ярлык). Триггер активации - наш настроенный выше триггер Клик - Все элементы.

Регулярные выражения в CSS-селекторах

Настройка тега Universal Analytics

[attribute$=value] Заканчивается на $=

Противоположный вариант, когда атрибут заканчивается на value. Символ $ используется для обозначения окончания строки. Например, активировать триггер при нажатии на ссылки, которые заканчиваются на .jpg. Конструкция такая:

Регулярные выражения в CSS-селекторах

img[src$=jpg]

В качестве условия активации триггера в Google Tag Manager можно задать тоже самое: Некоторые клики - Click Element - соответствует селектору CSS - img[src$=jpg]. Либо же воспользоваться другим триггером Клик - Только ссылки.

Регулярные выражения в CSS-селекторах

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

[attribute*=value] Подстановочный знак *=

Атрибут содержит подстроку value и может быть равен myvalue, value2020, myvalue2020 и т.д. То есть выбираются все элементы с attribute, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) value.

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

Регулярные выражения в CSS-селекторах

[title*=зыв]

В этом случае произойдет активация триггера только в том случае, если пользователь нажмет на элемент, который содержит title со значением зыв. Я не дописал слово целиком целенаправленно, чтобы продемонстрировать, что подстановочный знак * все равно выделяет нужный элемент. А наше значение (value) находится ни в начале, ни в конце, а посередине.

В качестве условия активации триггера в Google Tag Manager можно задать аналогичную конструкцию: Некоторые клики - Click Element - соответствует селектору CSS - [title*=зыв]. Либо же воспользоваться другим триггером Клик - Только ссылки.

Регулярные выражения в CSS-селекторах

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

Существует еще два селектора атрибутов со спецсимволами: [attribute|=value] и [attribute~=value].

[attribute|=value] 

Атрибут равен value или начинается с value- (дефис следом!). Эта же конструкция подошла бы и для отслеживания кликов по адресам из предыдущего примера. Задав:

Мы бы получили тот же самый результат:

Регулярные выражения в CSS-селекторах

[id|=store-span]

[attribute~=value]

Атрибут содержит содержит value, значением которого является набор слов, разделенных пробелами, одно из которых в точности равно value. То есть value должно идти как отдельное слово через пробел, иначе конструкция не будет работать. Например: [attribute~=value] верно для 2020 value и неверно для 2020value или 2020-value.

В качестве примера разберем набор товаров на сайте, у которых есть класс cat-good. У части мебели есть дополнительный класс sale, отделенный пробелом, а у некоторых моделей такого класса через пробел нет.

Регулярные выражения в CSS-селекторах

sale через пробел есть и нет

Задав конструкцию:

CSS Selector Tester выделит нам странице только те товары, которые содержат в себе класс со значением sale, разделенный пробелом.

Для последних двух селекторов по атрибутам условие активации триггера в GTM такое же - Некоторые клики - Click Element - соответствует селектору CSS - CSS-селектор.

Таким образом, конструкции CSS-селекторов с регулярными выражениями помогут вам создать наиболее гибкие условия для активации триггеров и пользовательских переменных в Google Tag Manager.

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике