Наверх

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

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

Предположим, что у нас есть две кнопки на странице — одна красная, вторая зеленая.
<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


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

  1. Саша Друмс 02 июля 2014, 18:58 # 0
    Если очень быстро нажимать на кнопку, то очень быстро можно накрутить количество кликов. Проверил и случайно сделал +10 скачиваний дистрибутива MODX за 3 секунды и 10 быстрых кликов :-)
    1. Илья Уткин 03 июля 2014, 07:48 # +1
      Ну а как по-другому? Кнопка ведет на чужой сайт, к которому я доступа не имею, соответственно, могу считать только количество физических нажатий — не могу проконтроллировать, была ли загрузка файла или нет)

      А реальное число можно посмотреть и в метрике:


      Просто иногда хочется иметь какой-то счетчик, который можно показать посетителям.
      1. Андрей 10 января 2015, 16:16 # 0
        Почему же? Можно по IP учитывать только один клик, а остальные просто не сохранять в общее кол-во. Можно и не только по IP. Впарить юзеру куку, например.
    2. Николай 24 февраля 2015, 14:17 # 0
      Спасите!!!
      Я третий день пытаюсь сделать счетчик нажатий.
      Третий день мой мозг медленно плавится.
      Помогите прошу дайте самый простой макет в файлах. Рабочий который не обноляется при обновлении страницы. Молю вас. Help! i need somebody Help!
      1. Михаил 25 февраля 2015, 05:47 # 0
        можеть цель сделать в Яндекс.Метрике?
      2. Андрей Копп 06 сентября 2015, 13:56 # 0
        Почему счётчик только после обновления страницы выдаёт результат? Какой же это Ajax тогда? Кстати на сайте у вас также, только после обновления счётчик меняет цифру, может есть какие-нибудь наработки?
        1. Илья Уткин 07 сентября 2015, 07:34 # 0
          Есть, но у меня так и было задумано)
          1. Андрей Копп 08 сентября 2015, 12:34 # 0
            А можешь скинуть?) Уж больно надо в этой наработке, чтобы при нажатии циферка сразу менялась
            1. Илья Уткин 08 сентября 2015, 13:24 # 0
              Нужно в функции success просто менять число у кнопки. Как-то так: http://jsfiddle.net/ilyautkin/xjvcnw4o/2/

        Авторизация

        через сервис Loginza:

        Подписка или RSS

        Буду присылать новые статьи — никакого спама



        Шаблоны MODX

        1 2 Дальше »

        Объектная
        модель
        MODX