Валидация полей формы перед отправкой с помощью Google Tag Manager

27 июня, 2023

В предыдущем материале мы разобрали 9 способов отслеживания отправки формы с помощью Google Tag Manager. В этой статье поговорим о валидации полей формы перед ее отправкой и о том, как избежать отправки пользователем пустых данных в аналитику.

Содержание

Проблема отслеживания отправки форм

Иногда на сайтах встречаются формы, которые можно отправить пустыми. Например, пользователь нечаянно или нарочно не заполняет ее, и нажимает кнопку отправить. В результате ваш триггер Google Tag Manager срабатывает, а тег передает данные о совершенном событии в счетчики веб-аналитики. Получается искажение статистики - заявка пустая или ее вообще не было, но +1 в аналитике конверсия засчиталась. Или в поле формы, например, где требуется указать электронный адрес (@...), пользователь вводит заведомо неверную информацию (абракадабру, фейк), и отправляет свое обращение вам. Если на сайте не предусмотрено никакой проверки, то у вас в аналитике также зарегистрируется ложное событие, которого на самом деле не было.

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

Пример формы с полями

В этой форме есть поле Имя, E-mail и обычное текстовое поле с возможностью задать вопрос или написать развернутое сообщение. Если ввести в поле Телефон и E-mail любые символы, а затем кнопку Отправить заявку, то триггер, который настроен на отслеживание отправки формы сработает в штатном режиме, активирует тег, и отправит данные о достигнутом событии в аналитические инструменты:

Событие отправилось в аналитику несмотря на то, что e-mail введен неверно

Это будет происходить даже несмотря на то, что у текущей формы присутствует базовая проверка на корректность ввода информации в поля, в том числе по длине символов (валидация на стороне клиента):

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

Триггер Google Tag Manager все равно может сработать и передать недостоверную информацию в счетчики аналитики. Например, такая ситуация часто встречается при работе стандартного триггера типа Отправка формы, когда на вашем сайте есть форма с тегом <form> и кнопкой submit:

<form action="URL">
...
<input type="submit">
</form>

...

</form>

Даже нажатие на кнопку Отправить без заполнения полей формы может зарегистрировать событие, а с ним произойти активация тега и фиксирование конверсии. Это касается и других способов отслеживания. Таким образом, перед отправкой события необходимо проверить заполнение данных формы в корректном формате, чтобы пользователи вводили информацию не как хотели или вовсе игнорировали какие-то поля, а делали это как требуется. Только в случае успешного заполнения нужных вам полей формы триггер GTM будет срабатывать и отправлять данные в Яндекс.Метрику, Google Analytics 4, VK Рекламу и другие инструменты.

Самые распространенные сообщения о некорректном заполнении данных формы такие:

обязательное поле (нельзя оставить его пустым);
корректный ввод данных в определенное поле (например, номер телефона в формате +7 xxx-xxx-xx-xx);
определенный формат данных (в пароле должна быть как минимум одна заглавная буква, один символ, одна цифра, и он должен быть от 8 до 30 символов).

Все это называется валидацией формы. По мере ввода, браузер и/или сервер проверяют данные, чтобы определить, соответствуют ли они требуемому формату. В связи с этим валидация формы может проводиться двумя способами:

на стороне сервера (выполняется на сервере);
на стороне клиента (выполняется в браузере);

Есть еще третий вариант - это проверка заполнения полей с помощью диспетчер тегов Google. Но он является частью JavaScript-валидации и будет рассмотрен в самом конце руководства.

Валидация на стороне клиента

Под валидацией на стороне клиента подразумевается проверка, совершаемся в браузере пользователя перед отправкой формы на сервер. Она помогает пользователю быстро обнаружить ошибки при заполнении данных и исправить их. На текущий момент существует два типа валидации на стороне клиента - встроенная валидация форм и JavaScript-валидация.

1. встроенная валидация форм

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

Практическая каждая форма на сайте внутри себя содержит элементы формы. Элементы формы - это различные типы элементов ввода, такие как текстовые поля, флажки, переключатели, кнопки отправки и многое другое. Самыми распространенными элементами формы являются элементы <input>.

Элемент <input> отображается несколькими способами, в зависимости от атрибута type:

<input type="text"> - однострочное поле ввода текста;
<input type="password"> - поле с паролем;
<input type="radio"> - переключатель (для выбора одного из многих вариантов);
<input type="range"> - ползунок;
<input type="checkbox"> - флажок;
<input type="file"> - поле для отправки файла (file);
<input type="search"> - поле для поиска;
<input type="tel"> - поле для ввода телефона;
<input type="email"> - поле для ввода электронной почты;
<input type="reset"> - кнопка для очистки формы;
<input type="submit"> - кнопка для отправки формы;
и другие.

Также существуют элемент <textarea>, который представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от тега <input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер. Таким образом, 99% всех форм в интернете для ввода какой-либо информации используют элементы двух типов - <input> и <textarea>.

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

Просмотреть код

Вам откроется консоль разработчика в браузере (клавиша F12 для Google Chrome) с уже выделенным/проинспектированным полем:

Инспектирование конкретного поля

Как видите, у поля Имя тип text - это текстовое поле для ввода информации согласно HTML-разметке. У других полей вашей формы могут быть другие типы.

Помимо этого, поля имеют различные атрибуты. Например:

placeholder - задает короткую подсказку, описывающую ожидаемое значение поля ввода (примерное значение или краткое описание ожидаемого формата);

<textarea placeholder="Ваше сообщение"></textarea></p>

1	<textarea placeholder="Ваше сообщение"></textarea></p>

required - указывает, что перед отправкой формы необходимо заполнить поле ввода;

<input type="text" name="username" required>

1	<input type="text" name="username" required>

minlength и maxlength - указывают минимальное и максимальное количество символов, которые можно ввести в поле;

<input type="text" name="name" minlength="2" maxlength="32">

1	<input type="text" name="name" minlength="2" maxlength="32">

min и max - задают минимальное и максимальное значение для полей с числами и датами;

<input type="number" name="age" min="18" max="116">
<input type="date" name="date" min="1923-04-01" max="2023-04-30">

1 2	<input type="number" name="age" min="18" max="116"> <input type="date" name="date" min="1923-04-01" max="2023-04-30">

pattern - указывает регулярное выражение, по которому проверяется значение поля ввода при отправке формы;

<input type="phone" name="phone" pattern="^\+7[1-9]{10}$">

1	<input type="phone" name="phone" pattern="^\+7[1-9]{10}$">

value - задает начальное значение для поля ввода;

<input type="submit" value="Отправить">

1	<input type="submit" value="Отправить">

и другие.

Если данные, введенные в поле формы, соответствуют правилам перечисленных выше атрибутов, они считаются валидными, если нет - не валидными.

Для того, чтобы узнать какие HTML-атрибуты заданы у конкретного поля формы, вам нужно сделать точно так же - поставить курсор мыши внутрь самого поля, нажать правой кнопкой мыши и выбрать пункт Просмотреть код. Вам откроется консоль разработчика с уже выделенным/проинспектированным полем, а рядом с типом будут перечислены все атрибуты, которые присутствуют у данного HTML-элемента:

Пример поля с HTML-атрибутами

Как видно из примера, у поля с типом e-mail (поле для ввода электронной почты) есть два HTML-атрибута:

required - указывает, что перед отправкой формы необходимо заполнить поле ввода;
placeholder - задает короткую подсказку (в данном примере текст E-mail).

Соответственно, если я не заполню поле E-mail, то система выдаст предупреждение:

Заполните это поле

Для ваших полей формы могут иметь другие значения HTML-атрибутов. Если их нет, то нужно попросить разработчика добавить атрибуты на соответствующие элементы, либо же использовать иной способ валидации форм - JavaScript-валидацию.

2. JavaScript-валидация

Дополнительно к HTML-атрибутам (или вместо) для полей ваших форм имеет смысл настроить валидацию с помощью JavaScript. На этом языке программирования пишутся функции, которые проверяют данные и выводят сообщение, если пользователь неправильно заполнил поле, до момента отправки формы на сервер. Такие подсказки можно показывать как в момент набора текста, так и при попытке отправить форму.

Например, на одном из моих тестовых проектов у поля для написания отзывов нет никаких HTML-атрибутов. Но если пользователь введет текст отзыва менее 25 и более 1000 символов, ему отобразится такое сообщение:

Специальное оповещение на JavaScript

Это и есть JavaScript-валидация, когда используется программирование и определенная логика срабатывания в браузере клиента перед отправкой формы на сервер. К сожалению (а может и к счастью), какой-то единой JS-функции для проверки валидации для всех сайтов и форм в интернете, которую можно было бы приложить в этом руководстве, не существует, поэтому для вашей конкретной задачи и формы вам нужно написать свое собственное решение. Попросите это сделать вашего разработчика. Как правило, самые популярные CMS-движки (WordPress, OpenCart, Tilda, 1С-Битрикс, Joomla и другие) имеют встроенные валидаторы.

Но если ваш сайт самописный, то вы можете попробовать воспользоваться готовыми решениями от сторонних разработчиков, коих в интернете очень много. Просто введите в поиске запрос валидация формы javascript и возьмите самое подходящее:

Поиск готовых решений JavaScript-валидаций

Примечание: вы можете попробовать использовать готовые библиотеки PristineJS, Formik, Validator.js и другие.

Подробнее о валидации форм на стороне клиента читайте в официальной документации Mozilla.

Валидация на стороне сервера

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

Реализация валидации на стороне сервера обычно осуществляется с помощью серверных языков программирования, таких как PHP, Python, Ruby, Java и других. Вот хороший пример с обработкой форм на PHP. Обязательно посмотрите это видео, чтобы иметь представление о том, как осуществляется проверка на стороне сервера:

Как видите, такая работа выполняется на бэкенде и требует навыков программирования, а, следовательно, практически всегда ложится на плечи разработчика. Именно он должен продумать способы проверки заполнения полей форм - обязательные, на длину текста, на формат данных (телефон, e-mail), на уникальность (чтобы пользователей с одним и тем же логином не было в базе) и т.д.

Если формат введенных данных корректен, информация отправиться на сервер или будет сохранена во внутреннюю базу данных (если требуется) организации. В противном случае будет выведено сообщение с описанием того, что нужно исправить, позволяя ввести данные снова.

Валидация форм на стороне сервера важна, потому что позволяет защитить сайт от злонамеренных действий пользователей, таких как ввод некорректных данных, SQL-инъекций, XSS-уязвимостей и других атак. Проводить ее уместно почти всегда, даже если вы уже выполнили валидацию на стороне клиента с помощью HTML-атрибутов и JavaScript.

Однако описанные выше способы валидации (как на стороне клиента, так и на стороне сервера) не отменяют тех действий, которые вам необходимо выполнить в Google Tag Manager.

Валидация с помощью Google Tag Manager

Создание проверки формы на сайте является хорошей практикой, поскольку она гарантирует, что пользователь заполняет информацию правильно. Это экономит время, затрачиваемое на ожидание ответа HTTP, а также избавляет сервер от обработки неправильного ввода данных.

Но даже при валидации на стороне клиента с использованием HTML-атрибутов или функции JavaScript диспетчер тегов Google по умолчанию запускает тег отслеживания отправки формы всякий раз, когда она отправляется, независимо от неполных входных данных формы, а иногда и пустых форм. Стандартный триггер Отправка формы срабатывает даже при простом нажатии на кнопку, у которой имеется тип <input type="submit">. Результат - ложное срабатывание и ложная отправка события (=конверсии) в счетчики аналитики.

JavaScript-валидация и HTML-атрибуты тут не помогут. Чтобы избежать такого сценария, нужна дополнительная проверка и как минимум еще одно условие активации триггера. А поскольку в Google Tag Manager можно использовать код на JavaScript, то без программирования нам все равно не обойтись.

В качестве примера я буду выполнять валидацию для формы с тремя полями - Ваше имя, Ваш E-mail и Ваш вопрос или сообщение:

Пример формы с полями

Для этого необходимо использовать пользовательскую переменную типа Собственный код JavaScript. Перейдите в раздел Переменные и создайте ее, взяв за основу нижеприведенный код. Он гарантирует, что при отправке формы нет пустых полей, а также проверяет правильность формата ввода электронной почты и телефона:

function(){
var name = document.querySelector('CSS-селектор для имени').value;
var email = document.querySelector('CSS-селектор для email').value;
var tel = document.querySelector('CSS-селектор для телефона').value;
var message = document.querySelector('CSS-селектор для сообщения').value;
var emailRegExp =/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/i;
var telRegExp = /^\+?[0-9()\- ]{10,20}$/;

if(name.length > 0 && message.length > 10 && emailRegExp.test(email) && telRegExp.test(tel)) {
return true;
} else {
return false;
}
}

function(){

var name = document.querySelector('CSS-селектор для имени').value;

var email = document.querySelector('CSS-селектор для email').value;

var tel = document.querySelector('CSS-селектор для телефона').value;

var message = document.querySelector('CSS-селектор для сообщения').value;

var emailRegExp =/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/i;

var telRegExp = /^\+?[0-9()\- ]{10,20}$/;

if(name.length > 0 && message.length > 10 && emailRegExp.test(email) && telRegExp.test(tel)) {

return true;

} else {

return false;

}

, где вместо CSS-селектор ... вам необходимо указать селекторы HTML-элементов для полей вашей формы. Подробнее о том, как их находить у конкретных элементов, смотрите в моей лекции по CSS-селекторам:

А также прочитайте несколько материалов, связанных с селекторами, поскольку без фундаментальных основ работы вам будет сложно выполнить валидацию полей для своей формы:

Чтобы извлечь значение из поля формы, необходимо проинспектировать каждый элемент формы с использованием консоли разработчика. Только теперь, выделив нужное поле формы, в инспекторе элементов нажмите на него правой кнопкой мыши и выберите Copy - Copy selector:

Копирование селектора

Благодаря этому вы скопировали селектор конкретного поля формы. Вы можете перейти на вкладку Console и вставить эту строчку кода, нажав Enter:

document.querySelector('selector').value;

1	document.querySelector('selector').value;

, где вместо selector вы вставляете ваше значение скопированного селектора.

Проверка конструкции извлечения

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

Пример переменной с селектором для конкретного поля формы

И так нужно сделать с каждым полем вашей формы.

Помимо этого измените содержимое переменной Собственный код JavaScript и оставьте в ней столько переменных, сколько полей в вашей форме. В коде выше используются четыре поля:

name - переменная для поля с именем;
email - переменная для поля с электронной почтой;
tel - переменная для поля с телефоном;
message - переменная для поля с сообщением.

Окончательный набор переменных зависит от вашей формы и может отличаться как в меньшую, так и в большую сторону. Например, для формы из моего примера таких полей всего три (Ваше имя, Ваш E-mail и Ваш вопрос или сообщение), поэтому из кода я могу удалить переменные tel и telRegExp, отвечающие за извлечение значения из поля формы и проверки его на корректный ввод с использованием регулярного выражения. У меня их попросту нет. Удалить нужно еще и условие проверки:

Редактирование шаблона переменной под свою форму

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

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

Итоговый код для моего примера в Google Tag Manager будет выглядеть так:

Итоговая переменная валидация полей

Задайте переменной название и сохраните ее.

Код переменной работает достаточно просто - сначала с вводного оператора var объявляется то количество переменных, которое присутствует в вашей форме (name, email, tel и т.д.). Если в форме присутствует электронный адрес, то объявляется переменная emailRegExp с регулярным выражением на проверку корректности ввода данных в нужном формате (с @ и т.д.). Если в вашей форме есть поле с телефоном, то так же объявляется переменная telRegExp с регулярным выражением на проверку корректности ввода данных в нужном формате. С помощью конструкций document.querySelector('selector').value извлекаются значения, которые ввел пользователь в эти поля формы.

Затем происходит проверка с помощью оператора if и нескольких условий, разделенных оператором && (И). Валидация полей по длине символов осуществляется с помощью свойства length. Если длина поля с именем name > 3 (можно задать любое другое значение) и переменная с сообщением message > 10 (можно задать собственное значение) и переменная с электронным адресом email удовлетворяет условию регулярного выражения, заданному в переменной emailRegExp, то текущее значение всей переменной собственного кода JavaScript будет true. В противном случае, если хоть одно условие проверки будет ложным, то и вся переменная CJS - Validate form примет значение false.

Вы можете проверить это с помощью режима предварительного просмотра. Активировав режим отладки GTM, откройте форму и заполните сначала все поля формы корректно. Сделайте тестовую заявку. Выбрав соответствующий триггер, откройте вкладку Variables и посмотрите какое значение приняла ваша переменная. При правильно заполненных полях формы переменная должна принять значение true:

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

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

Переменная принимает значение false если хотя бы одно поля заполнено неверно

На скриншоте выше видно, что поле e-mail не соответствует регулярному выражению из нашей проверки, поскольку электронная почта введена неправильно. Поэтому пользовательская переменная CJS - Validate form приняла значение false.

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

Триггер с дополнительным условием валидации

Сохраните изменения. Если у вас есть несколько форм, то вам нужно создать пользовательскую переменную CJS - Validate form для каждой из них на основе полей в форме, так как селекторы для каждого поля будут уникальными.

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

Прочитав это руководство, теперь вы знаете как передавать в аналитику только реальные события (=конверсии), а не пустые обращения или заявки с ложной информацией.

Метки: Google Tag Manager, JavaScript, валидация полей, триггер