Как выжить без программистов или как использовать селекторы CSS в Google Tag Manager

css selector google tag manager

Очень часто при настройке аналитики для сайта нужно отслеживать клики по определенным элементам на сайте. В таких случаях очень круто, когда у этого элемента есть id или class, как вот в этих примерах:

элемент с идентификатором

или

элемент HTML с прописанным классом

Всё, что остается сделать в таком случае, — это активировать в GTM встроенные переменные Click Classes и Click ID и на их основании настроить триггер.

Встроенные переменные в Google Tag Manager

Например, такой:

Тригер в гугл тэг менеджер на элемент с классом

А что же делать, когда у нужного нам элемента нет ни id, ни class? Например, как в этом коде:

Элемент HTML без классов и идентификаторов

В таком случае, конечно, можно подёргать программистов, которые пропишут onclick для передачи пользовательских событий. Например, так:

onclick для html элементов

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

Что такое эти селекторы CSS?

Cелектор CSS — это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля.

Честно говоря, с такого описания мне, да и думаю вам, не особо понятно что это такое и как оно нам поможет в настройке аналитики. Поэтому скажу по-другому:

CSS селектор - это элемент, к которому мы собираемся применить определенные свойства CSS. Мы конечно никакие свойства применять не будем, для нас более важно то, что мы можем найти любой элемент на странице и обратится к нему.

Какие селекторы существуют?

  • .someClass — соответствует любому элементу с классом “someClass”.
  • #someid — соответствует элементу с идентификатором “someid”.

На текущем этапе вы можете задать вполне логичный вопрос: “Зачем мне изучать селекторы CSS, если я могу воспользоваться встроенными в GTM переменными о которых говорилось выше?”

Зачем платить больше

Но разница все таки есть. Если класс нужного элемента не повторяется на странице, то рекомендуется использовать именно встроенные переменные. Если один и тот же класс используется в нескольких элементах на странице, тогда используем селекторы CSS. В последнем случае иногда возможно и использование триггеров подобных этому:

image6

Но лучше всё-таки так не делать и использовать селекторы CSS.

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

  • element — будет соответствовать любому элементу HTML с именем “element”.  Например, селектор “div” будет соответствовать всем элементам “div” на странице.
  • element element — соответствует любому HTML-элементу, являющемуся потомком предыдущего элемента. В повседневной практике используется чаще всего. Не обязательно должен иметь отношение родитель-потомок — первый элемент просто должен предшествовать второму. Например: “span.someClass div #someId” будет соответствовать любому “div#someId”, являющемуся потомком “span.someClass”.
  • element>element — этот селектор позволяет обратится к элементу, который является прямым потомком предыдущего элемента. Например, “div #someId>a #home” будет соответствовать тому, <a id="home">, что является прямым потомком <div id="someId">.
  • element+element — селектор выделяет последующий элемент. Например, “div #someId+a #home” будет выбирать только элемент “a #home”, который идет сразу после элемента “div #someId”.
  • element~element — этот CSS-селектор очень похож на предыдущий, но он менее строгий. Например,  при использовании селектора “div #someId~a #home” будут выбраны все элементы “a #home”, идущие за “div #someId”.
  • element[attribute] — такой CSS-селектор позволяет обратиться к элементу, у которого есть определенный атрибут. Например, “a[title]” позволит активировать тригер при нажатии на ссылки у которых прописан атрибут “title”.
  • element[attribute="value"] — селектор такого вида позволяет обратиться к элементу с определенным значением атрибута. Например, “a[href="https://sotnik.biz.ua"]” позволит активировать триггер при нажатии на все ссылки которые ссылаются на "https://sotnik.biz.ua"

Как использовать несколько CSS-селекторов в одном триггере GTM?

Бывает так, что нужно настроить триггер, который срабатывает при взаимодействии с несколькими элементами на странице. Если в таком триггере необходимо использовать условие “ИЛИ”, нужно записать нужные селекторы через запятую. Например, на нашей странице услуг есть иконки с расширением .jpg и .png:

услуги по настройке google adwords

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

несколько CSS-селекторов в одном триггере GTM

Триггер активируется когда пользователь кликнет на картинку с расширением .jpg ИЛИ png.

Регулярные выражения в селекторах CSS

В примере выше, вы наверное заметили знак $, который является частью регулярного выражения. Он не единственный используется в CSS-селекторах, есть и другие, мы разберем только те, которые могут понадобиться при работе с Google Tag Manager:

  • * — позволяет обратится к любому элементу на странице. Используется особенно часто в атрибутах, где обозначает следующее: искомое значение должно появляться где-нибудь в атрибуте. Например, “a[href * = "sotnik.biz.ua"]” cоответствует любому элементу ссылки, чей href-атрибут содержит "sotnik.biz.ua".
  • ^ — символ используется для обозначения начала строки. Например, селектор “a [href ^ = "tel:"]” позволит активировать триггер при нажатии на все ссылки которые начинаются на "tel:", другими словами, позволит отследить все нажатия на телефонные номера на сайте.
  • $ — символ, противоположный предыдущему. Используется для обозначения окончания строки. Мы использовали его в примере выше, чтобы обозначить элементы атрибут src которых заканчивается на jpg или png.

Используем псевдоклассы CSS-селекторов

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

  • :checked — используется, если элемент отмечен (переключателем или флажком).
  • :nth-child(n) — позволяет отследить определенный элемент списка. Например “ul > li:nth-child(3)” позволяет отследить третий элемент.
  • :nth-last-child(n) — псевдокласс, противоположный предыдущему, который также позволяет отследить определенный элемент списка, но элементы начинает считать с конца. Например, селектор CSS “:nth-last-child(2)” вернет предпоследний элемент списка.
  • :not(selector) — псевдокласс отрицания. Например, селектор “div:not(.someClass)” позволяет выбрать все “div”, за исключением тех, которые имеет “class=someClass”.

Как быстро определить CSS-селектор элемента

Все правила и селекторы, описанные выше, при правильных комбинациях позволяют писать селекторы, которые помогут в 99,9% случаев, но из-за большого разнообразия селекторов - особенно на начальных этапах - рекомендую всё же не пытаться сложить частички пазла самостоятельно, чтобы не получилось вот так:

ошибки при настройке

На начальном этапе, да и в дальнейшем во многих случаях, намного проще узнать CSS селектор с помощью просмотра кода в Google Chrome. Кликните на нужном элементе правой кнопкой мыши и выберите пункт “Просмотреть код”:

просмотреть код элемента

После этого кликните на коде нужного элемента правой клавишей и выберите пункт “Copy > Copy selector”. Чтобы понимать на правильной ли части кода вы кликнули, нужно посмотреть на нужный элемент в окне слева. Текущий элемент будет подсвечен, как на скриншоте ниже:

выбор css селектора с помощью google chrome

В итоге вы получите строку примерно следующего вида:

“body > div.header > div > div > div.header__navbar > div > div.navbar__act > div.navbar__lang > div > div > div.dropdown__expand > div > ul > li:nth-child(3) > a”.

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

И так сойдет

Как проверить к какому элементу обращается CSS-селектор

Чтобы проверить, правильно ли мы скопировали или сложили селектор-CSS можно настроить триггер и проверить его через отладчик тэг менеджера, или же можно воспользоваться расширением для Google Chrome CSS Selector Tester.

Для проверки последним нужно запустить его на нужной странице, нажав на соответствующую иконку и вставить ваш селектор в появившееся окошко:

CSS Selector Tester расширение для Google Chrome

Далее нужно присмотреться к странице, элемент на который указывает селектор будет выделен рамочкой:

проверка css селектора через CSS Selector Tester

После того, как мы удостоверились, что используем нужный нам селектор можно переходить к настройке Tag Manager, но это уже тема совсем другой статьи.

На этом всё, высоких вам конверсий! Если статья понравилась, не поленитесь поставить лайк и поделиться с друзьями в социальных сетях 😉