Веб-аналитика · Яндекс Тег Менеджер · CSS-селекторы

Как найти CSS-селектор элемента на сайте — 6 простых способов

Приветствую!

Меня зовут Артём, и в этой статье на примере кнопки «В корзину» я покажу, как найти CSS-селектор элемента на сайте и использовать его для настройки клика в Яндекс Тег Менеджере.

Чаще всего селекторы нужны, чтобы настроить отслеживание кликов по кнопкам и ссылкам: например, по кнопке «В корзину», «Оставить заявку», «Позвонить», «Скачать файл». Но этим их польза не ограничивается.

Селекторы также пригодятся для настройки: видимости элементов, ручного Advanced Matching, пользовательских HTML-тегов и разных сценариев, где нужно точно найти нужный элемент на странице.

Разберём всё на простом примере — кнопке «В корзину» в интернет-магазине. Я покажу 6 основных способов найти её селектор, проверить его в консоли браузера и использовать в условиях триггера ЯТМ.

В статье я покажу 6 основных способов найти селектор: по ID, по классу, по нескольким классам, по атрибуту, через инструменты разработчика и через проверку в консоли. Этого достаточно для большинства практических задач, с которыми веб-аналитик сталкивается при настройке кликов в ЯТМ.

А вот и пример кода с кнопкой «В корзину».

Пример кода с кнопкой "В корзину"

Время чтения: 8–12 минут Рубрика: Веб-аналитика Обновлено: 2026

Как найти CSS-селектор элемента на сайте для Яндекс Тег Менеджера

Короткое правило: селектор и селектор *

Перед тем как разбирать способы поиска селекторов, важно запомнить одно короткое правило:

селектор — находим сам элемент;
селектор, селектор * — находим сам элемент и всё, что находится внутри него.

Это важно, потому что на сайте кнопка не всегда состоит только из одного элемента. Например, визуально мы видим кнопку «В корзину», но внутри неё могут быть вложенные элементы: текст, иконка и другие элементы.

Пользователь может кликнуть не только по самой кнопке, а и по тексту в кнопке:

<span class="basket-text">В корзину</span>

или по иконке:

<svg>...</svg>

Для пользователя это всё одна и та же кнопка. Но для браузера это разные элементы внутри одной кнопки.

Поэтому, если мы укажем только такой селектор:

.add-to-cart

мы найдём только кнопку.

А если такой:

.add-to-cart, .add-to-cart *

мы найдём и кнопку и все вложенные элементы внутри неё.

Звёздочка * в CSS означает «любой элемент».

А запись .add-to-cart * означает: «любой элемент внутри элемента с классом .add-to-cart».

Именно поэтому при настройке отслеживания кликов в Яндекс Тег Менеджере я часто использую формулу:

селектор, селектор *

Например:

.add-to-cart, .add-to-cart *

Так снижается риск ситуации, при которой пользователь кликнул по тексту или иконке внутри кнопки, а триггер не сработал.

Важно: если нам нужен селектор, чтобы отслеживать видимость какого-то элемента, этого правила придерживаться не обязательно. Для видимости чаще всего достаточно самого селектора элемента.

Ниже рассмотрим 6 простых способов, как найти селектор на сайте.

1. Находим селектор по ID

Начнём с одного из самых простых способов — поиска элемента по id.

Какой-то текст — Атрибут id в коде кнопки

id — это уникальный идентификатор элемента на странице. В идеальной ситуации один и тот же id должен встречаться на странице только один раз. Поэтому, если у нужной кнопки есть нормальный уникальный id, это очень удобный способ быстро найти элемент.

В приведённом выше куске кода у кнопки есть такой фрагмент:

id="catalog_add2cart_link"

Чтобы использовать id при настройке в ЯТМ в качестве селектора, берём только то, что в кавычках — catalog_add2cart_link — и добавляем впереди #.

#catalog_add2cart_link

То есть запомните простое правило:
id="название" → #название

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

document.querySelectorAll('#catalog_add2cart_link')

Если в ответ вернулся 1 элемент — отлично. Значит, селектор найден корректно, а id действительно уникален.

Если вернулось несколько элементов, как в нашем примере, то это уже повод задуматься.

По правилам HTML один id не должен повторяться на странице несколько раз. Но на реальных сайтах такое встречается: например, когда у нескольких одинаковых кнопок «В корзину» разработчик указал один и тот же id.

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

Ну и напомню: если отслеживаем клик по кнопке, важно учесть и все вложенные элементы. Для этого используем комбинацию:

селектор, селектор *

В нашем случае:

#catalog_add2cart_link, #catalog_add2cart_link *

Тогда, по какому бы элементу в кнопке не кликнули, мы всё равно отследим клик.

Кстати, проверять и отмечать красным цветом элементы мне помогает виджет CSS and XPath checker, который можно установить в браузер из магазина Chrome.

Если добавить в него наш селектор, то вы как раз увидите, какие элементы мы нашли и все ли вложенные элементы учли. (Получилось даже в рифму) :)

Скрин №5: проверка селектора через CSS and XPath checker — CSS and XPath checker помогает визуально проверить найденные элементы

А вот пример отображения кнопки:

Без учёта вложенностей

Если взять только сам селектор кнопки, виджет может подсветить не все внутренние части кнопки.

Скрин №6: кнопка без учёта вложенных элементов — Без учёта вложенностей

С учётом вложенностей

Если использовать формулу селектор, селектор *, подсвечивается и сама кнопка, и элементы внутри неё.

Скрин №7: кнопка с учётом вложенных элементов — С учётом вложенностей

В ЯТМ такой селектор можно использовать в условии триггера:

Click Element → соответствует CSS-селектору → #catalog_add2cart_link

2. Находим по классу основной кнопки

Второй способ — это найти элемент по классу.

В нашем примере у кнопки есть атрибут class:

class="product_shop-link add-to-cart"

Обратите внимание: внутри class указано сразу два класса:

product_shop-link
add-to-cart

Начнём с первого класса — product_shop-link.

Скрин №8: в коде выделен класс product_shop-link — Класс основной кнопки

Чтобы использовать класс как CSS-селектор, нужно взять название класса и поставить перед ним точку.

Получится так:

.product_shop-link

То есть правило такое:
class="название" → .название

У этого способа есть и отрицательная сторона: такой класс может быть у многих похожих кнопок на странице. Проверяем селектор в консоли разработчика:

document.querySelectorAll('.product_shop-link')

Если команда нашла нужные кнопки — отлично. В моём случае вернулось 10 элементов, потому что на странице 10 кнопок «В корзину».

Скрин №9: проверка .product_shop-link в консоли — Проверка селектора по классу основной кнопки

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

.product_shop-link

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

В ЯТМ такой селектор можно использовать в условии триггера:

Click Element → соответствует CSS-селектору → .product_shop-link

Если нужно учитывать клики по элементам внутри кнопки, используем правило из начала статьи:

.product_shop-link, .product_shop-link *

Скрин №10: подсветка кнопки по .product_shop-link, .product_shop-link * — Проверка вложенных элементов внутри кнопки

3. По классу добавления в корзину

В нашем примере у кнопки есть ещё один класс: add-to-cart.

Скрин №11: в коде кнопки выделен класс add-to-cart — Класс add-to-cart описывает действие кнопки

Он может быть более корретным, потому что по названию уже понятно, за какое действие отвечает кнопка. add-to-cart буквально означает «добавить в корзину».

Чтобы превратить этот класс в CSS-селектор, снова ставим перед ним точку:

.add-to-cart

Далее проверяем в консоли разработчика:

document.querySelectorAll('.add-to-cart')

Или через виджет CSS and XPath checker.

Если команда нашла все кнопки «В корзину» на странице — отлично. В моём примере таких кнопок 10, потому что на странице 10 товаров.

Этот способ часто удобнее, чем поиск по общему классу вроде .product_shop-link, потому что .add-to-cart описывает именно действие кнопки, а не просто её внешний вид или расположение.

В ЯТМ такой селектор можно использовать так:

Click Element → соответствует CSS-селектору → .add-to-cart

А для кликов по вложенным элементам:

.add-to-cart, .add-to-cart *

4. По двум классам одновременно

Этот способ часто может быть намного точнее, чем использование только части класса.

Например, класс .product_shop-link может отвечать за внешний вид кнопки, а класс .add-to-cart — за действие добавления товара в корзину.

Скрин №12: у элемента сразу два класса product_shop-link и add-to-cart — Два класса на одном HTML-элементе

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

.product_shop-link.add-to-cart

Обратите внимание: между классами нет пробела.

Правильно брать класс не так:

product_shop-link add-to-cart

А так:

.product_shop-link.add-to-cart

Обязательно не забывайте поставить точку в начале и точку вместо пробела между классами.

Почему вариант с пробелом неправильный? Потому что пробел в CSS-селекторе означает «найди элемент внутри другого элемента».

Запись .product_shop-link .add-to-cart означает: «найди элемент с классом .add-to-cart, который находится внутри элемента с классом .product_shop-link».

А у нас оба класса находятся на одном и том же элементе. Поэтому пишем без пробела:

.product_shop-link.add-to-cart

Проверяем в консоли разработчика:

document.querySelectorAll('.product_shop-link.add-to-cart')

Скрин №13: проверка .product_shop-link.add-to-cart в консоли — Проверка селектора по двум классам одновременно

Также можно проверить найденные элементы через виджет CSS and XPath checker.

Скрин №14: проверка двух классов через CSS and XPath checker — Проверка двух классов через расширение

Не забывайте о вложенностях и формуле:

селектор, селектор *

По этой формуле весь наш класс будет такой:

.product_shop-link.add-to-cart, .product_shop-link.add-to-cart *

Ещё раз отмечу, что этот способ обычно точнее, чем поиск только по одному классу. Мы как будто говорим браузеру: «Найди не просто любой элемент с классом .product_shop-link и не просто любой элемент с классом .add-to-cart, а именно тот элемент, у которого есть оба этих класса одновременно».

В ЯТМ такой селектор можно использовать в условии триггера:

Click Element → соответствует CSS-селектору → .product_shop-link.add-to-cart

5. По атрибуту элемента

Ещё один удобный способ найти элемент — использовать его HTML-атрибут.

В нашем примере у кнопки есть атрибут:

data-product-id

Скрин №15: в коде выделен атрибут data-product-id — Атрибут data-product-id в коде кнопки

data-product-id — это пользовательский data-атрибут. Такие атрибуты часто используют в интернет-магазинах, чтобы хранить техническую информацию: ID товара, категорию, цену, вариант товара и другие данные.

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

[data-product-id]

То есть правило такое:
атрибут → [атрибут]

Проверка такая же, как и в предыдущих способах:

document.querySelectorAll('[data-product-id]')

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

[data-product-id], [data-product-id] *

На практике я очень часто использую атрибуты элементов, потому что это довольно удобно.

Смотрите, по атрибутам можно искать не только data-product-id.

Скрин №16: в коде выделены class, data-product-id и id — По атрибутам можно искать разные части HTML-элемента

Например, мы можем обернуть в квадратные скобки:

[class="product_shop-link add-to-cart"], [class="product_shop-link add-to-cart"] *
[data-product-id], [data-product-id] *
[id="catalog_add2cart_link"], [id="catalog_add2cart_link"] *

И во всех трёх примерах мы можем получить похожий результат. Но тут важно не запутаться: в квадратные скобки мы оборачиваем не любую часть кода, а именно HTML-атрибут.

Правильно:

[data-product-id]
[id="catalog_add2cart_link"]
[href="/cart/"]

Неправильно:

[В корзину]
[<span>]
[add-to-cart]

6. Через Copy selector в DevTools

Этим способом находить селекторы проще простого. Поэтому я оставил этот способ в конце. Сначала полезно научиться находить селекторы вручную: по ID, классам и атрибутам.

Открываем сайт, где размещена кнопка.
Нажимаем в окне браузера Ctrl+Shift+C на Windows/Linux или Cmd+Opt+C на Mac, чтобы проинспектировать нужный элемент на сайте.
Кликаем по нужной кнопке на сайте.
В консоли разработчика автоматически перемещаемся к коду этой кнопки.
Кликаем правой кнопкой мыши по строке с кодом и выбираем Copy → Copy selector.
Готово. Селектор скопирован, и мы сможем использовать его в настройке триггера в ЯТМ.

Скрин №17: выбор элемента через Ctrl+Shift+C / Cmd+Opt+C — Выбор нужного элемента на странице

Скрин №18: Copy → Copy selector в DevTools — Копирование CSS-селектора через DevTools

В нашем примере после Copy selector получился такой селектор:

#catalog_add2cart_link

С него мы и начинали в первом способе — это селектор по id. То есть браузер автоматически скопировал тот же вариант, который мы до этого нашли вручную.

Но так бывает не всегда. Если у элемента нет удобного id, класса или понятного атрибута, браузер может скопировать гораздо более длинный селектор.

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

body > div:nth-child(2) > div > div.b24-widget-button-wrapper.b24-widget-button-position-bottom-right.b24-widget-button-visible > div.b24-widget-button-popup.b24-widget-button-popup-show > div.b24-widget-button-popup-inner > div.b24-widget-button-popup-content > div.b24-widget-button-popup-description

Это реальный пример длинного селектора с виджета чата Битрикс24.

Такие селекторы использовать можно, но осторожно. Они часто завязаны на структуру страницы. Если разработчик изменит вёрстку, добавит новый блок или немного перестроит виджет, такой селектор может перестать находить нужный элемент.

Есть ещё один нюанс: в ЯТМ при настройке триггера через условие Click Element → соответствует CSS-селектору можно столкнуться с ограничением по длине селектора. Если селектор получился слишком длинным, ЯТМ может его не принять или он не будет работать корректно.

Поэтому Copy selector — это хороший быстрый способ, но результат всегда нужно проверять и по возможности упрощать. Если браузер скопировал короткий селектор вроде #catalog_add2cart_link, как у нас, — отлично. Если получилась длинная цепочка через body > div > nth-child(...), лучше попробовать найти более устойчивый вариант: по классу, по нескольким классам или по атрибутам.

Частые ошибки

Забыли точку перед классом: написали add-to-cart вместо .add-to-cart.
Поставили пробел между классами: .product_shop-link .add-to-cart вместо .product_shop-link.add-to-cart.
Не учли вложенные элементы при отслеживании клика по кнопке.
Скопировали слишком длинный селектор через Copy selector и не проверили его.

Итоги

Хочется ещё раз напомнить приоритеты при поиске селекторов на сайте.

Если у элемента есть уникальный id — можно использовать его.
Если id повторяется или выглядит ненадёжно — лучше взять класс или атрибут.
Если один класс слишком общий — объедините два класса.
Если у элемента есть понятный атрибут — это тоже хороший вариант для аналитики, особенно в интернет-магазинах.

Главное — не копировать селектор вслепую.

Даже если вы пользуетесь способом №6 и копируете селектор через консоль разработчика, результат всё равно нужно проверить. Иногда браузер отдаёт короткий и хороший селектор, а иногда — длинную цепочку через body > div > nth-child(...), которая может сломаться после любого изменения вёрстки.

В связи с этим базовый алгоритм поиска селектора такой:

Находите нужный элемент в коде.
Смотрите его id, классы и атрибуты.
Составляете селектор.
Проверяете его в консоли через document.querySelectorAll().
Убеждаетесь, что он находит именно нужные элементы.
Добавляете селектор в условие триггера ЯТМ.
Проверяете срабатывание на сайте.

И не забывайте про важное правило для кликов:

селектор, селектор *

Так вы учитываете не только саму кнопку, но и вложенные элементы внутри неё: текст, иконку, SVG и другие части кнопки.

Чем лучше вы понимаете селекторы, тем меньше зависите от разработчиков в простых задачах веб-аналитики. А значит, быстрее настраиваете цели, события, видимость элементов, пользовательские HTML-теги и другие сценарии отслеживания.

Надеюсь, приведённые выше способы помогут вам в настройке веб-аналитики и научат быстро и правильно находить селекторы на сайте. :)