Настройка отслеживания кликов по элементам сайта

Введение

Здравствуйте! Меня зовут Артём, и мы продолжаем заниматься настройкой аналитики в GTM и YTM. В предыдущей статье мы с вами уже провели необходимые подготовительные работы  рекомендую ознакомиться, прежде, чем продолжать.

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

Разные типы событий удобно подсвечивать разным цветом

Отслеживание кликов по номерам телефонов

Чтобы отслеживание клика сработало, номер телефона на сайте должен быть «кликабельным».

Кликнув по элементу, можно позвонить

То есть номер должен быть обёрнут в тег <a> с атрибутом href, начинающимся с tel:

Тег <a с атрибутом href присутствуют

Если номер оформлен иначе, например, заключён в тег <div>, <strong> или <span>, то настройка сработает некорректно, потому что браузер не считает такой элемент ссылкой.

Номер заключён в тег <strong

Это важно учесть не только для телефонов, но и при настройке отслеживания других элементов на сайте.

Как проверить элемент на сайте?

Чтобы убедиться, что элемент «кликабелен» и правильно оформлен:

• Откройте инструменты разработчика: Windows/Linux: Ctrl + Shift + I или F12 | macOS: Cmd + Opt + I;
• Используйте инструмент выбора элемента: Windows/Linux: Ctrl + Shift + C | macOS: Cmd + Opt + C;
• Наведите указатель на нужный элемент — в правой панели вы увидите его HTML-разметку.

«Инспектируем» элементы на сайте

На сайте моего клиента номер телефона оформлен корректно — это тег <a href=”tel:+…”>, поэтому я могу настроить цель в Яндекс Метрике через YTM корректно.

Корректно оформленный номер телефона в разметке сайта

Теперь переходим к созданию новой цели в Яндекс Метрике или редактируем уже существующую, настроенную через GTM. Чтобы не путаться, я буду просто менять названия целей в Метрике, добавляя к ним пометку YTM.

Идентификатор и название цели в Яндекс Метрике

Такой подход поможет сохранить структуру, особенно если вы продолжаете использовать GTM параллельно с YTM в процессе переноса.

ШАГ 1. Создание триггера в GTM

Переходим в Google Тег Менеджер во вкладку «Триггеры» и находим триггер, отвечающий за клики по номерам телефонов. В моём случае — это триггер «Клики – Только ссылки», а условие его активации выглядит так: Click URL – содержит – tel.

Создание триггера в GTM

Это универсальное условие: оно будет срабатывать при любом клике по ссылке, начинающейся с tel:, независимо от того, сколько номеров указано на сайте. Этого достаточно в большинстве случаев.

Но если вы хотите отслеживать клики по каждому номеру телефона отдельно — тогда используйте более точное условие:

Click URL – равно – tel: номер телефона на сайте.

Перед тем как переносить это условие в YTM, можете воспользоваться режимом отладки в GTM:

1. Откройте отладку;
2. Перейдите на сайт, где установлен GTM;
3. Кликните по номеру телефона;
4. Посмотрите в отладчике, какое значение принимает переменная Click URL. Это поможет вам избежать ошибок при переносе и убедиться, что триггер срабатывает именно так, как ожидается.

Смотрим значение переменной Click URL в GTM

Шаг 2. Создание триггера в YTM

В YTM создаём точно такой же триггер.

Создание триггера в YTM

Шаг 3. Создание тега Яндекс Метрика

Теперь, когда мы подготовили триггер для кликов по номерам телефонов, давайте создадим тег Яндекс Метрики, чтобы отправлять информацию о достижении цели.

1.Переходим во вкладку «Теги» и нажимаем «Добавить тег».

Нажимаем «Добавить тег».

2.В списке шаблонов выбираем «Шаблоны из каталога»:

Выбираем шаблоны из каталога

И затем Яндекс Метрика:

Выбираем шаблон Яндекс Метрика

Заполняем параметры.

1. Название тега — укажите понятное имя.
2. ID счётчика можно вписать вручную или выбрать из переменной, созданной ранее (тип “Константа”). Просто введите {{, и из выпадающего списка выберите нужную переменную.

После нажатия {{, открывается выпадающее меню с переменными

1. Идентификатор цели — укажите ID цели в Яндекс Метрике, который уже используется в GTM (например Click-Tel).
2. Триггер — выберите триггер, который отслеживает клики по телефону, созданный ранее.
3. Нажмите Сохранить.

Пошаговая настройка тега Яндекс Метрика

Шаг 4. Удаление дублирующего тега в GTM

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

Цель сработала дважды в панели отладки Яндекс Метрики

В консоли разработчика:

Цель сработала дважды в консоли разработчика

Не забудьте после остановки или удаления опубликовать все изменения в GTM!

Шаг 5. Создание проверочного тега

Остановив триггер в GTM, идём в предварительный просмотр YTM.

Но перед этим давайте добавим в наш Тег «Мини дебагер триггеров и переменных» триггер «Клики по номерам телефонов» и запустим его.

Запускаем Тег «Мини дебагер триггеров и переменных»

Эта настройка дополнительная. Мы всё сможем проверить и без этого инструмента. Но на этом шаге я хочу показать, как можно проверять работоспособность триггеров ещё ДО создания отслеживания в Теге Яндекс Метрика.

При корректном срабатывании триггера вы должны увидеть в консоли разработчика сообщение из переменной (например, «Триггер сработал»).

Нажмите «Предварительный просмотр» в интерфейсе YTM.

Предварительный просмотр

Чтобы не ждать, жмём на клавиатуре F5, и обновляем страницу. Открываем предварительный просмотр.

Открываем предварительный просмотр режима отладки

Можем добавить в адресной строке параметр: &_ym_debug=2

Обычно мы это делаем через символ <?>, но так как в параметрах знак вопроса уже присутствует, мы должны заменить его на символ &.

Добавляем в адресной строке параметр: &_ym_debug=2

Теперь мы сможем отследить срабатывание события не только через консоль разработчика в самом браузере, но и через панель отладки Яндекс Метрики. В правом нижнем углу страницы появится вот такой символ

Шаг 6. Проверка в режиме отладки

Оказавшись на странице режима отладки, жмём Ctrl+Shift+J или Cmd+Opt+J, чтобы сразу попасть в консоль разработчика. Затем кликаем по номеру телефона. Если всё настроено верно – мы должны увидеть следующее:

Появится текст «Триггер сработал»

Бонусом сработал наш Тег «Мини дебагер триггеров и переменных». Это видно по строке «Триггер сработал».

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

Идентификатор цели Click-Tel

Если всё отображается корректно и цели не дублируются, значит вы всё сделали правильно!

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

Отслеживание кликов по Email

Следующая цель — отслеживание кликов по email. Лично я её не настраивал ранее в GTM, но, возможно, у вас она уже реализована. В любом случае логика настройки абсолютно такая же, как и в случае с номером телефона.

Всё также важно, чтобы Email на сайте был «кликабельным»!

Почта на сайте заключён в ссылку с атрибутом href=”mailto:

Убедитесь, что email на сайте заключён в ссылку с атрибутом href=”mailto:…”. Если email-адрес просто написан в тексте (например, внутри тега <div> или <span>), то триггер не сработает.

Это универсальное условие, которое сработает при клике по любому почтовому адресу на сайте. Если же вы хотите отслеживать клик по конкретному адресу, укажите полное значение в условии:

Click URL – равно – mailto:example@site.ru

Кстати, и отслеживание номера телефона, и клика по email можно настроить и прямо в интерфейсе Яндекс Метрики, без использования YTM.

Просто при создании цели выберите её тип:

• клик по номеру телефона;
• клик по email.

Затем укажите: вы хотите отслеживать все клики, или только клики по конкретным адресам/номерам?

По сути, встроенные цели Метрики используют ту же логику, которую мы сейчас применяем при настройке целей в YTM: они отслеживают значение атрибута href при клике по ссылке.

Настройка цели “Клик по номеру телефона” в Яндекс Метрике

И:

Настройка цели «Клик по email» в Яндекс Метрике

Отслеживание клика по кнопке всплывающего окна

Иногда возникает задача отследить клик по кнопке во всплывающем окне. На сайте моего клиента как раз есть такая кнопка — «Написать в WhatsApp».

Всплывающее окно POP-UP на сайте

Для её отслеживания я использую селектор CSS. Это очень удобный способ, особенно если вы не можете привязаться к Click URL или Click Text (к тексту на кнопке). Но вы можете отслеживать это и иначе. Есть множество способов найти селектор CSS. Но я вам приведу самый простой способ на примере моего проекта.

• Открываем сайт, где размещена кнопка.
• Нажимаем Ctrl+Shift+C (Windows/Linux) или Cmd+Opt+C (Mac), чтобы «проинспектировать» нужный элемент.

Находим в коде сайта нужный элемент

• Кликаем по нужной кнопке на сайте.
• В консоли разработчика мы будем автоматически перемещены к коду этой кнопки.
• Кликаем правой кнопкой мыши по строке с кодом и выбираем Copy → Copy selector.
• Готово! Селектор скопирован и мы сможем использовать его в настройке триггера в YTM.

Копируем правой кнопкой мыши селектор элемента

Далее идём по уже привычным шагам.

Шаг 1. Настройка цели в Яндекс Метрике

Корректируем название цели в Яндекс Метрике.

Правим название цели в Яндекс Метрике

Шаг 2. Смотрим триггер в GTM

Если эта цель была уже реализована в GTM, «идём» в соответствующий триггер. Он нам пригодится для переноса всей логики.

Переносим всё из триггера GTM

Шаг 3. Создание триггера в YTM

В YTM создаём такой же триггер. Выбираем тип триггера: Клики — Все элементы. Условие активации: Click Element → соответствует CSS-селектору → [вставляем скопированный селектор].

Создаём аналогичный триггер в YTM

Шаг 4. Создание тега Яндекс Метрики

Теперь нам не нужно добавлять тег из шаблона. Он у нас уже есть. Мы можем открыть предыдущий тег и просто нажать на кнопку «Сохранить как» и сделать копию тега.

Копируем тег и создаём новый

Даём тегу новое название.

Меняем название тега

Шаг 5. Редактирование нового тега

Открываем только что созданный тег.

Тег

И меняем в нём идентификатор цели и триггер. Жмём «Обновить».

Меняем идентификатор цели и триггер

Шаг 6. Отключение дублирующего тега в GTM

Чтобы события не срабатывали дважды:

• остановите или удалите аналогичный тег в GTM;
• не забудьте опубликовать все изменения в контейнере GTM!

Шаг 7. Проверка с помощью «Мини дебагера»

Можете отключить «Мини дебагер триггеров и переменных», если он не нужен. Или можете изменить в нём триггер, если хотите проверить срабатывание нового события в режиме отладки.

Шаг 8. Режим отладки и финальная проверка

Идём в режим отладки и проверяем работу цели. Видим, всё срабатывает корректно.

Событие в отладке

И консоль разработчика:

Проверочный тег и цель срабатывают

ВАЖНО: при работе с консолью разработчика или с панелью отладки Яндекс Метрики, не забудьте поставить галочки в Preserve log. Это нужно для того, чтобы при перезагрузке страницы данные из консоли не затирались.

• В панели отладки Яндекс Метрики поставьте галочку Preserve log;

• В консоли разработчика поставьте галочку на вкладке Console → Preserve log;

Настройки

Preserve log:

Preserve log

• На вкладке Network (Сеть) также включите Preserve log.

Preserve log

Следующие действия я выполнил по уже знакомому сценарию.

С помощью триггера «Клики – Все элементы» и условия Click Element → соответствует CSS-селектору, были настроены следующие цели:

• Клик по кнопке открытия Квиза;
• Клик по кнопке начала прохождения Квиза;
• Клик по кнопке «Смотреть все отзывы»;
• Клик по кнопке «Напишите нам».

Каждую цель я перенёс следующим образом:

1. дал новое понятное название цели в Яндекс Метрике;
2. создал аналогичный триггер в YTM, скопировав селектор из GTM;
3. остановил или удалил соответствующие теги в GTM;
4. создал теги Яндекс Метрики в YTM, привязав их к нужным триггерам;
5. протестировал срабатывание целей через режим отладки и консоль разработчика.

В результате получил 4 новых тега в YTM с такими идентификаторами целей:

• QuizOpen
• QuizStart
• NapishiteClick
• OtzivClick

Настроенные цели в Яндекс Метрике

Проблема: ограничение длины CSS-селектора в YTM

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

Я копировал полный путь до элемента с помощью инструмента разработчика (Copy selector), и попытался вставить его в поле условия. Однако YTM обрезал строку — вставилось только 202 символа, а всё остальное было проигнорировано.

Важно: этого ограничения я не нашёл в справке Яндекс Тег Менеджера. Учитывайте его, особенно при копировании длинных селекторов из DOM-дерева.

Решение: вместо полного пути я использовал селектор класса:

.t-btn.t-quiz__btn_next.t-quiz__btn_md

Обратите внимание:

• между классами вместо пробелов обязательно ставьте точки (.)
• перед селектором тоже обязательно ставьте точку (.)

Правило не сработает без этих условий!

Используя этот селектор, я получил корректное срабатывание всех нужных кнопок (в моём случае — четыре варианта).

Селектор класса в коде сайта

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

Все 4 элемента на странице найдены

Теперь при проверке целей видно, что все события отслеживаются корректно.

Цели в панели отладки Яндекс Метрики сработали

В следующих материалах я чуть подробнее расскажу:

• как использовать методы JavaScript (querySelector, querySelectorAll) для поиска нужных элементов;
• как строить более надёжные и лаконичные CSS-селекторы вручную.

А пока идём дальше. Осталось настроить ещё 2 цели, которые требуют отслеживания кликов по элементам.

Отслеживание добавления и удаления товаров из корзины

Если у вас настроена электронная коммерция (E-commerce), то эти цели отслеживаются автоматически и не требуют дополнительной настройки через JS-события. Однако в моём случае интернет-магазин на платформе Tilda, поэтому есть свои нюансы:

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

Добавление в корзину

Но при увеличении количества товаров внутри самой корзины событие не срабатывает!

Не срабатывает, если нажать +

А удаление товара (через кнопку «−» или крестик) не отслеживается и вовсе.

Не срабатывает, если нажать и –

Именно поэтому с помощью GTM мне пришлось настроить цели вручную, и теперь мы вместе перенесём их в Яндекс Тег Менеджер.

Шаг 1. Настройка отслеживания добавления товара в корзину

Итак, на моём сайте пользователь может:

• добавить товар в корзину через кнопку «Добавить»;
• для увеличения количества товара нажать «+» внутри самой корзины.

Для отслеживания и первого и второго я использовал два отдельных триггера в GTM, и то же самое сделаю в YTM.

Первый способ — кнопка «Добавить в корзину»

Самый простой способ — найти селектор этой кнопки через панель разработчика. Именно так я и настроил триггер в GTM:

Триггер, настроенный в GTM

Чтобы найти нужный CSS-селектор, мы можем проинспектировать в панели разработчика кнопку «Добавить в корзину» и найти у элемента вот такой атрибут class:

Находим CSS-селектор в панели разработчика

А можем, наконец-то, воспользоваться файликом с заготовленными переменными. Сейчас я вам покажу на что он способен.

Файл с заготовленными переменными

Открываем YTM и создаём триггер «Клики – все элементы» с любыми условиями активации.

Создаём триггер «Клики – все элементы»

Открываем Тег «Мини дебагер триггеров и переменных». Добавляем в него только что созданный триггер «Клики – все элементы».

 А в переменные добавляем «встроенные переменные» КЛИКИ из файлика:

Клики

Click Element: {{Click Element}} Click Classes: {{Click Classes}} Click ID: {{Click ID}} Click Target: {{Click Target}} Click URL: {{Click URL}} Click Text {{Click Text}}

Добавляем во встроенные переменные текст из файла

Теперь зайдём в режим отладки YTM и кликнем по кнопке «Добавить в корзину». В консоли разработчика мы увидим, какие переменные сработали.

Например:

• Click Classes: js-store-prod-btn2 t-btn t-btn_sm …
• Click Text: Добавить в корзину

Помните режим отладки в GTM? Так вот – это его мини-аналог, которым тоже можно пользоваться.

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

На скрине ниже вы также увидите, что сработало и событие электронной коммерции add. Обратите внимание на переменную Click Classes. Это та самая переменная, которые мы с вами уже находили, когда инспектировали кнопку через консоль разработчика. Помимо Click Classes у нас есть значение в переменной Click Text – Добавить в корзину.

Значение из консоли

Click Classes у кнопки довольно длинный: js-store-prod-btn2,t-store__card__btn,t-store__card__btn_second,t-btn,t-btn_sm, но мы можем взять только его часть. Таким образом для отслеживания клика по кнопке «Добавить в корзину», мы можем привязаться или к CSS-селектору .js-store-prod-btn2 (не забываем о точке вначале!) или к переменной Click Text – равно – Добавить в корзину.

Добавление товара в корзину через элемент <+>

Через тег «Мини дебагер триггеров и переменных» найти нужную переменную не удалось. Дальнейшие шаги уже вам хорошо известны: создаём аналогичный триггер в YTM с условием: Click Element – соответствует селектору CSS.

Шаг 2. Объединение триггеров и создание тега Яндекс Метрика

На этом шаге я снова меняю название целей в Яндекс Метрике. Затем переношу всё из триггера в GTM в триггер YTM. Ставлю на паузу все Теги в GTM. Создаю Теги отслеживания событий Яндекс Метрики и через режим отладки проверяю работоспособность и корректность всех целей. Единственное, что мне ещё нужно будет сделать, так это объединить 2 триггера:

Объединяем 2 триггера

И объединить их нужно в рамках одного Тега Яндекс Метрики.

Объединение триггеров в теге

Примечание: внутри тега можно добавить несколько триггеров — они будут функционировать по условию ИЛИ.

Шаг 3. Проверяем работоспособность целей

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

Проверяем всё в режиме отладки. Все отслеживается корректно:

Шаг 4. Удаление товара из корзины

Теперь повторим те же шаги для события удаления товара из корзины.

На сайте это можно сделать:

• нажатием на «−»;
• нажатием на крестик (×).
  

  Нажатие на элементы

Используем панель разработчика, чтобы найти селекторы.

Элемент <x> имеет селектор класса:

Находим селектор элемента x

А элемент <->:

Находим селектор элемента –

Создаём два триггера в YTM с условиями:

• click Element соответствует селектору .t706__product-minus
• click Element соответствует селектору .t706__product-del

Последующие шаги:

1. объединяем триггеры под одним тегом Яндекс Метрики с идентификатором цели;
2. проверяем в режиме отладки — нажимая и «−», и «×»;
3. Убеждаемся, что цели срабатывают корректно.

Событие RemoveFromCart отрабатывает корректно

4. Публикуем изменения в YTM.

Поздравляю! Первый этап переноса завершён! Мы успешно перенесли все цели из категории «Клики по элементам». В YTM были созданы следующие теги:

• Click-Tel
• Click-Mailto
• QuizOpen
• QuizStart
• NapishiteClick
• OtzivClick
• AddToCart
• RemoveFromCart

Теперь можем смело нажимать кнопку «Опубликовать» и приступать к следующему этапу.

Нажимаем кнопку “Опубликовать”

 Клики по элементам обычно относятся к микроконверсиям. Их часто настраивают для обучения автоматических стратегий в рекламных системах, таких как Яндекс Директ.

Но главная цель аналитики — отслеживание макроконверсий:

• заявок;
• отправок форм;
• оформленных заказов.

  Настройка макроконверсий требует большей точности и содержит множество нюансов. Их мы детально разберём уже в следующей статье.