Как улучшить поведенческие факторы сайта на Drupal

Наверняка ты не раз задавался вопросом: "Как увеличить время пребывания пользователя на сайте и увеличить количество просмотров содержимого?". По просьбе читателей палю свой алгоритм улучшения поведенческих факторов для сайта на Drupal 6. По доброй традиции весь код и много непонятных слов под катом, угощайтесь.

Постановка задачи

Итак, имеем сайт с некоторым количеством контента. Чувствуем, что пользователь как-то неохотно и вяло ходит по сайту и понимаем, что нужно как-то стимулировать его интерес. Задачу подобного плана я решил самописным алгоритмом, который отбирает случайным образом контент из категории и показывает в виде всплывающего tooltip в тот момент, когда пользователь совершает ключевое действие(наступает на ловушку).

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

Смысл подобного рода улучшения поведенческих факторов отражен на скриншоте с Яндекс метрики. Зеленым обозначены внутренние переходы на некотором срезе времени.

Листинг

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

PHP

Во первых, мы должны до загрузки страницы сформировать список претендентов на показ. Как вам известно, Drupal имеет мощную таксономию и словари, которые позволяют группировать контент по каким либо признакам. Для выборки используем функцию темизации в template.php.

/* 
    @core: Drupal 6
    @location: themes -> theme folder -> template.php 
    @function: node preprocess
    @description: 
         get the range of similar nodes by taxonomy vocabulary type; 
         transport it into JSON to core settings javascript.
*/
function phptemplate_preprocess_node( &$vars ) {
 
    // Similar nodes 
    if( !$vars['page'] || !$vars['node'] || !count($vars['node']->taxonomy) ) {
      return;
    }
 
    $node = $vars['node'];
    $tids = array_keys($node->taxonomy);
    $items = array();
    $step = 0;
 
    $nodes = db_query_range("
        SELECT n.nid, n.title, COUNT(*) AS hits FROM {node} n
        LEFT JOIN {term_node} tn ON n.nid = tn.nid AND n.vid = tn.vid
        WHERE
            n.type = '%s' AND
            n.status = 1 AND
            tn.tid IN (" . db_placeholders($tids) . ") AND
            n.nid <> %d
        GROUP BY n.nid
        ORDER BY hits DESC, n.created DESC
    ", array_merge( array($node->type), $tids, array($node->nid)), 0, 15 );
 
   while( $node = db_fetch_object($nodes) ) {
    $id = $node->nid; 
    $address = url( drupal_get_path_alias( 'node/' . $id) );
    $step ++;
 
    $items[$step] = array('title' => $node->title, 'url' => $address, 'id' => $id);
  }
 
  // write to settings js
  drupal_add_js(array( 'similar' => array( 'range' => $step, 'nodes' => $items ) ), 'setting'); 
 
} // End node preprocess

Из кода понятно, что выбранный контент будет оформлен в формате JSON и встроен в тело скрипта настроек, откуда мы сможем получить данные на стороне клиента(спасибо музицирующему девелоперу за решение выборкой).

JavaScript

Далее, напишем скриптец для выборки и отброса показанных материалов. Drupal располагает великолепным API, позволяющим формировать конфигурационный JSON namespace и выводить его в теле страницы. Им мы и воспользуемся по всем правилам code style.

/* 
    Inject the similar nodes tooltip;
    require: https://github.com/x029ah/style-switch/blob/master/sc/jquery.Storage.js
*/
Drupal.behaviors.ProtonAdvertisement = function() {
  if( Drupal.settings.similar ) {
 
    //check for storage & create it if not exist
    var garbage = $.Storage.get('garbage_nodes');
 
    //check for range setting
    var range = Math.floor(Math.random() * Drupal.settings.similar.range) + 1;
 
    var similar = Drupal.settings.similar.nodes[range];     
    var similar_link = '<a href="'+ similar.url +'">' + similar.title + '</a>';
    var placeholder  = '<div id="similar"><b>Читайте также</b><br />' + similar_link + '</div>';
    $('#bottom').prepend( placeholder );
 
      //trap zones
      $('#comments, #relations, #box, .geshifilter pre:last, article p:last').hover(
        function() { 
          //storage already exist, curent node not showing before, curent node not self linking 
          if( garbage && !garbage.match(similar.id) ) {
            $.Storage.set('garbage_nodes', garbage + similar.id + '|');
            $('#similar').delay(550).show(550);       
          } 
 
          if( !garbage ) {          
            $.Storage.set('garbage_nodes', '0|' + similar.id + '|');  
            $('#similar').delay(550).show(550); 
          }     
 
        }
      );
  }
};

Данный код получает данные из региона настроек ядра и случайным образом выбирает страницу для показа. Однажды показанная страница больше не выводится, а данные о всех показах очень компактно пишутся в local storage или cookies.

Также, здесь конфигурируются селекторы для вывода tooltip и зоны-ловушки. Скрипт требует подключенного jQuery local storage плагина и может быть прописан в любой из скриптов вашей темы.

CSS

Прописали, сконфижили, осталось только оформить по вкусу и почистить кэш.

/* Similar nodes tooltip */
#similar {
  font: normal 14px Arial, Verdana, sans-serif;
  border: 4px solid #fc6;
  -moz-border-radius: 8px;
  border-radius: 8px;
  padding: 5px 15px;
  background: #CC5;
  position: fixed;
  z-index: 10000;
  display: none;
  height: 60px;
  float: right;
  bottom: 60px;
  right: 20px; 
  opacity: .6; 
}
 
#similar:hover {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out; 
  border-color: #fff;
  opacity: 1;
}
 
#similar b {
  text-shadow: -1px 0 2px #ff3;
  text-align: right;
  font-size: 15px;
  display: block;
  color: #303;
}
 
#similar a {
  border-bottom: 1px dashed #930;
  text-decoration: none;
  padding: 0 0 2px;
  color: #b22222;
}
 
#similar a:hover {
  color: #000;
}

Результат

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

Tooltip не мозолит глаза и не подрывает доверие к сайту за счет грамотной конфигурации зон срабатывания. В общем смотрите сами.