Если у вас стоит задача отслеживать эффективность/корректность заполнения формы, состоящей из нескольких полей, этот скрипт вам поможет. Это позволяет записывать, в какой последовательности пользователь взаимодействовал с полями формы, прежде чем покинуть страницу.
Вот код скрипта, его необходимо опубликовать с помощью Google Tag Manager на странице с интересующей вас формой:
<script>
(function() {
var formSelector = 'form'; // Form selector
var history = [];
var i;
var checkSubmit = function() {
i = window.dataLayer.length - 1;
while (i > -1) {
if (window.dataLayer[i]['event'] === 'gtm.formSubmit') {
return true;
}
i--;
}
};
window.addEventListener('beforeunload', function() {
if (history.length && !checkSubmit()) {
var label = history.join(' > ');
window.dataLayer.push({
'event': 'UAevent',
'eventCategory': 'Behaviour',
'eventAction': 'Form Actions',
'eventLabel': label
});
}
});
document.querySelector(formSelector).addEventListener('change', function(e) {
var stage = e['target'].getAttribute('name').replace('RegistrationForm', '');
if (history.length == +0) {
history.push(stage);
}
if ((history[history.length - +1] != stage) && (history.length > +0)) {
history.push(stage);
}
});
})();
</script>В примере у нас есть форма, элементы которой имеют name атрибут, подобный name="RegistrationForm[email]". И мы отслеживаем, когда пользователь изменяет эти элементы, то есть он что-то вводит, тычет, выбирает и т.д.
Далее скрипт ожидает beforeunload события, то есть посетитель покидает страницу, и сбрасывает историю взаимодействий с полями в GA.
В отчете о событии мы увидим что-то вроде этого:
| Event Label | Total Events |
|---|---|
| [confirm] | 34448 |
| [email] > [name] > [confirm] | 9342 |
| [email] > [name] | 3945 |
| [name] > [confirm] | 2559 |
| [confirm] > [name] | 1491 |
| [email] | 1469 |
| [name] | 1298 |
| [name] > [email] | 680 |
| [email] > [name] > [email] | 569 |
| [confirm] > [email] > [name] | 303 |
Этого уже должно быть достаточно, чтобы вы сформировали некоторые гипотезы о существовании в виде препятствий для ее нормального заполнения.
