Если у вас стоит задача отследить эффективность\правильность заполнения формы состоящей из нескольких полей — вам поможет этот скрипт. Он позволяет записать в какой последовательности пользователь взаимодействовал с полями формы, прежде чем покинул страницу.

Вот код скрипта, его необходимо опубликовать с помощью 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

Этого уже должно хватить чтобы у вас образовались какие-то гипотезы о существовании в форме препятствий к её нормальному заполнению.

Ещё интересное


Добавить комментарий