В интернете много мануалов, рассказывающих как настроить цель по нажатию на кнопку «отправить». Почти все они, включая официальные мануалы от Google и Яндекс, основаны на установке onclick-события на элементе отвечающем за отправку формы. Основная проблема в такой настройке — лжесрабатывания, т.к. событие может отправляться даже при неверно заполненной информации, пустой форме и т.п. Как результат — неверная статистика, ошибки в управлении рекламными кампаниями и принятии решений.
В этой статье мы расскажем, как свести к минимуму лжесрабатывания с помощью javascript и Google Tag Manager. Используемый браузер — Google Chrome.
Решение проблемы заключается в написании собственного javascript-валидатора, который проверяет поля формы на заполнение корректной информацией.
Итак, первое что нам нужно это определить, какие данные мы хотим проверить и являются обязательными.
Для примера, разместим форму в этой статье и будем дальнейшие манипуляции проводить с ней.
Рассмотрим вариант, когда обязательным является заполнение полей Имя, Email, Телефон.
Для того, чтобы наш скрипт проверил данные, нам их необходимо предварительно получить. В нашем примере мы будем использовать следующий алгоритм:
- определяем css-селектор поля. Для этого на нужном поле нажимаем правой кнопкой мышки, выбираем пункт Inspect. В открывшемся окне нажимаем правой кнопкой мышки на выделенном элементе и выбираем подпункт Copy Selector.
- используем данный селектор для получения данных формы с помощью javascript-метода querySelector
|
1 2 3 |
var name = document.querySelector("#wpcf7-f11449-p12838-o1 > form > p:nth-child(2) > span > input").value; var email = document.querySelector("#wpcf7-f11449-p12838-o1 > form > p:nth-child(3) > span > input").value; var number = document.querySelector("#wpcf7-f11449-p12838-o1 > form > p:nth-child(5) > span > input").value; |
Проверить корректность можно с помощью консоли разработчика. Для этого вводим любое значение в проверяемое поле, берем соответствущий код и запускаем его в консоли. Например, код, для поля Имя
|
1 |
document.querySelector("#wpcf7-f11449-p12838-o1 > form > p:nth-child(2) > span > input").value |
Все супер, все работает. Теперь нужно проверить эти данные на корректность и на наличие. Проверку будем делать с помощью регулярных выражений. Ниже я приведу несколько кусочков кода, которые я использую для проверки разных типов полей.
Проверка email
|
1 2 3 4 |
function validateEmail(e) { var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(e); } |
Проверка номера телефона
|
1 2 3 4 |
function validateNumber(e) { var re = /^[0-9._\s()+-]+$/; return re.test(e); } |
Проверка даты
|
1 2 3 4 |
function validateDate(e) { var re = /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/; return re.test(e); } |
В принципе, такого плана регулярные выражения достаточно легко найти просто загуглив «email regex» etc. Проверить же работоспособность можно с помощью сервисов типа https://regex101.com/ (https://regex101.com/r/eZ7aX5/1).
Получив все и проверив все необходимые данные, мы наконец-то можем перейти к самому коду и его интеграции в Google Tag Manager.
Итоговый код с комментариями:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<script> var name = document.querySelector("#wpcf7-f11449-p12838-o1 > form > p:nth-child(2) > span > input").value; // значение поля Имя var email = document.querySelector("#wpcf7-f11449-p12838-o1 > form > p:nth-child(3) > span > input").value; // значение поля email var number = document.querySelector("#wpcf7-f11449-p12838-o1 > form > p:nth-child(5) > span > input").value; // значение поля Номер телефона var proceed = true; // техническая переменная, менять не нужно. // Последовательно проверяем наши поля на наличие и корректность данных if(name == ""){ proceed = false; }; // проверяем, что поле имя не пустое if(email == "" || !validateEmail(email)){ proceed = false; }; // проверяем, что поле email не пустое и оно содержит корректный адрес if(number == "" || !validateNumber(number)){ proceed = false; }; // проверяем, что поле номер телефона не пустое и оно содержит цифры function validateEmail(e) { var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(e); } function validateNumber(e) { var re = /^[0-9._\s()+-]+$/; return re.test(e); } if (proceed){ dataLayer.push({'event': 'valid_click'}); }; // отправляем событие в Google Tag Manager о том, что форма заполнена корректно </script> |
Настройка в Google Tag Manager
Создаем Custom Html Tag, в который засовываем вышеуказанный код с триггером на клик на кнопку отправить (я использую настройку на css-selector кнопки).
Осталось настроить код Analytics и код Метрики. В обоих случаях триггером срабатывания кода будет event «valid_click», который мы отправляем с помощью нашего custom html, если форма заполнена корректно.
Настройка Analytics и Метрики детально не рассматривалась, т.к. в сети достаточно информации на эту тему. Но если есть запрос, то статью расширим.