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

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

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

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

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

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

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

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

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

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

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

/**
 * Implements hook_form_FORM_ID_alter().
 */
function angarsky_module_form_contact_site_form_alter(&$form, &$form_state, $form_id) {
  // Описываем wrapper для нашей формы.
  $form['#ajax-class'] = drupal_html_class('angarsky-module-contact-site-wrapper');
  $form['#prefix'] = '<div class="' . $form['#ajax-class'] . '">';
  $form['#suffix'] = '</div>';
 
  // Описываем AJAX для кнопки submit'a.
  $form['actions']['submit']['#ajax'] = array(
    'callback' => 'angarsky_module_contact_form_ajax_callback'
  );
 
  // Дополнительный обработчик submit'а формы.
  $form['#submit'][] = 'angarsky_module_contact_form_submit_callback';
 
  // Подключаем JS.
  $module_path = drupal_get_path('module', 'angarsky_module');
  $form['#attached']['js'][] = $module_path . '/js/analytics.js';
}

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

/**
 * Submit callback.
 */
function angarsky_module_contact_form_submit_callback($form, &$form_state) {
  $form_state['rebuild'] = TRUE;
}
 
/**
 * AJAX callback.
 */
function angarsky_module_contact_form_ajax_callback($form, &$form_state) {
  // Событие по умолчанию.
  $ga_event = 'form-click';
 
  if ($form_state['executed']) {
    // Успешная отправка формы.
    $ga_event = 'form-success';
  }
 
  $commands = array();
  $selector = '.' . $form['#ajax-class'];
  $commands[] = ajax_command_replace($selector, drupal_render($form));
  $commands[] = ajax_command_prepend($selector, theme('status_messages'));
  $commands[] = ajax_command_invoke($selector, 'analyticsTrack', array($ga_event));
 
  return array('#type' => 'ajax', '#commands' => $commands);
}

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