Читать «Google Tag Manager для googлят: Руководство по управлению тегами» онлайн - страница 16

Каждый объект 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

Для выбора всех элементов на странице существует универсальный селектор (*). Помните этот спецсимвол в регулярных выражениях? Там он соответствует 0 или более предыдущих элементов, а здесь служит для одновременного установления одного стиля для всех элементов веб-страницы. Например, чтобы задать шрифт или начертание текста.