tagmanager-trigger-valid-click

Правильно настраиваем цель «Отправить заявку» в Google Analytics, Яндекс Метрика с помощью Google Tag Manager

В интернете много мануалов, рассказывающих как настроить цель по нажатию на кнопку «отправить». Почти все они, включая официальные мануалы от Google и Яндекс, основаны на установке onclick-события на элементе отвечающем за отправку формы. Основная проблема в такой настройке — лжесрабатывания, т.к. событие может отправляться даже при неверно заполненной информации, пустой форме и т.п. Как результат — неверная статистика, ошибки в управлении рекламными кампаниями и принятии решений.

В этой статье мы расскажем, как свести к минимуму лжесрабатывания с помощью javascript и Google Tag Manager. Используемый браузер — Google Chrome.

Решение проблемы заключается в написании собственного  javascript-валидатора, который проверяет поля формы на заполнение корректной информацией.

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

Для примера, разместим форму в этой статье и будем дальнейшие манипуляции проводить с ней.

Ваше имя

Ваш Email

Номер телефона

Сообщение

Рассмотрим вариант, когда обязательным является заполнение полей Имя, Email, Телефон.

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

  • определяем css-селектор поля. Для этого на нужном поле нажимаем правой кнопкой мышки, выбираем пункт Inspect.  В открывшемся окне нажимаем правой кнопкой мышки на выделенном элементе и выбираем подпункт Copy Selector.

chrome-css-selector

  • используем данный селектор для получения данных формы с помощью javascript-метода querySelector

Проверить корректность можно с помощью консоли разработчика. Для этого вводим любое значение в проверяемое поле, берем соответствущий код и запускаем его в консоли. Например, код, для поля Имя

test-css-selector-console

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

Проверка email

Проверка номера телефона

Проверка даты

В принципе, такого плана регулярные выражения достаточно легко найти просто загуглив «email regex» etc. Проверить же работоспособность можно с помощью сервисов типа https://regex101.com/ (https://regex101.com/r/eZ7aX5/1).

Получив все и проверив все необходимые данные, мы наконец-то можем перейти к самому коду и его интеграции в Google Tag Manager.

Итоговый код с комментариями:

Настройка в Google Tag Manager

Создаем Custom Html Tag, в который засовываем вышеуказанный код с триггером на клик на кнопку отправить (я использую настройку на css-selector кнопки).

custom-html-tagmanager click-css-selector

Осталось настроить код Analytics и код Метрики. В обоих случаях триггером срабатывания кода будет event «valid_click», который мы отправляем с помощью нашего custom html, если форма заполнена корректно.

tagmanager-trigger-valid-click

 

Настройка Analytics и Метрики детально не рассматривалась, т.к. в сети достаточно информации на эту тему. Но если есть запрос, то статью расширим.