Проверка валидации формы в GTM при клике

Кто работал с GTM и настраивал отслеживание форм знает, что иногда такое отслеживание не срабатывает. Это бывает по разным причинам, на которых мы не будем останавливаться. Но отслеживать как-то надо, и обычно настраивают событие на клик по кнопке "Отправить", что не совсем корректно, так как если пользователь ошибется в полях формы, то событие (и цель) все равно будут засчитаны.

Поэтому мы сделаем свою проверку валидации.
Настройка переменной для валидации
Создаем новую переменную, типа Custom JS и пишем туда следующий код:
function(){
var emailReg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
var ContactForm = jQuery('#contact');
if(ContactForm.find("#data_contact").val().length>0
&& emailReg.test((ContactForm.find("#data_email").val()))
&& ContactForm.find("#data_comments").val().length>0)
{
return true;
}
else
{
return false;
}
}
Во-первых мы используем jQuery для проверки, и если jQuery не стоит, то можно сделать отдельный тэг типа custom HTML и вставить туда код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Где правилом активации этого тэга будет All Pages.

Проверить наличие jQuery можно через консоль, нажимаете правой кнопкой мыши на сайте и выбираете пункт "Посмотреть код", затем в появившимся окне выбираете вкладку console и пишете туда:
JQuery
Если в ответ будет вот такая строчка:
function (e,t){return new x.fn.init(e,t,r)}
То все хорошо, jQuery установлен, в противном случае, создаем тэг, о котором я написал выше.

Теперь разберем скрипт валидации, первая значимая для нас строчка:
var ContactForm = jQuery('#contact');   //указываем id формы
Мы создаем переменную, которая работает с нашей формой, но чтобы определить нужную форму, нам нужно указать её идентификатор, класс или другой атрибут, что и делаем в кавычках:
'#contact'
Если у формы нет ни того, ни id ни class, то воспользовавшись jQuery селекторами составляем такой, чтобы определить нашу форму.

Например, для этой формы:
Мы можем использовать id формы — #contact или class — .conference-form или атрибут — [name = "contact"]

В следующем значимом для нас коде, происходит валидация:
ContactForm.find("#data_contact").val().length>0               
&& emailReg.test((ContactForm.find("#data_email").val()))
&& ContactForm.find("#data_comments").val().length>0
Тут логика такая же, нажимаем "Посмотреть код" на нужный нам элемент и берем id, class или другой атрибут.

Первая проверка может быть полем (элемент input) имени:
СontactForm.find("#data_contact").val().length>0

Вторая проверка должна быть поля email:
emailReg.test((ContactForm.find("#data_email").val()))

Третья на ваше усмотрение.

Данная переменная возвращает true если валидация пройдена и false если нет.
Триггер активации
Так как проверку мы реализовали самостоятельно, то триггером у нас будет Click - All Elements, куда мы добавляем проверку с id или class кнопки "Отправить", нашу новую переменную и значение true и при необходимости другие правила:


Теперь триггер будет срабатывать только если форма валидна.
Made on
Tilda