Применение селекторов CSS_блог

Селекторы в 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. Например:
где селектор #form1 указывает на этот div.Селектор, который начинается с символа “.”, описывает элемент, содержащий соответствующий class. Например:
где селектор .form-container указывает на этот div.С помощью селектора div можно выбрать все элементы div на странице. А с помощью селектора “*” – вообще все элементы (<p>, <a>, <div>, <span> и т.д.)Селекторы можно комбинировать, записывая последовательно, без пробела. Например, конструкцию <div class=”form-container”> можно описать с помощью комбинированного селектора div.form-container, который позволяет выбрать все div на странице с классом form-container. Комбинированные селекторы позволяют более точно идентифицировать нужные вам элементы.Если по отношению к нескольким элементам с разными селекторами необходимо применить одно и то же действие, их селекторы можно записать последовательно через запятую.

Примеры

Рассмотрим примеры.

Пример 1

selektory-v-google-tag-manager1

Для того, чтобы отследить клик по кнопке “заказать”, нужно привязаться к какому-либо атрибуту данной кнопки. Но атрибутов, по которым эту кнопку можно однозначно идентифицировать, нет. Поэтому нам следует использовать селектор CSS:который посредством уникального идентификатора формы #gform_1 дает возможность однозначно определить нужную кнопку.Тогда триггер будет выглядеть следующим образом:

selektory-v-google-tag-manager2

Пример 2

Рассмотрим пример использования селекторов CSS в переменных.

selektory-v-google-tag-manager3

Для того, чтобы в случае обращения пользователя к вкладке “От чего зависит стоимость ремонта?”, передать это значение в Analytics, можно воспользоваться переменной типа “Элемент DOM”. В параметре “Метод выбора” нужно указать “Селектор CSS”.

selektory-v-google-tag-manager4

Селектор в данном случае будет выглядеть следующим образом:Здесь видно, что через элемент с id “question4” идет обращение к дочернему с классом “title”.Далее эту переменную можно передавать, например, как атрибут события при выполнении клика по необходимой вкладке.

selektory-v-google-tag-manager5

Пример 3

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

selektory-v-google-tag-manager6

Например, для карточек товаров, которые содержат значение артикула в теге <span> с классом “_product-code__sku”, данный артикул можно получить, создав переменную “Элемент DOM” и указав соответствующий селектор CSS в конфигурации переменной.

selektory-v-google-tag-manager7

Далее эту переменную можно передавать в качестве значения dynx_itemid при настройке тега динамического ремаркетинга.

selektory-v-google-tag-manager8

Отношения между элементами

Все элементы веб-страницы представляют собой иерархию. Одни теги могут включать в себя множество других тегов. Такая структура подразумевает различные уровни вложенности элементов (прямой потомок, непрямой потомок, правые соседи). С помощью селекторов CSS можно описывать отношения между элементами.Рассмотрим виды отношений.

selektory-v-google-tag-manager9

Отношение “Предок-потомки”На скриншоте видно, что самый первый 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 тут не обойтись.

10

В таком случае можно воспользоваться функциями библиотеки 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”.

selektory-v-google-tag-manager11

Отправной точкой поиска названия товара является объект, соответствующий кнопке “купить”. Объект $(‘.j-buy-button-add’) вернет множество всех кнопок на странице вместо одной, по которой произошел клик. Чтобы найти объект, соответствующий такой кнопке, нужно обратиться к конструкции вида:Далее с помощью функции .closest() находим ближайшего общего родителя для ссылки с названием товара и рассматриваемой кнопки “купить”. Это контейнер с классом catalogCard-info. Затем внутри последнего находим саму ссылку с названием, используя функцию .find(), принимающую селектор .catalogCard-title>a. С помощью функции .html() мы можем получить содержимое указанного элемента. Конечный вариант можно представить выражением:Далее эту переменную можно передавать, например, как атрибут события при выполнении клика по кнопке “купить”. Это поможет разделять товары, к которым относятся эти клики.

selektory-v-google-tag-manager12

Проверка корректности составленных селекторов CSS

Перед тем, как использовать селекторы в GTM, вы можете проверить корректность составленных конструкций в консоли браузера. Чтобы перейти в консоль, нужно выполнить действия:
  • отобразить панель инструментов для веб-разработчиков (через дополнительные инструменты браузера или нажатием клавиши F12);
  • кликнуть по вкладке Console. В ней можно прописывать команды на JavaScript.
Проверить корректность составленных селекторов CSS можно двумя способами:1. Через объект библиотеки jQuery.В консоли нужно прописать выражение вида:

selektory-v-google-tag-manager13

Рассмотрим пример.Допустим, на странице odesseo.com.ua нам необходимо найти все ссылки, которые ведут на внешние ресурсы. В таком случае можем применить выражение вида:Вызов объекта jQuery с применением функции .not() возвращает пять результатов. А именно, те ссылки, которые начинаются с протокола HTTP/HTTPS, но не содержат “odesseo.com.ua” в качестве подстроки.

selektory-v-google-tag-manager16

2. С помощью функции JavaScript querySelectorAll(), также принимающей в качестве аргумента селекторы CSS.В консоли нужно прописать выражение вида:

selektory-v-google-tag-manager15

Например, для описанной выше задачи функция document.querySelectorAll() будет иметь вид:

selektory-v-google-tag-manager17

Спасибо за внимание=)