Отслеживание событий интернет-магазина на 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, мне понадобилось какое-то время на поиск ключей массивов для определения кнопок. Вот я и решил записать их, чтобы не тратить его в следующий раз, а заодно и поделиться с сообществом.

Комментарии

12 комментариев

Не работает в drupal commerce, Проблема - вместо апострофов в html коде вот так:

onclick="yaCounter25217225.reachGoal('CART');return true;" и событие поэтому не передается

Доброго времени суток. Попробовал ваше решение для добавления атрибута метрики на кнопки Webform, но добавление вашего кода в template.php не дает результата. Подскажите данный код возможно ставится в какой либо файл самого модуля?

Приветствую. По сути тема оформления - это тоже модуль, и все хуки и функции будут работать в ней так же как в модуле. Вам надо сделать либо свой модуль и добавить хук в файл YOURMODULE.module, либо в тему оформления сайта, в файл template.php.
При этом заменить MYMODULE в названии функции на название вашего модуля или темы:

function MYMODULE_form_alter(&amp;$form, $form_state, $form_id) {
  ...
}

Если в сам файл модуля добавить
'#attributes' => array('onclick' => "yaCounterxxxxx.reachGoal('ORDER'); return true;"),
то этот атрибут добавляется ко всем кнопкам вебформ, а нужно на разные формы добавить свой атрибут

а можно таким же образом навешать код Аналикса на форму создания ноды? Он имеет такий вид, например:

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

Добрый день. Спасибо за такой вариант onclick. Но меня интересует вариант, срабатываения метрики или аналитики (не принципиально) не по клику на кнопку, а после успешной отправки

Создать свой модуль, вставить в него код из блока "Весь код целиком" и добавить или раскомментировать функцию drupal_set_message(...)