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

Селекторы CSS — это шаблоны, которые вы можете проверить в любом элементе HTML. Традиционно CSS-селекторы использовались для изменения стилей данных элементов.

В настоящее время мы можем фактически использовать их для работы с элементами HTML и для других целей.

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

Нажатие на кнопку или какой-либо другой элемент на вашем сайте.
Успешную отправку формы.

Отслеживание нажатий на элемент с помощью селектора CSS

Вот как будет выглядеть весь процесс на примере отправки событий в UA:

Найдите CSS селектор элемента, который вы хотите отслеживать.
Создайте новый тег типа Universal Analytics, который отправляет данные о событиях в GA.
Проверьте тег через отладчик, затем опубликуйте контейнер.

Предположим, вы хотите отслеживать клики по кнопке «Контакты»‎:

Поиск CSS селектора с помощью консоли разработчика

Кликните правой кнопкой на элемент (Контакты) → Просмотреть код. Откроется консоль разработчика.
Кликните правой кнопкой на код элемента.
Скопируйте селектор.

Готово. Переходите к шестому шагу.

Расширение SelectorGadget в Google Chrome для поиска CSS-селектора элемента страницы

Подробнее остановимся на поиске селектора при помощи инструмента SelectorGadjet. Следуйте инструкциям ниже.

Шаг 1: Установите расширение SelectorGadget.

Шаг 2: Перейдите на страницу с элементом, клик на которой вы хотите отслеживать.

Шаг 3: Чтобы включить расширение, нажмите на значок SelectorGadjet (в правой верхней части окна браузера):

Шаг 4: Теперь нажмите на «Контакты» и скопируйте соответствующий селектор CSS, который отобразился в инструменте «SelectorGadget»:

В нашем случае отслеживаемый элемент имеет уникальный класс ff_meb, соответственно, селектор CSS будет: .ff_meb. Точка в этом случае обозначает, что это класс.

Шаг 5: Отключите расширение SelectorGadget, снова щелкнув на значок (в правой верхней части окна браузера).

Шаг 6: Перейдите к своей учетной записи GTM и создайте новый тег типа Universal Analytics. Назовите тег, например: «Клик по кнопке Контакты»‎.

Шаг 7: Задайте следующую конфигурацию:

Шаг 8: Создайте новый триггер со следующей конфигурацией:

В качестве оператора выбираем «Соответствует селектору CSS».

Шаг 9: Сохраните тег, а затем перейдите в режим предварительного просмотра.

Шаг 10: Обновите страницу сайта и кликните на «‎Контакты». Если ваш тег отображается в разделе Tags Fired On This Page, значит, что тег срабатывает при нажатии соответствующей кнопки.

Шаг 11: Вернитесь к своей учетной записи GTM и затем нажмите «Выйти из режима предварительного просмотра»‎.

Шаг 12: Опубликуйте контейнер.

Таким образом вы можете использовать CSS селекторы для отслеживания кликов на своем сайте с помощью GTM.

Отслеживание событий по отправке форм с помощью триггера «Доступность элемента»

Такой способ отлично подходит в случае, если невозможно использовать стандартный триггер для отслеживания форм "Отправка формы"‎. Триггер "Доступность элемента«‎ можно использовать как альтернативу способу с технологией AJAX, когда при отправке формы пользователя не перенаправляет на новую страницу.

Итак, начнем.

Шаг 1: Перейдите на страницу с формой, которую вы хотите отслеживать.

Шаг 2: Заполните каждое поле и нажмите «Отправить». Удостоверьтесь, что в ответ не пришло сообщение об ошибке.

Шаг 3: При успешной отправке обычно приходит сообщение благодарности. То, что нам нужно.

Шаг 4: Скопируйте CSS селектор этого элемента, открыв консоль разработчика.

В нашем случае отслеживаемый элемент имеет уникальный ID #nf-form-1-cont, соответственно, селектор CSS будет: #nf-form-1-cont > div > div.nf-response-msg > p. Решетка в данном случае обозначает, что это ID элемента.

Шаг 5: Перейдите к своей учетной записи GTM и создайте новый тег типа Universal Analytics. Назовите его «Успешная отправка заявки».

Шаг 6: Задайте следующую конфигурацию:

Шаг 7: Создайте новый триггер со следующей конфигурацией:

Шаг 8: Сохраните тег и перейдите в режим предварительного просмотра. Обновите страницу вашего сайта.

Шаг 9: Перейдите на страницу с формой, отправку которой нужно отследить.

Шаг 10: Заполните форму и нажмите кнопку «Отправить». Убедитесь, что в ответ не пришло сообщение об ошибке.

Шаг 11: Ниже в отладчике вы увидите теги, которые сработали на этой странице. Если тег отображается в разделе Tags fired on this page‎, значит, что он срабатывает при успешной отправке формы.