Сейчас в сети: 673
Сейчас в сети: 673
Учитесь работать в Google Analytics вместе с нами!
star_border

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

Продолжаю тему, начало которой положил Андрей Москалец в статье "Использование селекторов 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. Например:

<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

selektory-v-google-tag-manager1

 

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

 

#gform_1 [type="submit"]

 

который посредством уникального идентификатора формы #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

 

$(window.event.target)

 

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

$(window.event.target).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() будет иметь вид:

 document.querySelectorAll('a[href^="http"]:not([href*="odesseo.com.ua"])')

 

selektory-v-google-tag-manager17

 

 

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

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

Меня зовут Анастасия. Занимаюсь интернет-рекламой и веб-аналитикой в компании OdesSeo. Сертифицированный специалист по Google AdWords и Google Analytics. Всегда рада поделиться опытом и узнать что-то новое=)

Комментарии
Максим А
марта 2017

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

Анатолий О
апреля 2017

Здравствуйте, у меня такие вопросы, давно уже мучают

1) "отследить клик по родительскому элементу, имеющему вложенную структуру." - речь идет о выпадающем меню?

2) Можем ли мы отследить на какой раздел из выпадающего меню нажал пользователь?

a_timo_ Ведущий участник
апреля 2017

@Максим А, добрый день!

 

Нужно создать тег типа "Ремаркетинг AdWords" и в пользовательских параметрах добавить созданную переменную в качестве значения для dynx_itemid http://prntscr.com/etk3hj

a_timo_ Ведущий участник
апреля 2017

@Анатолий О, здравствуйте!

 

1) В данном случае нет. Речь идет о структуре тегов, которые отображаются на странице как один элемент, поэтому в таком случае сложнее определить, по какому из тегов был клик, если по факту он произошел по общему элементу.
2) Можем. Для этого вам нужно описать выпадающие пункты меню через селекторы css и привязываться либо к содержимому, либо к каким-либо атрибутам элемента.

Анатолий О
апреля 2017

@a_timo_, можете показать на примере скриншотами?

a_timo_ Ведущий участник
апреля 2017

@Анатолий О, для этого мне нужно видеть Ваш сайт. 

Анатолий О
апреля 2017

@a_timo_, retrodiscoteka.ru

a_timo_ Ведущий участник
апреля 2017

@Анатолий О, отследить все клики по разделам из выпадающего меню можно с использованием селектора ".root-item a" http://prntscr.com/evz7x5 , а в параметрах события можно попробовать передать Click URL для идентификации ссылки, по которой был клик.

Святослав К
Сентябрь

Не получается привязть клик по имени селектора href 

Такой тригер https://prnt.sc/gftu6v селектор: [href^="#primeri"] ,

сайт http://shop.dom.by/ клик на кнопку "примеры заказов" на первом экране.

в чем может быть ошибка?

a_timo_ Ведущий участник
Сентябрь - последнее изменение Сентябрь

@Святослав К, попробуйте учитывать вложенную структуру Вашей ссылки с помощью такой конструкции: [href^="#primeri"] *