Подсчитываем количество нажатий на кнопку

Я думаю, многим владельцам сайтов интересно, какой элемент на сайте более эффективен. На многих сайтах конверсия засчитывается при переходе по какой-либо ссылке или нажатии на какую-либо кнопку (например, «Купить» или «Записаться»). Таких кнопок на сайте может быть несколько и иногда хочется узнать, сколько человек нажало на каждую конкретную кнопку. По таким данным можно уже принять решение об эффективности тех или иных мер продвижения сайта.

Предположим, что у нас есть две кнопки на странице — одна красная, вторая зеленая.

<a href="/download/" class="btn green">Скачать инструкцию</a>
...
<a href="/download/" class="btn red">Присоединиться к программе</a>

Настроим подсчет нажатий на эти кнопки.

Перво-наперво создадим два ТВ-параметра: redButton и greenButton. В эти ТВ-параметры мы и будем сохранять количество нажатий на соответствующие кнопки.

Теперь для кнопок на странице установим счетчик. Добавляем в конец страницы следующий код (используем JQuery, так что не забудьте его подключить):

<script type="text/javascript">
    $(document).on('click', '.btn', function() {
      $.ajax({
        type: 'POST',
        url: '[[*uri]]',
        data: 'url='+$(this).attr('href')
          +'&action=countButton&but='
          +$(this).attr('data-btntype'),
        success: function(msg){
          msg = JSON.parse(msg);
          window.location.href = msg.url;
        }
      });
      return false;
    });
</script>

А кнопкам добавим новый атрибут, по которым скрипт будет понимать, что именно засчитывать:

<a href="/download/" class="btn green" data-btntype="greenButton">Скачать инструкцию</a>
...
<a href="/download/" class="btn red" data-btntype="redButton">Присоединиться к программе</a>

Теперь при каждом клике на ту или иную кнопку, сначала будет отправляться AJAX-запрос, в котором будут переданы параметры нажатой кнопки. Нам осталось написать сниппет, который будет обрабатывать эти параметры и сохранять количество нажатий. Используем совет Василия Наумкина по работе с AJAX в MODX Revolution — создаем сниппет AJAX и размещаем его в начале страницы:

<?php
if ($_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {return;}
$action = $_POST['action'];
if (empty($action)) {return;}
$res = '';
switch ($action) {
  case 'countButton':
    $resource = $modx->getObject('modResource', $modx->resource->id);
    // Получаем предыдущее значение счетчика
    $count = $resource->getTVValue($_POST['but']) + 1;
    // Устанавливаем новое значение
    $resource->setTVValue($_POST['but'],$count);
    $resource->save();
    // Очищаем кеш ресурса, чтобы изменения отобразились сразу
    $resource->_contextKey = $resource->get('context_key');
    $cache = $modx->cacheManager->getCacheProvider(
             $modx->getOption('cache_resource_key', null, 'resource'));
    $key = $resource->getCacheKey();
    $cache->delete($key, array('deleteTop' => true));
    $cache->delete($key);
    // Возвращаем URL, по которому нужно отправить пользователя
    $res = $modx->toJSON(array('url' => $_POST['url']));
}
if (!empty($res)) {
  die($res);
}

Теперь каждый клик по кнопкам будет записан в соответствующий ТВ-параметр ресурса. Эту информацию можно вывести для админов прямо рядом с самой кнопкой:

<a href="/download/" class="btn green"
  data-btntype="greenButton">Скачать инструкцию
  [[!+modx.user.id:memberof=`Administrator`:then=`([[*greenButton]])`:else=``]]
  </a>
...
<a href="/download/" class="btn red"
  data-btntype="redButton">Присоединиться к программе
  [[!+modx.user.id:memberof=`Administrator`:then=`([[*redButton]])`:else=``]]
  </a>

Таким же образом я считаю количество загрузок дистрибутива MODX в разделе Скачать MODX