Яков Осипенков
Google Tag Manager для googлят: Руководство по управлению тегами
Элемент
Если необходимо выбрать все определенные элементы на страницы, используйте конструкцию «элемент».
Рис. 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)», поскольку они предлагают способ проверки условий, подобно тому, как это делают регулярные выражения. Подробно о регулярных выражениях и примерах их использования написано в моей другой книге «Google Analytics для googлят: Практическое руководство по веб-аналитике (2018)».
Селекторы типа регулярных выражений:
● [атрибут|=”значение”] – выбирает все элементы с атрибутом “атрибут”, имеющие значение в точности равное “значение” или начинающееся с “значение-“ (обратите внимание, что символ | – это не ошибка, он нужен для работы с языковой кодировкой.)
Значение может быть единственным словом в атрибуте, например, lang="ru" или с добавлением других слов через дефис, например, lang="ru-region".
На примере ниже для “lang|=ru” задается стиль (color:green). Результатом будет измененный цвет текста у атрибута “ru” Привет! и “ru-region” Здравствуйте. (выделено зеленым), поскольку [атрибут|=”значение”] подразумевает «точное» значение или же «начинающееся с».
Рис. 51. Пример использования [атрибут|=”значение”]
Далее идут три css-селектора, которые используют регулярные выражения и в их конструкции присутствуют специальные символы, такие же, как в Google Analytics при фильтрации или поиске. Это ^, $ и *.
● [атрибут^=”значение”] – выбирает каждый элемент с атрибутом “атрибут”, значение которого начинается с “значение”.
Пример a[href^="https"] – выбирает каждый элемент <a> с атрибутом href, значение которого начинается с "https".
● [атрибут$=”значение”] – выбирает все элементы с атрибутом “атрибут”, значение которого заканчивается на “значение”.
Рис. 52. Пример использования [атрибут$=”значение”]
На примере выше для элемента div и класса с атрибутом, значение которого заканчивается на “test”, применяется стиль {color:red}; (задается красный цвет). Таким образом два элемента из четырех на странице будут отображены шрифтом красного цвета. Это div class =”1_test” (Первый элемент div.) и div class =”test” (Третий элемент div.). Последний тоже имеет class = “test” (Абзац с текстом), однако он входит в элемент <p>, а не div, и поэтому не будет выделен красным цветом.
Или еще один пример a[href$=".pdf"]. В этом случае вы можете отслеживать каждый элемент тега <a> с атрибутом “href”, значение которого оканчивается на ".pdf". В Google Tag Manager с помощью данного атрибута можно отслеживать скачивание файлов на сайте, клики по определенным картинкам формата “.png”, “.jpg”, “.gif” и т.д.
● [атрибут*=”значение”] – выбирает все элементы с атрибутом “атрибут”, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) "значение".
Проиллюстрируем это на следующем примере:
Рис. 53. Пример использования [атрибут*=”значение”]
В стиле для элемента div и класса с атрибутом, значение которого “test”, применяется стиль {color:blue}; (задается синий цвет). Таким образом будут выбраны первые три элемента вне зависимости от того, «точное» ли было вхождение условия class*=”test” или нет, «начиналось с» или «заканчивалось на». Сам факт наличия значения “test” во всех трех элементах div селектора подстроки в значении атрибута позволяет нам выбрать все эти элементы. Последний вариант (Абзац с текстом) тоже имеет значение “test”, однако он не входит в элемент div, а является составляющей тега <p>, поэтому он не будет выделен синим цветом.
Псевдоклассы
Псевдоклассы – это дополнения к обычным селекторам, которые делают их еще точнее и мощнее. Они определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши. Это реализуется с помощью псевдокласса :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, поэтому разберем пример на нем. Выбрав отслеживаемый элемент на странице, нажмите на него правой кнопкой мыши и «Просмотреть код».
Рис. 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 в мире.
В природе существуют и другие JS-библиотеки, фреймворки и инструменты, например, React, AngularJS, Backbone.js, Ember.js и т.д. Но в свое время именно jQuery произвела революцию в программировании клиентской части веб-приложений, введя селекторы CSS для доступа к узлам DOM-дерева, обработчики событий, анимации и AJAX-запросы.
JavaScript является фундаментальным языком и для того, чтобы создать всплывающее окно или выпадающий список, разработчику потребуется написать большое количество строк кода. В jQuery это уже все реализовано, достаточно всего лишь использовать готовую функцию.
Библиотека jQuery на сайте по умолчанию отсутствует. Для ее подключения необходимо скачать актуальную версию с официального сайта jquery.com/download, загрузить ее на сервер, а затем подключить с помощью фрагмента кода:
Рис. 65. Подключение библиотеки jQuery через путь к файлу (версия 3.3.1)
Существует альтернативный способ подключить jQuery на страницы вашего сайта (не закачивая библиотеку на сервер). Можно подключить библиотеку, которая находится не на вашем сервере, а на серверах CDN. Существуют несколько таких хранилищ, наиболее известные и надежные из них Google CDN, Microsoft CDN, а также CDN, который организовали создатели jQuery.
Рис. 66. Подключение библиотеки jQuery через CDN
Можно подключить jQuery и через GTM. Для этого необходимо создать пользовательский HTML-тег и добавить туда фрагмент кода выше, а в качестве триггера активации выбрать «All Pages» (Все страницы).
Селекторы в jQuery базируются на CSS селекторах (см. выше), они также используются для определения элемента или группы элементов.
Все селекторы в jQuery начинаются со знака доллара и круглых скобок $ (), например, $('div'). В этом случае будет осуществлен поиск всех элементов div на странице, $('.className') найдет все элементы с классом className, $('#sidebar') найдет все элементы на странице с идентификатором sidebar и т.д.
Примечание: при использовании метасимволов (#;&,.+*~':"!^$[]()=>|/) в значении любого идентификатора, класса или названия атрибута, необходимо экранировать эти символы в селекторах с помощью двух обратных слэшей \\
Рис. 67. Экранирование специальных символов с помощью \\
В процессе работы с Google Tag Manager jQuery позволяет удобнее решать множество задач. Задачи можно разделить на два типа:
1. взять элемент, который у нас находится на сайте, например, значение цены, название продукта, категорию продукта и т.д.;
2. отследить факт того, что у нас произошел клик по какому-либо элементу, зафиксировано событие или пользователь заполнил и отправил форму на сайте.
При настройке некоторых событий в GTM иногда возникают ситуации, когда необходимо получить дополнительную информацию, связанную с элементом, над которым произошло событие. Но эту информацию так просто нельзя получить через CSS-селекторы, поскольку она может находится в структуре других элементов, которые логически связаны с рассматриваемым элементом. В это случае можно воспользоваться функциями библиотеки jQuery.
Давайте разберем на нескольких примерах работу библиотеки jQuery с набором элементов. Для этого я перейду на свой сайт osipenkov.ru и вызову консоль разработчика, а затем перейду на вкладку Console.
С помощью $("div").css("border", "1px solid red"); выберем все элементы div на странице и обведем их в красную рамку в 1 пиксель.
Рис. 68. Все div на странице обведены в красную рамку шириной в 1 пиксель
Примечание: мой блог работает на WordPress. В нем стандартный способ обращения к элементам через $ () отключен (в конце файла …/wp-includes/js/jquery/jquery.js прописана строчка jQuery.noConflict();, которая отключает работу с элементами страницы через $.), так как другие библиотеки также могут использовать данный механизм обращения к элементам. Поэтому вместо знака доллара я использовал альтернативную конструкцию jQuery (). Для изменения способа обращения на привычный $ необходимо изменить фрагмент кода. Решение проблемы ищите в интернете с пометкой «jQuery не работает в WordPress».
Теперь давайте поработаем с формами. Перейдем на страницу Контакты https://osipenkov.ru/contacts/ где есть форма обратной связи.
Добавим в консоль такую строчку:
$("form input").css("border", "1px solid blue");
Данная конструкция добавит рамку всем input-ам, которые являются потомками элемента form. Это пример так называемого «parent child», когда выбираются все элементы input, являющиеся узлами-потомками для родительского элемента form.
Рис. 69. Все div на странице обведены в красную рамку шириной в 1 пиксель
В качестве еще одного простого примера разберем вывод значения заполненного поля «Имя» с name=”your-name”.
Рис. 70. Поле «Имя» с name=”your-name”
В консоли разработчика вводим такую конструкцию:
$('[name="your-name"]').val()
Метод .val() позволяет получать и изменять значения элементов форм. Для элементов input это значение атрибута “name”, то есть в нашем случае “your-name”.
Получим результат Yakov Osipenkov.
Рис. 71. Результат $('[name="your-name"]').val()
Разобранные выше примеры являются самыми простыми в освоении. При работе с Google Tag Manager вы будете использовать гораздо более сложные конструкции с различной цепочкой методов и другим набором элементов. Приведу пример некоторых функций jQuery перемещения по дереву DOM:
Рис. 72. Список функций jQuery перемещения по дереву DOM
Функции фильтрации набора элементов:
Рис. 73. Функции фильтрации набора элементов
Также, как и с CSS-селекторами, рекомендую перейти на сайт w3schools.com и изучить два материала для лучшего понимания темы селекторов jQuery:
Селекторы jQuery: w3schools.com/jQuery/jquery_selectors.asp
Демонстрация селекторов jQuery: w3schools.com/jQuery/trysel.asp
На сайте jquery-docs.ru есть перевод официальной документации API jQuery на русский язык.
После того, как вы познакомитесь с CSS-селекторами и уделите им достаточное количество времени на изучение, вы сможете выбрать любой элемент для отслеживания в Google Tag Manager на вашем сайте, даже если у него нет никаких отличительных знаков, а также по достоинству оцените всю мощь и функциональность диспетчера тегов Google.
Данная статья написана с использованием следующих ресурсов – habr.com, puzzleweb.ru, jquery.page2page.ru, odesseo.com.ua, jquery-docs.ru, learn.javascript.ru, htmlbook.ru и developer.mozilla.org.