Google Tag Manager для googлят: Руководство по управлению тегами. Яков Осипенков

на нее курсора мыши. Это реализуется с помощью псевдокласса :hover.

      Псевдокласс добавляется к селектору c помощью символа двоеточия : (селектор:псевдокласс).

      В Google Tag Manager псевдоклассы также можно применять для активации переключателей элементов интерфейса, например, checkbox и флажки (radio), или для отслеживания кликов по определенным элементам из выпадающего списка.

      Псевдокласс – это селектор, который используется для выбора того, что не может быть выбрано с помощью других селекторов или может быть выбрано, но достаточно трудным способом. Их существует большое количество, но на практике в GTM используются некоторые. Вот одни из самых популярных:

      ●:checked, :selected, :disabled, :enabled – различные состояния элементов input;

      ●:nth-child(n) – позволяет отследить определенный элемент списка. Например, “ul>li:nth-child(4)” позволяет отследить четвертый элемент;

      ●:nth-last-child(n) – псевдокласс, противоположный предыдущему, который позволяет отследить определенный элемент списка, отчет элементов идет с конца. Например, селектор CSS “:nth-last-child(2)” вернет предпоследний элемент списка;

      ●:not(селектор) – псевдокласс отрицания. Выбирает все элементы, кроме того элемента, что в скобках.

      Рис. 54. Таблица псевдоклассов с примерами

      Псевдоэлементы

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

      Рис. 55. Таблица псевдоэлементов с примерами

      Рекомендую перейти на сайт w3schools.com и изучить два материала для лучшего понимания данной темы:

      CSS-селекторы: w3schools.com/cssref/css_selectors.asp

      Демонстрация селекторов: w3schools.com/cssref/trysel.asp

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

      Рис. 56. Демонстрация селекторов на сайте w3schools.com

      Выбрав в левой части экрана один из селекторов, справа вы увидите подсвеченный результат.

      Также для закрепления пройденного материала рекомендую прочитать статью «Основы CSS-селекторов на примере котиков» и несколько разделов из справки разработчиков developer.mozilla.org.

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

      Разберем три варианта определения CSS-селекторов.

      Консоль разработчика

      Традиционный способ, с помощью консоли разработчика любого браузера. Я пользуюсь Google Chrome, поэтому разберем пример на нем. Выбрав отслеживаемый элемент на странице, нажмите на него правой