Analytics

Learn how to use the analytics feature in admin-boil to track website metrics and performance.

The admin-boil dashboard includes a powerful analytics feature, making it easy to monitor and analyze important metrics for your website. Gain valuable insights to help you make data-driven decisions and optimize performance.

Key Features

📈 Real-Time Data Insights

Get instant access to your website’s performance metrics.
Track essential data such as page views, unique visitors, and conversion rates in real-time.

📊 Interactive Analytics Dashboard

Beautifully designed charts powered by shadcn UI for seamless visualization.
Monitor trends with dynamic graphs, tables, and real-time updates.

🎯 Custom Event Tracking

Track user interactions such as sign-ups, clicks, purchases, and more.
Understand conversion funnels with event-based tracking.

🔌 Seamless Next.js Integration

Fully optimized for Next.js with a simple API for tracking analytics.
No extra setup required—just import and start tracking immediately.

📍 Location & Device Insights

--Capture user geolocation, browser, OS, and device type without relying on third-party APIs. --Get deeper insights into your audience demographics.

🔑 Secure & Privacy-Friendly

--No cookies required—all tracking is privacy-compliant. --Store analytics data securely in your own database with PostgreSQL & Drizzle ORM.

⚡ Powerful Data Filtering

--Filter by date range, device type, country, or custom events. --Gain actionable insights to improve user engagement and conversions.

How to Use Analytics

Import & Initialize

import { useAnalytics } from '@/lib/useAnalytics'

const userId = 'user-123' // Replace with actual user ID if available or leave it null
const { trackPageView, trackEvent, getDateRange } =
  useAnalytics(userId)

Track Page Views (Automatically)

The hook automatically tracks page views when users navigate to a new page. However, you can also trigger it manually:

useEffect(() => {
  trackPageView('/pricing', document.referrer)
}, [])

Track Custom Events

Capture user actions such as sign-ups, button clicks, or purchases:

<button
  onClick={() =>
    trackEvent('signup_clicked', { plan: 'pro' })
  }
>
  Sign Up
</button>

Get Date Range for Analytics Queries

Retrieve analytics data for a specific period:

const { from, to } = getDateRange('30_days')
console.log(`Fetching analytics from ${from} to ${to}`)

Best Practices for Using Analytics

Track Key Metrics Only: Avoid data overload by focusing on essential KPIs like user retention, bounce rate, and conversion rates.
Analyze Trends: Review historical data to identify growth patterns and optimization areas.
Secure Your Data: Ensure proper handling of user data in compliance with GDPR and other privacy standards.

✅ Now you're ready to implement powerful analytics tracking in your Next.js app!

Analytics

On this page