Как правильно поставить яндекс-цель на успешную отправку формы?

Question

[Александр Nameless08]

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

1. Делаем валидацию формы и кнопку отправить до заполнения всех полей корректными значениями делаем неактивной. Вариант, но неужели нельзя обойтись без disabled = "true"? Тут также вопрос к валидации, если на стороне клиента js по каким-то причинам будет отключен, то все же цель сработает, а форма не отправиться.

2. Этот вариант предполагает после отправки переход на thanks-страницу. Вариант, но не всегда удобный. Плюс в том, что валидация может проходить на стороне сервера и ее никак не избежать.

3. И третий вариант это если данные отправляются ajax. По этому варианту я не нашел достаточно полной информации. В нем, вроде как, к заголовку добавляется идентификатор. Если кто знает, дайте ссылку на описание этого метода?

PS Может кто знает еще способы?

Comments

[furrya_black]

Вы хотите на момент запроса к серверу после отправки формы провалидировать данные в магическом объекте ajax запроса и реджекнуть запрос? А Ajax работает без js что ли? См свой пункт 1.

Чем не вариант не давать работать с формой вообще если js отключен?

Только не надо в 2017 про домохозяек на старых осликах или про "я отключаю джыс ибо секюрна"

Answer 1

[Алексей Скляров]

Если вы отправляете данные через AJAX (а иначе никак не выйдет, скорее всего), то запись в метрику нужно прописывать в функции success. Например:

function sendPhone(form) {
    var valid = formValidation(form);
    if (valid) {
      $('.valid_err').fadeOut();
      $(form).find('.form-send-text').css('display','none');
      jQuery.ajax({
        url: "/wp-content/themes/fordox/mail/mail.php",
        data:$(form).serialize(),
        type: "POST",
        success:function(data){
          // тут записываете добавление в метрику
          $("#mail-success").html(data).fadeIn();
          $(form).find('.form-send-text').css('display','inline-block');
          $(form).find('input[type="text"]').val('');
        },
        error:function (data){
          $('#mail-error').html(data).fadeIn();
          $(form).find('.form-send-text').css('display','inline-block');
        }
      });
    }
}