Отслеживание заполнения форм с помощью Google Analytics

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

    Соответственно, форма — уязвимое место приема таких обращений, которое может сократить их число из-за своей неэффективности.

    Для оценки эффективности можно использовать различные методы, но сейчас мы остановимся на оценке форм с помощью системы веб-аналитики Google Analytics.

    image

    Идея данного метода взята из статьи «Use Virtual Page Views to See Which Steps Visitors Abandon From».

    В данной статье рассматривает ее применение на практике.

    Отслеживание с помощью событий в Google Analytics


    Сначала определим каким образом в Google Analytics будут поступать данные. Для этого будем использоваться метод отслеживания событий существующий в системе.

    Все данные, получаемые с форм, будут поступать в Google Analytics с помощью метода _trackEvent().

    Спецификация данного метода такова:
    _trackEvent(category, action, opt_label, opt_value)

    category (обязательно) — название для группы объектов, которые следует отслеживать

    action (обязательно) — данное свойство определяет тип взаимодействия с сайтом (клик, скачивание, просмотр и т.д.)

    label (необязательно) — дополнительные характеристики отслеживаемых событий (имя скачиваемого файла, название страницы на которой осуществилось событие и т.д.)

    value (необязательно) — целое число, которое можно использовать для предоставления численных данных об отслеживаемых событиях

    Установка кода на страницах сайта


    Пока что мы определились каким образом данные будут передаваться системе Google Analytics.

    Теперь рассмотрим откуда и как будут браться сами данные.

    Для этого используем библиотеку jQuery.

    Для передачи адреса страницы в систему веб-аналитики Google Analytics используется jquery url parser и :input Selector библиотеки jQuery.

    В итоге код обрабатывающий форму на странице будет выглядеть следующим образом:
    <script type="text/javascript">
        $(document).ready(function() {
             var currentPage = jQuery.url.attr("path");
             $(':input').blur(function () {
                 if($(this).val().length > 0){
                     pageTracker._trackEvent("Form: " + currentPage, "input_exit", $(this).attr('name'));
                 }
             });
         });
    </script>
    

    Значения событий (label) берутся из атрибута «name» полей формы.

    В тег «head» прописываем строки подключения библиотеки:



    Полученные данные в отчетах Google Analytics


    Полученные результаты можно наблюдать в отчете «Отслеживание событий» системы Google Analytics.

    Данный отчет располагается в разделе меню «Содержание»:

    image

    Перейдя в подраздел «Категории» перед нами откроется отчет содержащий список всех форм с указанием страниц, на которых они были размещены, и где были произведены действия. В данном отчете также отображается и количество событий для каждой формы.

    image

    Нажав на адрес формы можно ознакомится с отчетом, содержащим все события связанные с ней.

    image

    Ярлыки события — это те поля формы, в которых была зафиксирована активность посетителей сайта.

    Оригинальная форма имеет следующий вид:

    image

    Какие выводы можно сделать из полученных данных:
    • На основе полученных данных можно отследить какие поля формы пользователи заполняют чаще, а какие остаются незаполненными, что приводит к неотправке формы. Особенно такие данные будут полезны для форм с большим количеством полей, списков и других элементов.
    • Cравнение количества активностей зафиксированных в форме с реально пришедшими запросами через эту форму. Если видим что пользователи что-то вводят, а информация не поступает нам, то возможно что-то не так с формой и стоит ее проверить — она не работает, или частые сбои при отправке данных, например.
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 10

      +4
      Неплохо. Очень неплохо.
      Подталкивает на эксперименты.
        +2
        Хороший способ, но еще больше информации можно получить, собирая в GA еще и события об ошибках заполнения полей формы, тоже рекомендую попробовать.
          0
          Так, по-моему это для старого кода аналитикса.
          Недавно пытался прописывать схожую js-конструкцию на одном сайте — не работало.
          В новом надо что-то в духе
          _gaq.push(['_trackEvent', 'blabla']);
            0
            Это зависит от того, какую версию кода GA используете. Если на сайте установлен асинхронный код отслеживания, то да, следует использовать _gaq.push.
            Если же на сайте используется обычная версия, то работает все по старому.
              0
              В асинхронной версии будет использоваться такая конструкция:
              _gaq.push(['_trackEvent', 'category', 'action', 'opt_label', opt_value]);

              Более подробно тут — code.google.com/intl/ru/apis/analytics/docs/tracking/asyncMigrationExamples.html
                0
                короче просто вставляем в ..

                <script type=«text/javascript» src=«code.jquery.com/jquery-1.4.2.min.js»></script>
                <script type=«text/javascript»>
                $(document).ready(function() {
                var currentPage = jQuery.url.attr(«path»);
                $(':input').blur(function () {
                if($(this).val().length > 0){
                _gaq.push(['_trackEvent', «Form: » + currentPage, «input_exit», $(this).attr('name'));
                }
                });
                });
                </script>
                  0
                  там где src = http исчезло…
              0
              Хмм, на событие можно вешать что угодно? Интересная замена mc.yandex.ru ))
                0
                В принципе да, какие данные передадите, такие и будут отображаться потом в отчетах. Можно подсчитывать хоть количество скачиваний файла, хоть количество нажатий на кнопку «Play» во flash-плеере.
                0
                Очень хорошая реализация, жаль что требует значительного времени на настройку, веб-формы GA не определяются автоматом.

                Веб-формы сами по себе влияют на конверсию больше остальных факторов вместе взятых.

                Only users with full accounts can post comments. Log in, please.