Каждый объект HTML, кроме текстовых узлов, имеет свойства (атрибуты) и методы. Например:
Рис. 36. Фрагмент кода
● <a> – это элемент HTML;
● href, class – атрибуты элемента <a>;
● dataLayer.push () – это метод, который выполняется в ответ на событие onclick (возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick).
Google Tag Manager по умолчанию отслеживает все основные элементы и атрибуты, но не отслеживает кастомные (пользовательские) атрибуты.
Когда мы используем CSS-селекторы, мы находим элементы в DOM. для управления внешним видом HTML-документа существует формальный язык CSS. CSS это аббревиатура «Cascading Style Sheets» или «Каскадные Таблицы Стилей». Обычно CSS называют просто «стили». На текущий момент существует несколько спецификаций (CSS1, CSS2, CSS2.1, CSS3, CSS4). Последняя содержит незначительные изменения, и поэтому самой популярной и часто используемой на данный момент является CSS3.
Как правило, все стили веб-сайта выносятся в отдельный файл с расширением .css, к которому впоследствии можно обратиться по определенному пути.
Селекторы могут быть:
● простыми (напрямую идентифицируют элемент или несколько элементов страницы на основании типа элемента (или его класса (class) или id.);
● по атрибутам (позволяют искать элементы по их атрибутам attributes и значениям этих атрибутов. Делятся на две категории: селекторы наличия и значения атрибута и селекторы подстроки в значении атрибута);
● псевдоселекторами (те, что выбирают только часть элемента или только элементы в определенном контексте. Бывают двух типов – псевдоклассы и псевдоэлементы);
● комбинированными (селекторы и их взаимосвязи между друг другом выражаются посредством комбинаторов);
Давайте рассмотрим каждый вид подробнее.
Простые селекторы
К ним относятся: селекторы классов (class selectors) и селекторы по ID.
Селектор класса состоит из точки (.), за которой следует имя класса. Имя класса – это любое значение, не содержащее пробелов в HTML-атрибуте class.
Рис. 37. Пример селектора классов
Пример .form_button. Это означает, что css-селектор .class соответствует всем элементам с классом .form_button (class=”form_button”).
Рис. 38. Клик по элементам, соответствующим CSS-селектору класса .form_button
ID-селектор состоит из символа решетки (#), за которым следует ID нужного элемента. Каждый элемент может иметь уникальный идентификатор, назначаемый атрибутом id.
Рис. 39. Пример селектора по ID
Пример #maiLeaderboard. Это означает, что css-селектор #id соответствует всем элементам с идентификатором maiLeaderboard (id=”mainLeaderboard”).
Рис. 40. Клик по элементам, соответствующим CSS-селектору
c идентификатором #maiLeaderboard
Для выбора всех элементов на странице существует универсальный селектор (*). Помните этот спецсимвол в регулярных выражениях? Там он соответствует или более предыдущих элементов, а здесь служит для одновременного установления одного стиля для всех элементов веб-страницы. Например, чтобы задать шрифт или начертание текста.
Рассмотрим пример, в котором нам необходимо отследить клик по любому блоку внутри блока <div class="block">.
Рис. 41. Пример использования универсального селектора *
Настроить в GTM триггер на клик по элементу с классом "block", используя встроенную переменную Click Classes = “block”, не получится, так как сам клик будет приходиться на один из узлов-потомков блока block. А настраивать на каждый внутренний элемент (firstscreen dark-1, secondscreen dark-1 и т.д.) не целесообразно.
По этой причине будем использовать универсальный селектор * для класса .block:
Рис. 42. Клик по элементам, соответствующим CSS-селектору
класса .block и всех узлов-потомков с помощью универсального селектора *
Такая запись означает, что необходимо отслеживать клик по всем узлам-потомкам элемента с классом "block".
В CSS есть такое понятие, как «комбинаторы». Они позволяют объединить множество селекторов, что дает возможность выбирать элементы внутри других элементов, или смежные элементы.
Элемент
Если необходимо выбрать все определенные элементы на страницы, используйте конструкцию «элемент».
Рис. 43. Клик по элементам, соответствующим CSS-селектору по div
Триггер в GTM будет активироваться при выполнении события по всем элементам “div” на странице.
Элемент, Элемент
Если необходимо выбрать все элементы “div” и “p”, то используйте конструкцию «элемент, элемент».
Рис. 44. Клик по элементам, соответствующим CSS-селектору по div, p
Триггер в GTM будет активироваться при выполнении события по всем элементам “div” и “p” на странице.
Элемент Элемент
Если необходимо выбрать элемент, вложенный в другой элемент, то используйте конструкцию «элемент элемент».
Рис. 45. Клик по элементам, соответствующим CSS-селектору div p
Триггер в GTM будет активироваться при выполнении события по всем элементам “p” на странице внутри элементов ”div”.
Не обязательно должен быть «родительский узел» – «узел потомка», но необходимо, чтобы первый элемент был перед вторым.
Элемент>Элемент
Пример div>span. Конструкция «элемент>элемент» выбирает все дочерние элементы “span”, у которых родитель – элемент ”div”.
Разберем это на конкретном примере:
Рис. 46. Пример конструкции «элемент>элемент»
Добавляем в Google Tag Manager условие активации триггера:
Рис. 47. Клик по элементам, соответствующим CSS-селектору div>p
Триггер в GTM будет активироваться при выполнении события по дочерним элементам “p” на странице внутри элемента ”div”, то есть тех, которые на скриншоте выше выделены зеленым цветом и соответствуют строке «Мороз и солнце; день чудесный!».
Элемент+Элемент
Пример div+a. Конструкция «элемент+элемент» позволяет выбрать все элементы <a>, которые расположены сразу после закрывающегося тега <div>.
Рис. 48. Конструкция «элемент+элемент» на примере div+a
Таким образом, если мы зададим условие активации триггера в GTM по Click Element и соответствию селектору CSS “div+a”, то тег будет активироваться по событию на странице по тегу <a>, который идет сразу после закрывающегося тега ”div” (выделено зеленым), игнорируя другие теги <a> внутри “div” (выделены красным).
Рис. 49. Клик по элементам, соответствующим CSS-селектору div+a
Элемент~Элемент
Пример p~ol. Конструкция «элемент~элемент» позволяет выбрать все элементы “ol”, которым предшествует элемент “p”.
Селекторы по атрибутам
У элементов HTML есть атрибуты – это дополнительные значения, которые настраивают элементы или регулируют их поведение различным способом. Справочная информация по HTML атрибутам доступна по ссылке: https://developer.mozilla.org/ru/docs/Web/HTML/Attributes
Существует особый вид селекторов, позволяющий искать элементы по их атрибутам и значениям. Для их записи используются квадратные скобки [].
Селекторы наличия и значения атрибута
Эти селекторы выделяют элементы на основе точного значения атрибута:
● [атрибут] – выбирает все элементы с атрибутом ”атрибут”, вне зависимости от его значения;
Пример [target] – выбирает все элементы на странице с атрибутом target.
Примечание: по умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target тега <a>.
● [атрибут=”значение”] – выбирает все элементы с атрибутом “атрибут”, которое имеет значение “значение”.
Пример [target=_blank] – выбирает все элементы с атрибутом “target”, который имеет значение “_blank”.
● [атрибут~=”значение”] – выбирает все элементы с атрибутом “атрибут”, в значении которого (в любом месте) встречается "значение" в виде отдельного слова. Если говорить простыми словами, то является аналогом условия «содержит».
Рис. 50. Пример использования [атрибут~=”значение”]
Тильда (~) в данном селекторе является ключом для осуществления выбора элемента на основании наличия в значении атрибута нужного слова, отделенного пробелом. Если тильда будет пропущена, то получится требование к точному значению.
Селекторы подстроки в значении атрибута
Селекторы по атрибутам этого типа еще называют «Селекторы типа регулярных выражений (RegExp-like selectors)», поскольку они предлагают способ проверки условий, подобно тому, как это делают регулярные выражения. Подробно о регулярных