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

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

Рис. 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, поэтому разберем пример на нем. Выбрав отслеживаемый элемент на странице, нажмите на него правой кнопкой мыши и «Просмотреть код».

Рис. 57. Правой кнопкой мыши – Просмотреть код

После того, как мы удостоверились, что выбрали нужный элемент, в открывшемся коде страницы еще раз нажимаем правой кнопкой мыши по нужному элементу. Далее «Copy» – «Copy selector».

Рис. 58. Правой кнопкой мыши – Copy – Copy selector

В буфер обмена у вас скопировался селектор. Можно вставить его в любой текстовый документ и посмотреть, как он будет выглядеть. В моем примере он выглядит так: #home > div > div > div > div > div > a.button.hp-button-1.slide-button.w-button.green.fancybox

Получилась очень длинная цепочка взаимосвязей элементов друг с другом. Несмотря на это его можно использовать в Google Tag Manager для настройки отслеживания события. Однако тот же селектор можно записать и в таком виде: a.button.hp-button-1.slide-button.w-button.green.fancybox, просто убрав общую часть в начале.

CSS Selector Tester

Чтобы проверить правильность выбора определенного элемента для настройки триггера и его отладки в GTM, можно воспользоваться специальным расширением для браузера Google Chrome, которое называется CSS Selector Tester. Скачать его можно по ссылке.

Рис. 59. Расширение для браузера CSS Selector Tester

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

Рис. 60. Иконка CSS Selector Tester

У вас откроется дополнительное окно со строкой ввода селектора. Просто вставьте ваш селектор, и он подсветится на странице. В качестве примера я добавлю a.button.hp-button-1.slide-button.w-button.green.fancybox – укороченную версию селектора, который мы определили с помощью консоли разработчика.

Рис. 61. Поиск селектора на странице

CSS Selector Tester нашел такой элемент на странице и выделил его границы красной пунктирной линией. Вот так он выделил все элементы div на странице:

Рис. 62. Элементы div на странице

Если бы мы ввели неверный селектор, то сообщение было бы «undefined» (не определено) и элемент не был бы найден на странице.

SelectorGadget

Для тех, кто не хочет лазать в консоль разработчика, инспектировать там элементы страницы и копировать конечный вариант селектора, может воспользоваться еще одним расширениям для браузера Google Chrome «SelectorGadget».

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

Рис. 63. Пример работы расширения SelectorGadget

Скачать расширение SelectorGadget можно по ссылке. После установки в правом верхнем углу у вас должен отобразиться новый значок.

Рис. 64. Иконка SelectorGadget

Селекторы в jQuery

Как мы узнали раннее, jQuery – это библиотека JavaScript, которая фокусируется на взаимодействии JavaScript, HTML, CSS и служит для облегчения работы разработчика. На данный момент она является самой распространенной библиотекой JS в мире.