Настройка отслеживания кликов с помощью CSS селекторов в Google Tag Manager


06.12.2017

Частенько при настройке систем метрик для сайта появляется задача отследить клики по некоторых элементам сайта. Случается, что у нужных элементов нет ID/Class, а чтоб внедрить их, у Вас может не быть навыков и нужен вебмастер, а он занят или его вообще нет в штате. На такой случай предлагаю решение – цели на css селекторы.

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

Почти всегда, узнать css селектор проще всего будет просмотрев код страницы. Находим нужный элемент, нажимаем ПКМ на него, выбираем Copy  => Copy selector.

 

 

Чтоб убедиться, что мы правильно выбрали css селектор, рекомендую установить расширение для Chrome – CSS Selector Tester. Запускаем расширение и вставляем наш селектор в выводимый блок, если всё верно, элемент на который указывает селектор, будет подсвечен красным пунктиром.

Теперь у нас есть правильный селектор. Следующий этап – настройка GTM.

Настраиваем триггер. Выбираем тип: все элементы => некоторые клики => Click Element => Соответствует селектору CSS => <Нужный_селектор>.

Далее привязываем триггер к тегу.

Всё сохраняем и в режиме отладки проверяем работоспособность.

Данные из аналитики in real time:

Спасибо за внимание!

Александр Кирьянов Александр Кирьянов Отдел SEO


""