Отслеживание кликов в Laravel

   13.08.2016      

В то время, когда Google Analytics не доступен, вы можете использовать небольшой клик-трекер прямо в Laravel.

Для кого эта статья:
  • Для разработчиков на Laravel и подрастающих злодеев, работающих с данными
tl;dr
  • Отслеживание кликов в Laravel является неимоверно легким занятием, которое может обеспечить неплохую основу для вашей собственной системы аналитики в приложении.
Последние несколько месяцев Inquiri занимается разработкой CMS для поддержки сообщества участников фармацевтических исследований. Кроме других особенностей, платформа предлагает этим участникам постоянный поток сторонних статей.


У HIPAA была проблема c ограничениями возможностей от Google Analytics, поэтому нам пришлось найти другой способ для отслеживания популярности постов.
Метод ниже ориентирован на посты в блоге, но с лёгкостью может быть адаптирован для профилей, списков каких-либо продуктов, либо для каких-то других сценариев, где необходимо отследить клики в вашем приложении.

Шаг 1: Создание миграции

Первое, что нам нужно сделать, это создать новый столбец в нашей таблице постов для хранения количества кликов:
Schema::table('posts', function($table){
    $table->integer('clicks');
});
Единственное, что нам нужно - это хранить общее количество кликов, поэтому мы не храним никаких дополнительных данных. Если вам нужно отслеживать больше данных, например, количество кликов за месяц, либо отслеживать клики индивидуально для каждого пользователя, необходимо создать примерно такую таблицу:
Schema::create('clicks', function (Blueprint $table){
    $table->increments('id');
    $table->integer('post_id')->unsigned();
    $table->integer('user_id')->unsigned();
    $table->timestamps();
}

Шаг 2: Создание роута

Наш AJAX запрос будет выполнен на определенный URL, который будет перенаправлен на метод в контроллере. Добавим в файл routes.php следующую строку:
Route::get('post/{id}/click', 'PostController@clickPost');

Шаг 3: Создание метода

После этого, в файле PostController.php (либо в каком-то вашем контроллере) нам нужно объявить метод clickPost, на который ссылается наш роут. Этот метод будет выполнять две задачи:
  • Принимать ID определённого поста
  • Увеличивать значение в столбце clicks
Выглядеть это будет примерно так:

/**
 * Increment post clicks
 *
 * @return \Illuminate\Http\Response
 */
public function clickPost($id)
{
    $post = Post::findorfail($id); // Find our post by ID.
    $post->increment('clicks'); // Increment the value in the clicks column.
    $post->update(); // Save our updated post.
}

Шаг 4: Изменение шаблона

Мы уже совсем близко: у нас готов роут, который ссылается на готовый метод, который взаимодействует со столбцом clicks.
Теперь нам необходимо сделать пару изменений в шаблоне. Во-первых, нам нужно добавить в наш JS код, который будет использоваться для прослушивания событий кликов. Затем нужно добавить в пост атрибут данных, который будет содержать ID нашего поста. А после этого с помощью AJAX мы передадим это методу clickPost:
@foreach ($posts as $post)
    {{ $post->title }}
@endforeach
Данный цикл скорее всего отличается от той разметки, которая используется у вас, и это нормально, т.к. это всего-лишь пример. Двумя важными элементами являются атрибут data-post-id в нашем элементе <article>, а так же класс .js-click-post в нашей ссылке на пост.
Примечание: В этом примере очевидно использование атрибута данных. Атрибуты данных - это конечно весело и интересно, но с ними приходят с определенные ограничения производительности и доступности. Убедитесь, что вы в курсе, как их использовать и как они могут повлиять на работу проекта.
Бонус: Вы хотите не отслеживать роль администратора для получения более чистых данных? Тогда используйте тернарный оператор вместе с классом .js-click-post: 
    {{ $post->title }}

Шаг 5: AJAX-запрос

Последний шаг: наш Javascript. Во-первых, мы должны прослушивать клики по нашей ссылке:
$( '.js-click-post' ).click(function(e) {
  e.preventDefault; // Prevent the default behavior of the  element.
  var post = $(this).closest('.post'); // Find the parent .post element
  var postId = post.attr('data-post-id'); // Get the post ID from our data attribute
  registerPostClick(postId); // Pass that ID to our function. 
});
Затем, напишем наш AJAX запрос:
function registerPostClick(postId) {
  $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
      }
  })
  $.ajax({
    type: 'post',
    dataType: 'JSON',
    url: '/post/' + postId + '/click',
    error: function (xhr, ajaxOptions, thrownError) {
           console.log(xhr.status);
           console.log(JSON.stringify(xhr.responseText));
       }
  });
}
Мы берём нашу переменную postID и посылаем её на подготовленный URL. Роут перенаправляет эту переменную в метод контроллера, который увеличивает счётчик сообщений в таблице.

Шаг 6: Тестирование

Теперь, когда всё части собраны воедино, пришло время кликнуть по ссылке на наш пост. Если клик сработал и счётчик в таблице обновился - поздравляю, теперь у вас есть какая-никакая аналитика.
Если счетчик постов не увеличивается, проверьте консоль на наличие ошибок. Если запрос AJAX по какой-либо причине не срабатывает, об этом сообщится в консоли. в консоли. Эта информация должна помочь вам быстро выявить и устранить любые возникнувшие ошибки.


Ссылка на оригинальную статью

   / /

на 02:22