Adding Click Details to Articles in Your RoR App

Overview

Tracking user interaction is essential for understanding engagement and improving user experience. This guide will walk you through adding click tracking to articles in a Ruby on Rails application. By recording details such as IP address, browser, device, and country, you can gain valuable insights into how your content is consumed.

Scenario

In a blogging platform or content management system, you might want to track how users interact with your articles. This involves recording click details for each article view, which can help analyze engagement and make data-driven improvements.

Prerequisites

1. Ruby on Rails application
2. Basic understanding of Rails models, controllers, and views
3. Gems: geocoder, countries, and browser

Step-by-Step Guide

1. Set Up Click Model

Generate a Click model to store click details.

rails generate model Click article:references ip_address:string user_agent:string browser:string os:string device:string country:string referrer:string clicked_at:datetime
rails db:migrate

2. Add Click Tracking Logic to the Controller

Modify your ArticlesController to track clicks. Here’s how to implement the record_click method:

class ArticlesController < ApplicationController
  before_action :set_article, only: [:show]

  def show
    record_click
    # other show action logic
  end

  private

  def set_article
    @article = Article.find(params[:id])
  end

  def record_click
    user_agent = request.user_agent
    ip_address = request.remote_ip

    device_type = get_device_info(user_agent)
    browser_name = Browser.new(user_agent).name
    os_name = Browser.new(user_agent).platform.name

    location = Geocoder.search(ip_address).first
    country = location.present? ? (ISO3166::Country[location.country_code].common_name rescue 'Unknown') : 'Unknown'

    Click.create!(
      article: @article,
      ip_address: ip_address,
      user_agent: user_agent,
      browser: browser_name,
      os: os_name,
      device: device_type,
      country: country,
      referrer: request.referrer,
      clicked_at: Time.current
    )
  end

  def get_device_info(user_agent)
    if user_agent.include?("Mobile")
      "Mobile Device"
    elsif user_agent.include?("iPad")
      "iPad"
    elsif user_agent.include?("Android")
      "Android Device"
    elsif user_agent.include?("Windows") || user_agent.include?("Macintosh") || user_agent.include?("Linux")
      "Laptop"
    else
      "Desktop"
    end
  end
end

3. Display Click Details in the Article View

Update your view to include a section for displaying click data.

<section class="article-details">
  <!-- Existing article content -->
  
  <h2 class="text-xl font-bold mt-6">Click Details</h2>
  <table class="min-w-full divide-y divide-gray-200 mt-4">
    <thead class="bg-gray-50">
      <tr>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP Address</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Browser</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Operating System</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Device</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Country</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Referrer</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Clicked At</th>
      </tr>
    </thead>
    <tbody class="bg-white divide-y divide-gray-200">
      <% @article.clicks.each do |click| %>
        <tr>
          <td class="px-6 py-4 text-sm text-gray-900"><%= click.ip_address %></td>
          <td class="px-6 py-4 text-sm text-gray-900"><%= click.browser %></td>
          <td class="px-6 py-4 text-sm text-gray-900"><%= click.os %></td>
          <td class="px-6 py-4 text-sm text-gray-900"><%= click.device %></td>
          <td class="px-6 py-4 text-sm text-gray-900"><%= click.country %></td>
          <td class="px-6 py-4 text-sm text-gray-900"><%= click.referrer %></td>
          <td class="px-6 py-4 text-sm text-gray-900"><%= click.clicked_at %></td>
        </tr>
      <% end %>
    </tbody>
  </table>
</section>

4. Add Necessary Gems to Your Gemfile

Include the following gems in your Gemfile:

gem 'geocoder'
gem 'countries', '~> 6.0'
gem 'browser', '~> 6.0'

Run bundle install to install the gems.

Conclusion

By following these steps, you’ve integrated click tracking into your Rails application for articles. This allows you to monitor user interactions and gain insights into article engagement.

---

Happy coding! 🎉