Analytics Category Cards

Page Analytics Card

Location: app/src/pages/dashboard/src/cards/page-analytics/

Features

• Traffic Metrics:
  • Page Views: Total page visits with percentage change
  • Unique Visitors: Individual visitor count with percentage change
  • Trend Indicators: Up/down arrows showing change from previous period
• Percentage Calculations: Compares current period to previous period
• Visual Indicators: Color-coded trends (green for increase, red for decrease)
• Date Range Integration: Metrics calculated based on selected date range

Data Source

• Custom Analytics API endpoint
• Compares current date range to previous equivalent period
• Tracks page views and unique visitors

Visual Elements

• Large metric numbers
• Percentage change indicators
• Trend arrows
• Descriptive labels
• Card layout with clear hierarchy

Device Usage Card

Location: app/src/pages/dashboard/src/cards/device-usage/

Features

• Device Distribution: Breakdown of visitors by device type
  • Desktop devices
  • Tablet devices
  • Mobile devices
• Statistics per Device:
  • Unique visitor count
  • Percentage of total traffic
  • Visual progress bars
• Date Range Integration: Filters device data based on selected range
• Visual Representation: Progress bars showing relative distribution

Data Source

• Analytics database tracking device types
• User agent parsing and categorization
• Aggregated statistics by device type

Visual Elements

• Device type labels
• Progress bars with percentages
• Unique visitor counts
• Color-coded device categories

Active Users Card

Location: app/src/pages/dashboard/src/cards/active-users/

Features

• Real-Time Activity: Shows users currently browsing the site
• Time Window: Tracks activity in last 5 minutes
• Activity Status: Displays "Currently Active" count
• Empty State: Shows "No activity" when no active users

Data Source

• Real-time analytics tracking
• Session-based activity monitoring
• Last 5-minute activity window

Visual Elements

• Active user count
• Activity status indicator
• Time window information
• Empty state message

Page Views Chart Card

Location: app/src/pages/dashboard/src/cards/page-views-chart/

Features

• Trend Visualization: Line chart showing page views over time
• Time Series Data: Daily or hourly data points
• Chart.js Integration: Interactive chart with tooltips
• Date Range Integration: Chart data filtered by selected range
• Multiple Metrics: Can display multiple data series

Data Source

• Analytics database with time-series data
• Aggregated page views by time period
• Chart.js for visualization

Visual Elements

• Interactive line chart
• X-axis: Time periods
• Y-axis: Page view counts
• Tooltips on hover
• Responsive chart sizing

Top Pages Card

Location: app/src/pages/dashboard/src/cards/top-pages/

Features

• Page Ranking: List of most visited pages
• Visitor Counts: Number of visitors per page
• Page URLs: Display of page paths
• Sortable List: Ordered by visitor count (descending)
• Limit: Shows top 10 pages by default

Data Source

• Analytics database tracking page views
• Aggregated by page URL
• Sorted by visitor count

Visual Elements

• Page URL display
• Visitor count numbers
• List layout with clear hierarchy
• Header row (PAGE | VISITORS)

Top Countries Card

Location: app/src/pages/dashboard/src/cards/top-countries/

Features

• Geographic Distribution: List of countries with most visitors
• Country Flags: Visual flag emojis for each country
• Visitor Counts: Number of visitors per country
• Ranking: Ordered by visitor count
• Limit: Shows top countries (typically 10-20)

Data Source

• IP geolocation data
• Country-level aggregation
• Visitor count by country

Visual Elements

• Country flag emojis
• Country names
• Visitor counts
• List layout
• Header row (COUNTRY | VISITORS)

Top Referrers Card

Location: app/src/pages/dashboard/src/cards/top-referrers/

Features

• Traffic Sources: List of websites sending traffic
• Referrer Icons: Favicon images for referrer domains
• Visitor Counts: Number of visitors from each source
• Direct Traffic: Special handling for direct visits
• Social Media: Identifies social media referrers
• Search Engines: Identifies search engine referrers

Data Source

• HTTP referrer header tracking
• Domain-level aggregation
• Favicon fetching for visual representation

Visual Elements

• Referrer favicons
• Domain names
• Visitor counts
• List layout
• Header row (SOURCE | VISITORS)
• Special "Direct" indicator

Bounce Rate & Time Card

Location: app/src/pages/dashboard/src/cards/bounce-rate-time/

Features

• Bounce Rate: Percentage of single-page visits
  • Percentage display
  • Status indicator (Excellent, Good, Poor)
  • Color-coded feedback
• Average Time on Site: Average session duration
  • Time display (minutes and seconds)
  • Status indicator
  • Trend information
• Engagement Metrics: User behavior analysis
• Date Range Integration: Metrics calculated for selected period

Data Source

• Analytics database tracking session data
• Bounce rate calculation
• Average session duration calculation

Visual Elements

• Large metric displays
• Status indicators with colors
• Percentage and time formatting
• Card layout with clear sections

Analytics Map Card

Location: app/src/pages/dashboard/src/cards/analytics-map/

Features

• World Map Visualization: Interactive map showing visitor locations
• Visit Volume Indicators: Color-coded regions by visit volume
  • Low volume
  • Medium volume
  • High volume
  • Very high volume
• Statistics:
  • Total visits
  • Number of countries
• Geographic Data: Country-level visitor distribution
• Interactive Elements: Hover states and tooltips

Data Source

• IP geolocation data
• Country-level visit aggregation
• Map visualization library

Visual Elements

• World map visualization
• Color-coded regions
• Visit volume legend
• Statistics overlay
• Interactive hover states

Analytics Data Flow

Data Collection

1. Client-Side Tracking: JavaScript tracking code on frontend
2. Event Queue: Analytics events queued for processing
3. Background Processing: Events processed and stored
4. Database Storage: Analytics data stored in WordPress database
5. API Endpoints: REST API endpoints for data retrieval

Data Processing

• Aggregation: Data aggregated by time period, page, country, etc.
• Filtering: Date range filtering applied to queries
• Calculation: Metrics calculated (bounce rate, averages, etc.)
• Formatting: Data formatted for display

Performance Considerations

• Caching: Analytics data may be cached for performance
• Lazy Loading: Cards load data asynchronously
• Pagination: Large datasets paginated
• Optimization: Database queries optimized for speed

Technical Implementation

Common Analytics Patterns

// Analytics data fetching
const loadAnalytics = async () => {
  loading.value = true;
  try {
    const response = await lmnFetch({
      endpoint: 'uixpress/v1/analytics',
      type: 'GET',
      params: {
        start_date: props.dateRange[0].toISOString(),
        end_date: props.dateRange[1].toISOString(),
        metric: 'page_views', // or other metrics
      },
    });
    analytics.value = response.data;
  } catch (err) {
    error.value = err.message;
  } finally {
    loading.value = false;
  }
};

Chart Integration

// Chart.js setup for visualizations
import { Line } from 'vue-chartjs';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler,
} from 'chart.js';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler
);

Date Range Integration

All analytics cards automatically update when the date range changes:

watch(
  () => props.dateRange,
  (newRange) => {
    loadAnalytics();
  },
  { deep: true }
);

Capability Requirements

Most analytics cards require edit_posts capability to view analytics data. This ensures only authorized users can access traffic and visitor information.