Очень часто при настройке аналитики для сайта нужно отслеживать клики по определенным элементам на сайте. В таких случаях очень круто, когда у этого элемента есть id или class, как вот в этих примерах:
или
Всё, что остается сделать в таком случае, — это активировать в GTM встроенные переменные Click Classes и Click ID и на их основании настроить триггер.
Например, такой:
А что же делать, когда у нужного нам элемента нет ни id, ни class? Например, как в этом коде:
В таком случае, конечно, можно подёргать программистов, которые пропишут onclick для передачи пользовательских событий. Например, так:
Но такой способ не всегда удобный: например у вас в штате может не быть программиста или он может быть занят, а настройку нужно сделать быстро или еще миллион причин. В таких случаях нам на помощь приходят селекторы CSS. (Кстати, когда вы научитесь правильно использовать селекторы CSS, то скорее всего забудете о подключении прогеров к настройке целей, да и ко многим другим задачам. Да-да, это аж настолько крутая “фича”, как сейчас модно говорить :)).
Что такое эти селекторы CSS?
Cелектор CSS — это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля.
Честно говоря, с такого описания мне, да и думаю вам, не особо понятно что это такое и как оно нам поможет в настройке аналитики. Поэтому скажу по-другому:
CSS селектор - это элемент, к которому мы собираемся применить определенные свойства CSS. Мы конечно никакие свойства применять не будем, для нас более важно то, что мы можем найти любой элемент на странице и обратится к нему.
Какие селекторы существуют?
- .someClass — соответствует любому элементу с классом “someClass”.
- #someid — соответствует элементу с идентификатором “someid”.
На текущем этапе вы можете задать вполне логичный вопрос: “Зачем мне изучать селекторы CSS, если я могу воспользоваться встроенными в GTM переменными о которых говорилось выше?”
Но разница все таки есть. Если класс нужного элемента не повторяется на странице, то рекомендуется использовать именно встроенные переменные. Если один и тот же класс используется в нескольких элементах на странице, тогда используем селекторы CSS. В последнем случае иногда возможно и использование триггеров подобных этому:
Но лучше всё-таки так не делать и использовать селекторы 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:
Чтобы настроить триггер, который будет активироваться при нажатии на картинку любого из этих типов, мы используем следующее условие:
Триггер активируется когда пользователь кликнет на картинку с расширением .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”. Чтобы понимать на правильной ли части кода вы кликнули, нужно посмотреть на нужный элемент в окне слева. Текущий элемент будет подсвечен, как на скриншоте ниже:
В итоге вы получите строку примерно следующего вида:
“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.
Для проверки последним нужно запустить его на нужной странице, нажав на соответствующую иконку и вставить ваш селектор в появившееся окошко:
Далее нужно присмотреться к странице, элемент на который указывает селектор будет выделен рамочкой:
После того, как мы удостоверились, что используем нужный нам селектор можно переходить к настройке Tag Manager, но это уже тема совсем другой статьи.
На этом всё, высоких вам конверсий! Если статья понравилась, не поленитесь поставить лайк и поделиться с друзьями в социальных сетях 😉