Как настроить отслеживание событий в Google Analytics при отправке формы?

Question

Im пытается отслеживать, когда пользователь нажимает кнопку отправки в форме контакта.
URL страницы не изменяется, ее статичность.
Невозможно отследить URL-адрес после отправки, единственный способ - отслеживать, когда пользователь нажимает кнопку отправки.

Нужно ли мне редактировать свою учетную запись аналитики?
Где я могу добавить дополнительный javascript?
UA установлен правильно (analytics.js)
Я новичок в GA и javascript, поэтому, пожалуйста, сломайте это для меня.

Благодаря

Answer 1

I can't track a differnt URL after submission, the only option would be to track when a user hits the submit button. 

Это немного нелогичным. Даже когда Url не меняется, возможно, что-то происходит - прежде чем вы его отправите, возможно, есть какая-то форма проверки, и есть какое-то действие за сценой, чтобы отправить туда форму, например, ajax-вызов.

Вы можете прикрепить событие отслеживания к отправке обработчика:

<form onSubmit="ga('send','event','category','action','label')"> 
<input type="text" id="text" name="text"> 
<input type="submit"> 
</form> 

Однако это было бы просто сказать, что кто-то нажал на кнопку отправить, не если они заполнили форму правильно или если форма на самом деле было отправлено ,

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

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

<form onSubmit="validate()"><input type="text" id="text" name="text"><input type="submit"></form> 

<script> 
function validate() { 
var test = document.querySelector('#text').value 
if(test = "") { 
    ga('send','event','Form','Submit','Submitted, but not filled in'); 
    return false; 
} 
ga('send','event','Form','Submit','Submitted with correct values'); 
return true; 
} 
</script> 

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

Еще больше спекуляций. Если ваша форма отправлена ​​без перезагрузки страницы, она использует, вероятно, ajax-вызов, и существует огромная вероятность, что использует jQuery (я говорю, что, поскольку a) это действительно возможно, и b) постройте пример в jQuery. То же самое можно получить в других библиотеках или в родной JS, но пример приведет к ошибке, если вы не используете jQuery).

У jQuery есть вещь, называемая глобальными обработчиками ajax. «Глобальный» означает, что они не являются обратными вызовами для конкретного действия, они подключаются к jQuerys ajax «механизму» всякий раз, когда делается вызов функции ajax. Следующие могут работать, если у вас есть только одно событие aja на странице (иначе вам нужна логика, чтобы различать различное событие ajax, например, проверяя URL-адрес, на который они отправляются) и позволяет вам отслеживать, успешно ли был вызван вызов ajax, например, когда ваши данные формы были отправить на сервер и запрос возвращает код статуса 2xx:

$(document).ajaxSuccess(function() { 
ga('send','event','Form','Submit','Yeah, form data sent to the server'); 
}); 

Однако это не говорит вам, если данные были обработаны правильно.Для этого необходимо, чтобы сервер испускает сообщение об успешном выполнении и проверьте ответ:

$(document).ajaxSuccess(function(event, xhr, settings) { 
    if (settings.url == "formprocessor.php") { 

     if(xhr.responseText.indexOf("success") > -1) { 
     ga('send','event','Form','Response Received','Form data processed '); 
     } else { 
     ga('send','event','Form','Response Received','Form data NOT processed '); 
     } 
    } 
}); 

Глобальный обработчик Ajax события прилагаются к документу - вы можете положить, что в любом месте на странице, он не будет делать ничего, если только Было вызвано событие ajax.

Опять же, это не производственный код. Не пытайтесь копировать и вставлять.

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