CSS-селекторы в Google Tag Manager

Любой специалист, работающий с трафиком, знает, как важно отслеживать целевые действия на сайте, тем самым измеряя эффективность данного трафика. Чаще всего такими действиями являются транзакции или заполнение форм, но также бывает необходимость задавать как цели и отслеживать, к примеру, клики по иконкам чата или каким-то элементам сайта.

Но иногда у данных элементов нет какого-то четкого признака, по которому можно задать триггер отработки события в Google Tag Manager, вот тогда-то и приходят на помощь знания CSS-селекторов. Кроме того, они могут помочь в отслеживании форм. В данной статье мы рассмотрим наиболее полезные для работы PPC специалиста CSS-селекторы.

CSS-селекторы

Как таковые, селекторы были задуманы для того, чтобы определять, к какому элементу на странице применять нужные стили, однако они также дают возможность задать триггер, который будет активировать определенный тег в Google Tag Manager.

Чтобы задать такой триггер, например, для отслеживания кликов по элементу, нужно создать новый триггер в Google Tag Manager, в нем выбрать тип триггера (в данном случае «Клик – Все элементы»), задать условие активации «Некоторые клики», выбрать из выпадающего списка «Click Element» (также, при необходимости, можно использовать «Form Element») и опцию «соответствует селектору CSS», после чего задать в поле CSS-селектор.

Впоследствии данный триггер можно добавлять в качестве активатора тегов в Google Tag Manager.

О том, какие селекторы можно применять, мы и поговорим дальше.

1. tag  — селектор по тегу HTML. В примере ниже селектор ul укажет на соответствующий тег ul.

2. .class — cелектор по классу. В примере ниже при использовании селектора .selected-class будут выбраны второй и третий элементы.

3. #id — селектор по идентификатору элемента. Стоит отметить, что идентификаторы должны быть уникальны на странице и не могут повторяться для других элементов. В нашем примере использование селектора #third выберет только третий элемент списка.

4. element[attr] – селектор по атрибуту элемента, который выберет все элементы, имеющие его. Данная группа селекторов помогает выбрать элементы с заданными свойствами или значениями. В примере ниже селектор a[target] укажет на ссылки с текстом Two и Four.

Также селектор по атрибуту может принимать конкретные значения, среди наиболее часто встречающихся:

element[attr=value] – селектор, значение атрибута которого равно заданному value. В нашем примере таким может быть a[href=»http://supersite.ua»], который укажет на ссылку с текстом One.

element[attr^=value]– селектор, значение атрибута которого начинается с обозначенного value. В нашем примере таким может быть a[href^=»https»] – выберет ссылку c текстом Four.

element[attr$=value]– селектор, значение атрибута которого заканчивается на обозначенное value. В примере выше таким может быть a[href$=»ua»] – выберет ссылки с текстом One и Four.

Комбинаторы

Кроме базовых селекторов, которые мы рассмотрели выше, также можно использовать комбинации селекторов, которые могут дать больше гибкости и возможностей в выборе необходимого элемента на странице. Рассмотрим примеры их использования:

1. element1, element2 – выберет оба обозначенных элемента, таким образом, можно выбрать сразу несколько элементов на странице. При использовании селектора img, a будут выбраны первый и последний теги из примера ниже:

2. element1 element2 – селектор, содержащий элементы, записанные через пробел, выберет все element2, которые находятся внутри element1 вне зависимости от уровня вложенности. Так, в примере ниже при использовании селектора div a будут выбраны теги  <a> с текстом Two и Three.

3. element1 > element2 – отличие от предыдущего заключается в том, что element2 должен являться непосредственным потомком element1 (находиться на первом уровне вложенности внутри element1). На примере из прошлого пункта: селектор div > a укажет только на ссылку с текстом Three, поскольку ссылка с текстом Two не является прямым потомком тега <div>.

4. element1 + element2 – выберет element2 в случае, когда он находится сразу после element1 на одном уровне вложенности, т.е. оба элемента имеют один родительский элемент. Например, при использовании селектора #first-item + li будет выбран элемент списка с текстом Two.

5. element1 ~ element2 – селектор для выбора всех элементов, которые соответствуют селектору element2 и при этом находятся на одном уровне вложенности с элементом, который имеет селектор element1. В примере из прошлого пункта использование селектора #first-item ~ li укажет на элементы списка с текстом Two и Three.

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

В CSS есть такое понятие, как псевдоклассы, которые позволяют выбирать и манипулировать элементами на странице, даже если они не имеют отдельных отличительных признаков. Рассмотрим на примерах, какие из псевдоклассов могут быть полезны в работе с Google Tag Manager.

За основу возьмем знакомый уже список:

1. element:first-child —  позволяет выбрать элемент, который находится первым в родительском элементе. В примере выше селектор li:first-child укажет на элемент с текстом One.

2. element:last-child —  помогает выбрать элемент, который находится последним в родительском элементе. В нашем примере селектор li:last-child укажет на элемент с текстом Four.

3. element:nth-child() — дает возможность довольно гибко выбирать элементы, которые находятся в одном родительском элементе. Например, в нашем случае селектор li:nth-child(2n+1) укажет на все нечетные элементы li, таким образом будут выбраны элементы списка с текстом One и Three. Четные элементы описываются конструкцией li:nth-child(2n).Также можно применить li: nth-child(2), в таком случае будет выбран только второй элемент списка с текстом Two.

4. element:not() – может быть достаточно полезным в некоторых случаях. В скобках принимает простой селектор. Результатом применения будет являться выбор элементов, которые не содержат в себе селектор, обозначенный в скобках. В примере ниже при использовании селектора li:not(.noSelect) будут выбраны все элементы списка, кроме третьего, который имеет класс noSelect.

Таким образом, мы рассмотрели основные селекторы, которые могут быть полезны при отслеживании целевых действий на сайте с помощью Google Tag Manager, что может существенно облегчить настройку тегов отслеживания.