Analytics
Сейчас в сети: 395
Сейчас в сети: 395
Вопросы настройки тегов, правила и макросы, администрирование GTM
Подсказки
star_border
Ответить

Отслеживание отправки форм ajax GTM - настройка фильтра Form ID

Студент ✭ ✭ ✭

Доброго времени суток!

 

Проблема: не срабатывает фильтр Form ID при настройке триггера или тега

 

GTM.jpg

Отправка формы происходит после валидации jquery.validator.

 

Весь JS формы:

    $.validator.setDefaults({
        submitHandler: function(form) {
            var thisForm = $(form);
            submitBtn = thisForm.find('button[type="submit"]');
            submitBtn.attr('disabled', 'disabled');
            $.ajax({
                type: "POST",
                url: thisForm.attr("action"),
                data: thisForm.serialize(),
                success: function() {
                    dataLayer.push({'event': 'formSubmit'});
                    // tro-lo-lo
                }
            }).done(function() {
                thisForm.find("input:not([type=hidden], [type=radio])").val("");
                submitBtn.removeAttr('disabled', 'disabled');
            });
            return false;
        }
    });
    $.validator.addMethod('regexp', function(value, element, regexp) {
        var re = new RegExp(regexp);
        return this.optional(element) || re.test(value);
    }, "Некорректно");
    $('.form').each(function () {
        $(this).attr('id');
        $(this).validate({
            debug: false,
            onfocusout: true,
            onKeyUp: true,
            rules: {
                name: {
                    // required: true,
                    minlength: 2,
                    regexp: /^[А-ЯЁа-яё\s]*$/
                },
                msg: {
                    required: true
                },
                phone: {
                    required: true,
                    regexp: /^\+\d{1}\(\d{3}\)\d{3}-\d{2}-\d{2}$/
                }
            },
            messages: {
                name: {
                    required: "Введите имя",
                    minlength: $.validator.format( "Не меньше {0} символов" ),
                    regexp: "Только кириллица"
                },
                msg: {
                    required: "Введите сообщение"
                },
                phone: {
                    required: "Введите телефон",
                    regexp: "Некорректно"
                }
            },
            wrapper: "div",
            errorPlacement: function(error, element) {
                if(element.siblings('.errors_block').length>0){
                    element.siblings('.errors_block').html(error[0].textContent);
                }else{
                    element.after('<span class="errors_block">'+error[0].textContent+'</span>');
                }
            },
            success: function(element) {
                if(element.siblings('.errors_block').length>0){
                    element.siblings('.errors_block').remove();
                }
            }
        });
    });

После успешной проверки и отправки данных, генерируем событие для GTM:

 

                success: function() {
                    dataLayer.push({'event': 'formSubmit'});
                    // tro-lo-lo
                }

В триггере настроен фильтр по ID формы:

 

trigger.jpg

 

Событие работает, но фильтр не срабатывает - undefined ((((     :

filter.jpgvariables.jpg

 

Пожалуйста помогите разобраться:

Как передать ID формы в dataLayer или куда надо, что бы тег сработал?

1 Ответ экспертаverified_user

Утвержденные решения
Лучший ответ.
Решение
Утвердил автор темы Дмитрий П
Ноябрь

Re: Отслеживание отправки форм ajax GTM - настройка фильтра Form ID

Студент ✭ ✭ ✭

Сам нашел решение:

success: function() {

                    dataLayer.push({'event': 'formSubmit', 'formId': thisForm.attr('id')});

//Здесь создал свойство - formId

                }

Получил это:

1.jpg

 

Затем настройка триггера:

2.jpg

 

Здесь наименовываем переменную по названию ID

 

В значении переменной указываем наше событие:

3.jpg

 

Теперь тег срабатывает.

 

В итоге получаем:

  1. Один код валидации на несколько форм
  2. Один триггер GTM на несколько форм, каждой форме – одна переменная
  3. Получаем индивидуальный тег на каждую форму, не раздувая кода

 

Просмотреть решение в исходном сообщении


Все ответы

Отслеживание отправки форм ajax GTM - настройка фильтра Form ID

Ведущий участник

Добрый вечер, Дмитрий!

 

Уберите из триггера условие FormID. Оно Вам не нужно.




С уважением,
Анатолий

Отслеживание отправки форм ajax GTM - настройка фильтра Form ID

Студент ✭ ✭ ✭

Да, но тогда по какому условию определить с какой формы были отправлены данные?

Накопировать триггеров, тегов?

Создать каждой форме свою валидацию?  - это же не оптимально!

Это JS (как в форме, так и в GTM), и в нем возможно что угодно. Я не разработчик JS.

 

 И прошу помочь решить проблему, как её решали бы разработчики, что бы не утяжелять код JS.

Отслеживание отправки форм ajax GTM - настройка фильтра Form ID

Ведущий участник

Я сам тоже не разработчик и не программист.

 

У вас у каждой формы есть ID. Функция, которая вызывает dataLayer.push() эти ID знает. Я бы добавил еще один параметр в dataLayer.push() и по нему определял какая форма отправилась. Например,

 

dataLayer.push({
'event': 'formSubmit',
'MyFormId': '87g29b23rbf'
});

 

Забираете значение из MyFormId в переменную и далее распоряжаетесь.




С уважением,
Анатолий

Отслеживание отправки форм ajax GTM - настройка фильтра Form ID

Студент ✭ ✭ ✭

Анатолий, спасибо))) я с этого примерно и начинал. А если dataLayer.push() знает ID формы, то как вывести его в видимость тега (фильтр)?

 

Мои мысли:

dataLayer.push() декларируется в теле валидации.

Валидация используется для нескольких форм с разными ID.

Соответственно при отправке данных в любой форме будет возникать часть объекта - 'MyFormId': '87g29b23rbf', что в корне отличается от ожидаемого, т.к. не сможем определить какая именно форма была отправлена.

 

Что-то подобное имею ввиду:

dataLayer.push({
'event': 'formSubmit',
'MyFormId': $(this).attr('id')
});

 

Но правильно написать код не могу/умею.

 

Ребята кто-нибудь разбирающийся в JS и GTM - отзовитесь!

 

 

Отслеживание отправки форм ajax GTM - настройка фильтра Form ID

Ведущий участник

Дмитрий, я это и имел ввиду, что Вы динамически подставляете ID формы)

Код 

dataLayer.push({
'event': 'formSubmit',
'MyFormId': $(this).attr('id')
});

 

Не работает?




С уважением,
Анатолий

Отслеживание отправки форм ajax GTM - настройка фильтра Form ID

Студент ✭ ✭ ✭

Нет, и попробовал разные вариации.

 

Попросил помощи на Github в репозитории jquery-validation, может ребята-разработчики что-то ответят.

Лучший ответ.
Решение
Утвердил автор темы Дмитрий П
Ноябрь

Re: Отслеживание отправки форм ajax GTM - настройка фильтра Form ID

Студент ✭ ✭ ✭

Сам нашел решение:

success: function() {

                    dataLayer.push({'event': 'formSubmit', 'formId': thisForm.attr('id')});

//Здесь создал свойство - formId

                }

Получил это:

1.jpg

 

Затем настройка триггера:

2.jpg

 

Здесь наименовываем переменную по названию ID

 

В значении переменной указываем наше событие:

3.jpg

 

Теперь тег срабатывает.

 

В итоге получаем:

  1. Один код валидации на несколько форм
  2. Один триггер GTM на несколько форм, каждой форме – одна переменная
  3. Получаем индивидуальный тег на каждую форму, не раздувая кода