Веб-аналитика 6 Minute

Применение селекторов CSS в Google Tag Manager

Анастасия Тимошенко

24.01.2017

20 комментариев

Селекторы в 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.

Псевдоклассы

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

option 1
option 2

нужно прописать селектор вида: .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"])')

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