Отслеживание событий интернет-магазина на Drupal в Яндекс метрике

Сервис Яндекс Метрика позволяет отслеживать различные действия пользователей на сайте, такие как: посещения определенных страниц, количество просмотров страниц, произвольные и составные события.

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

Для начала нужно настроить цели в интерфейсе сервиса Yandex Metrika, по настройке событий есть подробная документация.

Теперь все сводится к тому, чтобы добавить специальные атрибуты кнопкам или ссылкам на сайте, нажатия которых нужно отслеживать. Для Drupal 7 принцип будет общий — подсунуть в рендер-массив соответствующего элемента атрибут onclick и функцию счетчика в качестве значения. Это можно сделать с помощью Form API, но так как формы генерируются, в основном, сторонними модулями, чтоб их расковырять понадобятся дополнительные действия.

Рассмотрим их по подробнее на примере кнопок отправки формы модуля Webform, стандартных форм Ubercart и Drupal Commerce.

Для использования Form API нужно вызвать в своем модуле хук переопределения формы:

/**
 * Implements hook_form_alter().
 */
function MYMODULE_form_alter(&$form, $form_state, $form_id) {
  ...
}

Для осуществления манипуляций с формой, нам нужно знать ее идентификатор. Его можно найти в коде страницы, поиском по ключевому слову form_id.

Для Webform это будет что-то вроде webform_client_form_3222.

if ($form_id == 'webform_client_form_3222') {
  ...
}

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

drupal_set_message('<pre>' . print_r($form,true) . '</pre>');

Теперь мы можем добавить атрибут onclick с функцией метрики:

$form['actions']['submit']['#attributes']['onclick'] = "yaCounter87654321.reachGoal('callback')";

У вас будет свой номер счетчика и идентификатор цели, который вы указывали при ее создании.

Весь код целиком:

/**
 * Implements hook_form_alter().
 */
function buttonatt_form_alter(&$form, $form_state, $form_id) {
  if ($form_id == 'webform_client_form_3222') {
    //drupal_set_message('<pre>' . print_r($form,true) . '</pre>');
    $form['actions']['submit']['#attributes']['onclick'] = "yaCounter87654321.reachGoal('callback')";
  }
}

Формы Ubercart

В Ubercart каждая кнопка купить и добавить в корзину имеет свой уникальный form_id, отличающийся номером в конце, например uc_product_add_to_cart_form_104 и чтобы отслеживать их все сразу, код должен быть такой:

if (substr($form_id, 0, strlen('uc_product_add_to_cart_form')) == 'uc_product_add_to_cart_form') {
  $form['actions']['submit']['#attributes']['onclick'] = "yaCounter87654321.reachGoal('add_to_cart')";
}  

А для кнопки купить:

if (substr($form_id, 0, strlen('uc_catalog_buy_it_now_form')) == 'uc_catalog_buy_it_now_form') {
  $form['actions']['submit']['#attributes']['onclick'] = "yaCounter87654321.reachGoal('buy_it_now')";
}

Код для многостраничной формы оформления заказа:

if ($form_id == 'uc_cart_view_form') {
  $form['actions']['checkout']['checkout']['#attributes']['onclick'] = "yaCounter87654321.reachGoal('checkout')";
}
elseif ($form_id == 'uc_cart_checkout_form') {
  $form['actions']['continue']['#attributes']['onclick'] = "yaCounter87654321.reachGoal('step_1')";
}
elseif ($form_id == 'uc_cart_checkout_review_form') {
  $form['actions']['submit']['#attributes']['onclick'] = "yaCounter87654321.reachGoal('step_2')";
}

Формы Drupal Commerce

Идентификаторы форм добавления в корзину в Drupal Commerce выглядят примерно так: commerce_cart_add_to_cart_form_278, и так же отличаются цифрой в конце

if (substr($form_id, 0, strlen('commerce_cart_add_to_cart_form')) == 'commerce_cart_add_to_cart_form') {
  $form['submit']['#attributes']['onclick'] = "yaCounter87654321.reachGoal('add_to_cart')";
}

Кнопка оформления заказа в корзине (форма имеет идентификатор views_form_commerce_cart_form_default) принимать атрибут отказалась, по непонятным причинам. Хотя код должен быть примерно таким:

if ($form_id == 'views_form_commerce_cart_form_default') {
  $form['actions']['checkout']['#attributes']['onclick'] = "yaCounter87654321.reachGoal('go_to_checkout')";
}

Ну и код для многостраничной формы оформления заказа:

if ($form_id == 'commerce_checkout_form_checkout') {
  $form['buttons']['continue']['#attributes']['onclick'] = "yaCounter87654321.reachGoal('checkout')";
}
elseif ($form_id == 'commerce_checkout_form_shipping') {
  $form['buttons']['continue']['#attributes']['onclick'] = "yaCounter87654321.reachGoal('step_1')";
}
elseif ($form_id == 'commerce_checkout_form_review') {
  $form['buttons']['continue']['#attributes']['onclick'] = "yaCounter87654321.reachGoal('step_2')";
}

С одной стороны, ничего сложного в этом нет, но даже имея опыт работы с Form API, мне понадобилось какое-то время на поиск ключей массивов для определения кнопок. Вот я и решил записать их, чтобы не тратить его в следующий раз, а заодно и поделиться с сообществом.