Отслеживание событий Google Analytics в Drupal формах на AJAX

Решили, значит, на работе мы отследить почему у нас слабо работает контактная форма на одном из сайтов. При помощи Google Analytics и уверенного знания Drupal Forms API можно воистину творить чудеса: получать информацию о количестве нажатий на submit-кнопку, об ошибках валидации и т.д. А для большего веселья на анализ мы взяли форму на AJAX'e.

Универсальное решение для подобного рода задач вы вряд ли найдете, поэтому с большой долей вероятности придется писать свой модуль. Итак, для начала нам потребуется:

  • установить Drupal модуль Google Analytics;
  • настроить модуль - достаточно подставить в настройках номер счетчика;
  • создать свой модуль и подобраться к форме, события которой будем отлавливать.

Для трекинга событий создадим в папке с модулем новый файл analytics.js и забросим туда следующий код:

  1. (function ($) {
  2. $.fn.analyticsTrack = function(data) {
  3. // Google Analytics Event tracker.
  4. _gaq.push(['_trackEvent', 'Test Form', 'Click', data]);
  5. };
  6. })(jQuery);

Немного о передаваемых параметрах функции _gaq.push:

  • '_trackEvent' - сообщает Google Analytics о том, что мы передаем событие (оставляем как есть);
  • 'Test Form' - название категории события (называем как удобно);
  • 'Click' - название действия события (называем как удобно);
  • data - этим параметром передается ярлык события (передаем что угодно).

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

Обработка Drupal формы на AJAX

На этом JS-часть заканчивается, дело остается за Drupal API. Представленный ниже код был взят из реального проекта, функции переименованы, лишнее удалено.

  1. /**
  2.  * Implements hook_form_FORM_ID_alter().
  3.  */
  4. function angarsky_module_form_contact_site_form_alter(&$form, &$form_state, $form_id) {
  5. // Описываем wrapper для нашей формы.
  6. $form['#ajax-class'] = drupal_html_class('angarsky-module-contact-site-wrapper');
  7. $form['#prefix'] = '<div class="' . $form['#ajax-class'] . '">';
  8. $form['#suffix'] = '</div>';
  9.  
  10. // Описываем AJAX для кнопки submit'a.
  11. $form['actions']['submit']['#ajax'] = array(
  12. 'callback' => 'angarsky_module_contact_form_ajax_callback'
  13. );
  14.  
  15. // Дополнительный обработчик submit'а формы.
  16. $form['#submit'][] = 'angarsky_module_contact_form_submit_callback';
  17.  
  18. // Подключаем JS.
  19. $module_path = drupal_get_path('module', 'angarsky_module');
  20. $form['#attached']['js'][] = $module_path . '/js/analytics.js';
  21. }

Остается описать используемые callback-функции для AJAX и Submit.

  1. /**
  2.  * Submit callback.
  3.  */
  4. function angarsky_module_contact_form_submit_callback($form, &$form_state) {
  5. $form_state['rebuild'] = TRUE;
  6. }
  7.  
  8. /**
  9.  * AJAX callback.
  10.  */
  11. function angarsky_module_contact_form_ajax_callback($form, &$form_state) {
  12. // Событие по умолчанию.
  13. $ga_event = 'form-click';
  14.  
  15. if ($form_state['executed']) {
  16. // Успешная отправка формы.
  17. $ga_event = 'form-success';
  18. }
  19.  
  20. $commands = array();
  21. $selector = '.' . $form['#ajax-class'];
  22. $commands[] = ajax_command_replace($selector, drupal_render($form));
  23. $commands[] = ajax_command_prepend($selector, theme('status_messages'));
  24. $commands[] = ajax_command_invoke($selector, 'analyticsTrack', array($ga_event));
  25.  
  26. return array('#type' => 'ajax', '#commands' => $commands);
  27. }

Таким образом, данным кодом мы отслеживаем 2 типа событий: "форма успешно отправлена" и "форма не прошла валидацию". При желании можно трекать вплоть до названий полей, которые не прошли валидацию - вся информация будет попадать в Google Analytics. Ну а далее вы можете строить отчеты, создавать цели и улучшать конверсию!

Комментарии

Аватар пользователя Прохожий
Прохожий

Скажите, а в какую сторону копать,если:
1. Есть выведена на страничке форма создания материала
2. Есть код Аналитикс Универсал вида:

function onCheckoutOption(2, Payment) {
dataLayer.push({
'event': 'checkoutOption',
'ecommerce': {
'checkout_option': {
'actionField': {'step': 2, 'option': Payment}
}
}
});
}

Как навешать этот код на кнопку отправки формы?

Аватар пользователя angarsky
angarsky
Вообще ничего не понял. Читайте материал, вникайте и пробуйте.

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

      888   .d8888b.       d8888   888      
888 d88P Y88b d8P888 888
888 888 888 d8P 888 888
.d88888 888 d8P 888 888
d88" 888 888 88888 d88 888 888
888 888 888 888 8888888888 888
Y88b 888 Y88b d88P 888 888
"Y88888 "Y8888P88 888 88888888


Зарегистрируйтесь для добавления материалов без проверки.