Селекторы в GTM
Что такое селекторы CSS и как их применять в Google Tag Manager
В случае, когда необходимо настроить отслеживание клика по какому-либо элементу на веб-странице, а у этого элемента нет идентифицирующих его атрибутов, таких как, например, ID, class или URL, задачу отслеживания можно решить с помощью селекторов CSS. Также, используя селекторы CSS, можно получить дополнительную информацию, связанную с элементом, над которым произошло какое-либо событие или отследить клик по родительскому элементу, имеющему вложенную структуру. Селектор CSS — это описание элемента или группы элементов веб-страницы. Применять селекторы CSS в GTM можно для определения условий в триггерах, а также в пользовательских переменных типа “Элемент DOM” и “Собственный код JavaScript”. Для того, чтобы использовать селекторы CSS в триггерах, в настройках необходимо выбрать Click Element или Form Element.
Виды селекторов CSS
Рассмотрим основные виды селекторов CSS: p, div, span — селекторы, описывающие теги. Селектор, который начинается с символа “#”, описывает элемент, содержащий соответствующий атрибут id. Например:
<div id="form1">…</div>
где селектор #form1 указывает на этот div. Селектор, который начинается с символа “.”, описывает элемент, содержащий соответствующий class. Например:
<div class="form-container">…</div>
где селектор .form-container указывает на этот div. С помощью селектора div можно выбрать все элементы div на странице. А с помощью селектора “*” — вообще все элементы (<p>, <a>, <div>, <span> и т.д.) Селекторы можно комбинировать, записывая последовательно, без пробела. Например, конструкцию <div class=»form-container»> можно описать с помощью комбинированного селектора div.form-container, который позволяет выбрать все div на странице с классом form-container. Комбинированные селекторы позволяют более точно идентифицировать нужные вам элементы. Если по отношению к нескольким элементам с разными селекторами необходимо применить одно и то же действие, их селекторы можно записать последовательно через запятую.
Примеры
Рассмотрим примеры.
Пример 1
Для того, чтобы отследить клик по кнопке “заказать”, нужно привязаться к какому-либо атрибуту данной кнопки. Но атрибутов, по которым эту кнопку можно однозначно идентифицировать, нет. Поэтому нам следует использовать селектор CSS:
#gform_1 [type="submit"]
который посредством уникального идентификатора формы #gform_1 дает возможность однозначно определить нужную кнопку. Тогда триггер будет выглядеть следующим образом:
Пример 2
Рассмотрим пример использования селекторов CSS в переменных.
Для того, чтобы в случае обращения пользователя к вкладке “От чего зависит стоимость ремонта?”, передать это значение в Analytics, можно воспользоваться переменной типа “Элемент DOM”. В параметре “Метод выбора” нужно указать “Селектор CSS”.
Селектор в данном случае будет выглядеть следующим образом:
#question4 .title
Здесь видно, что через элемент с id “question4” идет обращение к дочернему с классом “title”. Далее эту переменную можно передавать, например, как атрибут события при выполнении клика по необходимой вкладке.
Пример 3
При настройке динамического ремаркетинга с использованием GTM, в ситуации, когда нет возможности вмешиваться в код сайта, в некоторых случаях также можно воспользоваться селекторами CSS. Для того, чтобы настроить динамический ремаркетинг, нам необходимо организовать передачу данных об ID товара с карточки товара. В то же время этот ID должен совпадать с идентификатором соответствующего товара в фиде.
Например, для карточек товаров, которые содержат значение артикула в теге <span> с классом “_product-code__sku”, данный артикул можно получить, создав переменную “Элемент DOM” и указав соответствующий селектор CSS в конфигурации переменной.
Далее эту переменную можно передавать в качестве значения dynx_itemid при настройке тега динамического ремаркетинга.
Отношения между элементами
Все элементы веб-страницы представляют собой иерархию. Одни теги могут включать в себя множество других тегов. Такая структура подразумевает различные уровни вложенности элементов (прямой потомок, непрямой потомок, правые соседи). С помощью селекторов CSS можно описывать отношения между элементами. Рассмотрим виды отношений.
Отношение “Предок-потомки” На скриншоте видно, что самый первый div является предком для всех содержащихся в нем тегов <p>. Чтобы описать данное отношение, нужно использовать селектор div p, который выделит абсолютно все теги <p>, находящиеся внутри родительского <div>. Символ пробела играет роль перехода на следующий уровень вложенности. Отношение “Предок — прямой потомок” В рассматриваемом примере теги <p> будут прямыми потомками относительно первого <div>, если они находятся непосредственно внутри <div>, т. е. на первом уровне вложенности. Данную связь можно описать следующим образом div > p. Отношение “Правые соседи” Соседними называются элементы, находящиеся на одном и том же уровне вложенности. С помощью селекторов можно рассмотреть всех последующих за определенным элементом соседей. На скриншоте видно, что для div с идентификатором first_div соседними будут элементы с идентификаторами second_div и third_div. В то же время для div с идентификатором second_div правым соседом будет только элемент third_div. Например, с помощью связи #first_div ~ div, мы указываем, что нужно найти элементы с идентификаторами second_div и third_div. Отношение “Первый правый сосед” Если нам нужно указать только на первого правого соседа, следует использовать конструкцию #first_div + div.
Селекторы на атрибут
С помощью этого вида селекторов можно обращаться к элементам с определенным атрибутом. Например, чтобы описать конструкцию
можно использовать селектор [name=”mail”]. Чтобы выбрать элементы, которые содержат атрибут name (не привязываясь к его значению), можно использовать селектор вида: input[name]. Чтобы выделить элемент, значение атрибута которого начинается с определенной подстроки, нужно использовать конструкцию вида: [attr^=”val”] — найдутся элементы с атрибутом attr, при этом значение этого атрибута должно начинаться с подстроки val. Чтобы выделить элемент, значение атрибута которого заканчивается определенной подстрокой, нужно использовать конструкцию вида: [attr$=”val”] — найдет элементы с атрибутом attr, при этом значение этого атрибута должно заканчиваться подстрокой val. Чтобы выделить элемент, значение атрибута которого содержит определенную подстроку, нужно использовать конструкцию вида: [attr*=”val”] — найдет элементы с атрибутом attr, при этом значение этого атрибута должно содержать подстроку val.
Псевдоклассы
Псевдокласс — тип селекторов, идентифицирующих элементы по определенным признакам. Например, чтобы указать на выбранный пункт из выпадающего списка
нужно прописать селектор вида: .dropdown option:selected. Псевдоклассы всегда начинаются с символа “:”. К псевдоклассам можно отнести следующие признаки:
- :empty — без потомков;
- :checked, :selected, :disabled, :enabled — различные состояния элементов input;
- :hover — элемент, находящийся под курсором мыши;
- :visited — уже посещенные ссылки;
- :not(<селектор>) — все элементы, кроме тех, которых соответствуют указанному в скобках селектору.
Использование функций jQuery для поиска элементов
При настройке некоторых событий в GTM может возникнуть ситуация, когда необходимо получить дополнительную информацию, связанную с элементом, над которым произошло данное событие. Например, при нажатии на кнопку “купить”, нужно получить название товара, к которому эта кнопка относится. Часто бывает так, что дополнительные данные находятся в структуре других элементов, которые логически связаны с рассматриваемым элементом, но доступ к ним нельзя получить через селекторы CSS. При работе, например, с интернет-магазинами может возникнуть задача передавать событие клика по кнопке “купить” с привязкой к тому товару, которому соответствует эта кнопка. Например, при клике на кнопку “купить” (1), которая заключена в теги <a></a> с классом j-buy-button-add (3), нужно получить название соответствующего товара. Как мы видим, непосредственно в теге кнопки нет описания товара. Но нужное нам описание есть в ссылке контейнера div с классом catalogCard-title (2). Тег с нужным названием и кнопка “купить” находятся на разных уровнях иерархии, поэтому только селекторами CSS тут не обойтись.
В таком случае можно воспользоваться функциями библиотеки jQuery. jQuery — библиотека JavaScript, которая помогает получать доступ к любому элементу на странице, обращаться к их содержимому и атрибутам, манипулировать ими. jQuery фокусируется на взаимодействии JavaScript и HTML, поэтому обращаться к элементам через jQuery можно с помощью селекторов CSS. Чтобы использовать данную библиотеку, нужно убедиться, что она подключена на сайте. Рассмотрим основные функции поиска элементов.
- .closest(selector) — возвращает первый соответствующий указанному селектору элемент, являющийся родителем для рассматриваемого элемента;
- .parents(selector) — возвращает всех предков (соответствующих необязательному параметру selector) относительно заданного элемента;
- .find(selector) — возвращает дочерние элементы, соответствующие указанному селектору внутри выбранного элемента;
- .siblings([selector]) — возвращает все элементы (соответствующие необязательному параметру selector), являющиеся соседями для выбранных элементов.
Рассмотрим функции фильтрации набора элементов:
- .first() — возвращает первый элемент в наборе;
- .last() — возвращает последний элемент в наборе;
- .not(selector) — исключает из набора те элементы, которые соответствуют указанному селектору.
Чтобы обратиться к определенному элементу через селекторы CSS, следует создать объект jQuery, принимающий данный селектор. Например, конструкция вида $(‘.my-class’) будет отвечать за поиск всех элементов с классом my-class. Вызов функций jQuery относительно выбранного элемента осуществляется следующим образом: $(‘.my-class’).siblings(‘div’) — эта конструкция вернет все соседние контейнеры div по отношению к элементу с классом my-class. Вернемся к нашему примеру. Создаем переменную типа “Собственный код JavaScript”.
Отправной точкой поиска названия товара является объект, соответствующий кнопке “купить”. Объект $(‘.j-buy-button-add’) вернет множество всех кнопок на странице вместо одной, по которой произошел клик. Чтобы найти объект, соответствующий такой кнопке, нужно обратиться к конструкции вида:
$(window.event.target)
Далее с помощью функции .closest() находим ближайшего общего родителя для ссылки с названием товара и рассматриваемой кнопки “купить”. Это контейнер с классом catalogCard-info. Затем внутри последнего находим саму ссылку с названием, используя функцию .find(), принимающую селектор .catalogCard-title>a. С помощью функции .html() мы можем получить содержимое указанного элемента. Конечный вариант можно представить выражением:
$(window.event.target).closest('.catalogCard-info').find('.catalogCard-title>a').html();
Далее эту переменную можно передавать, например, как атрибут события при выполнении клика по кнопке “купить”. Это поможет разделять товары, к которым относятся эти клики.
Проверка корректности составленных селекторов CSS
Перед тем, как использовать селекторы в GTM, вы можете проверить корректность составленных конструкций в консоли браузера. Чтобы перейти в консоль, нужно выполнить действия:
- отобразить панель инструментов для веб-разработчиков (через дополнительные инструменты браузера или нажатием клавиши F12);
- кликнуть по вкладке Console. В ней можно прописывать команды на JavaScript.
Проверить корректность составленных селекторов CSS можно двумя способами: 1. Через объект библиотеки jQuery. В консоли нужно прописать выражение вида:
Рассмотрим пример. Допустим, на странице odesseo.com.ua нам необходимо найти все ссылки, которые ведут на внешние ресурсы. В таком случае можем применить выражение вида:
$('a[href^="http"]').not('[href*="odesseo.com.ua"]')
Вызов объекта jQuery с применением функции .not() возвращает пять результатов. А именно, те ссылки, которые начинаются с протокола HTTP/HTTPS, но не содержат “odesseo.com.ua” в качестве подстроки.
2. С помощью функции JavaScript querySelectorAll(), также принимающей в качестве аргумента селекторы CSS. В консоли нужно прописать выражение вида:
Например, для описанной выше задачи функция document.querySelectorAll() будет иметь вид:
document.querySelectorAll('a[href^="http"]:not([href*="odesseo.com.ua"])')
Спасибо за внимание=)
Сделали анализ ошбики и выявили что она возникает в результате работы скрипка Тег менеджера
https://prntscr.com/naw92f
Возможно скрипт не правильно сформирован?
Заметил всплывающие сообщения после оформления заказа или покупки в 1 клик
http://joxi.ru/E2pb7weu74L0dr
Как избавиться от alert
Добрый день, Игорь.
Вы оставили комментарий к статье по селекторам. В данной статье нет примеров скриптов, содержащих указанные вами фрагменты.
Подскажите, о каком конкретно скрипте идёт речь?
dynx_itemid настроил как в примере через GTM, при тесте то показывает http://prntscr.com/h4samu то нет http://prntscr.com/h4sbx9 …. Связываю это с DOM Ready, допускаю, что могу напрямую отправить в Adwords при активации тега по DOM Ready http://prntscr.com/h4sgwz , но как в таком случае корректно передать в параметр Аналитикса?
Добрый день.
Показывает числовое значение или «null» для одной страницы? Или это для разных страниц?
ДД. Для разных однотипных страниц.
Возможно, все же описание элементов на этих страницах отличается. Мне сложно сказать что-то конкретное, не видя кода. Покажите сайт, если есть возможность.
Код http://prntscr.com/h9u5e0 и сама переменная http://prntscr.com/h9u65r
Собственно при предварительном просмотре данные передаются — http://prntscr.com/h9u6w2 но в опубликованном теге их нет (не передается с пользовательскими переменными значениz, а отправляет null)
В какой момент срабатывает тег?
Просмотр страницы — https://prnt.sc/h4samu (это при тесте)
Огромное спасибо за статью!
Удалось затрекать, казалось бы, неуловимые элементы))
Приятно слышать!=)
Спасибо, Настя. Вы просто молодец!) А с формами на аяксе точно так же через селекторы работать? Как вы с ними работаете?
Саша, спасибо огромное за приятные слова=)
Про формы на аяксе я писала в этой статье http://odesseo.com.ua/uchimsya-rabotat-v-gtm-v2/
Анастасия, спасибо за статью. Можете ли подсказать, как использовать CSS селекторы в GTM на сайте с Shadow DOM? Может у вас был такой опыт.
Егор, спасибо! К сожалению, не сталкивалась, не знаю, какие там особенности.
Спасибо за ответ. На случай если столкнетесь, стандартные методы там не работают. Примерно та же проблема описана здесь https://stackoverflow .com/questions/24627076/using-queryselector-to-find-nested-elements-inside-a-polymer-template-returns-nu. К сожалению, довести это до работающего решения пока не удалось, но мы в процессе, будем копать дальше.
Спасибо. Буду иметь ввиду.
спасибо, пригодится!
Я рада=)
https://uploads.disquscdn.com/images/fa95699b9746964bf83c26d11f235478c7e728bde66c8a124ae71e618e910839.jpg
Супер!