Рис. 33. CSS-селекторы в триггерах и переменных GTM
Если атрибут нужного элемента не повторяется на странице, то рекомендуется использовать именно встроенные переменные. Но если один и тот же класс используется в нескольких элементах на странице, тогда рекомендуется использовать селекторы CSS.
Как правило, большинство настроек с использованием селекторов CSS приходится на связку «соответствует селектору CSS» + Click Element или Form Element.
Но прежде чем разбираться в селекторах, рекомендую для начала ознакомиться с глобальной структурой документа в формате HTML – какие бывают элементы, заголовки, атрибуты, метаданные и т.д.
Подробнее обо всех элементах HTML читайте в руководстве разработчиков Mozilla. Чаще всего бы будете встречаться с такими тегами, как <p>, <a>, <div>, <span>, <h1>…<h6>.
Кроме этого, вы должны познакомиться с объектной моделью документа (Document Object Model, DOM). Согласно DOM-модели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами.
Прежде чем в Google Tag Manager настраивать триггеры на отслеживание прокрутки, взаимодействия пользователей с видео, электронную торговлю, вам необходимо понять, что из себя представляет дерево DOM.
DOM определяет логическую структуру документа, способы доступа к элементам и их изменению. Документ может быть как HTML, так и XML. Когда DOM используется для определения логической структуры HTML-документа, значит речь идет о HTML DOM. Давайте рассмотрим пример:
Рис. 34. Пример HTML-документа
Представление DOM этого документа HTML выглядит следующим образом:
Рис. 35. Представление DOM для документа HTML
Здесь html, head, body, title, meta, h2, p, table, tr, td, Google Tag Manager для googлят, Интернет-маркетинг и веб-аналитика, 2018 и т.д. являются примерами объектов DOM. Они также называются элементами или узлами. Нижние блоки с пометкой «Текст» являются текстовыми узлами.
Чтобы отслеживать клики/события через GTM по определенным элементам на странице, необходимо понимать взаимосвязь между различными узлами документа.
DOM нужен для того, чтобы манипулировать страницей – читать информацию из HTML, создавать и изменять элементы. Получив узел, мы можем что-то сделать с ним. Все узлы в документе имеют иерархическое отношение друг к другу. Существует несколько специальных терминов для описания отношений между узлами:
● родительский узел (parent node) – родительским узлом по отношению к рассматриваемому объекту является узел, в который вложен рассматриваемый объект.
На примере выше по отношению к узлам <h2>, <p> и <table> элемент <body> является родительским. Для узла <title> родительским является узел <head>.
● узлы-потомки (child node) – узлом-потомком по отношению к рассматриваемому объекту является узел, который вложен в рассматриваемый объект. На нашей схеме по отношению к узлу <body> <h2>, <p> и <table> являются потомками. Для узла <head> потомками являются <title> и атрибут “meta”.
● узлы-братья (sibling node) – узлы, находящиеся на одинаковом уровне вложенности по отношению к их родительскому узлу. На нашей схеме узлами-братьями являются <body> и <head> по отношению к корневому <html>, а также <h2>, <p> и <table> по отношению к родительскому узлу <body>.
Самый верхний узел в DOM называется корневым. Так как объект document не является частью DOM, в нашем примере корневым является <html>. Он не имеет родителей и сам является родительским узлом по отношению к <head> и <body>.
В интернете в различных материалах можно встретить разные термины – предок, потомок (прямой и непрямой), сыновья, дочери, дети, ребенок, братья, сестры, правнуки и т.д. По сути, это одно и тоже. То, как вы привыкнете их называть, не имеет значения. Главное – это правильно понимать взаимосвязь между ними и уметь к ним обращаться.
Каждый объект 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