User behavior tracking and analytics dashboards
Automate setup of analytics tracking and dashboard generation for web applications.
This skill helps you implement comprehensive analytics tracking and create beautiful dashboards to understand user behavior, track conversions, and measure product success.
python3 /home/ubuntu/skills/analytics-dashboard/scripts/setup_analytics.py \
/path/to/your/project \
posthog \
YOUR_API_KEY
Arguments:
project_dir: Path to your projectprovider: Analytics provider (posthog, mixpanel, amplitude, segment)api_key: Your analytics API keyNext.js - Add to app/layout.tsx:
import { initAnalytics } from '@/lib/analytics'
export default function RootLayout({ children }) {
useEffect(() => {
initAnalytics()
}, [])
return <html>{children}</html>
}
Python/Flask - Add to app initialization:
from analytics import track_event, identify_user
@app.before_request
def track_page_view():
if current_user.is_authenticated:
track_event(current_user.id, 'page_view', {
'path': request.path
})
import { trackEvent } from '@/lib/analytics'
// Track button click
<button onClick={() => trackEvent('signup_clicked', {
location: 'homepage'
})}>
Sign Up
</button>
// Track form submission
const handleSubmit = (data) => {
trackEvent('form_submitted', {
form_name: 'contact',
fields: Object.keys(data)
})
}
// Track conversion
trackEvent('purchase_completed', {
amount: 99.99,
currency: 'USD',
items: 3
})
Copy the generated dashboard component:
cp /home/ubuntu/skills/analytics-dashboard/templates/dashboard.tsx \
/path/to/your/project/components/
Use in your app:
import AnalyticsDashboard from '@/components/AnalyticsDashboard'
export default function AdminPage() {
return <AnalyticsDashboard />
}
useEffect(() => {
trackEvent('page_view', {
path: window.location.pathname,
referrer: document.referrer
})
}, [pathname])
trackEvent('button_clicked', {
button_name: 'signup',
location: 'homepage_hero'
})
identifyUser(user.id, {
email: user.email,
plan: user.subscription_plan,
signup_date: user.created_at
})
trackEvent('purchase_completed', {
amount: total,
currency: 'USD',
payment_method: 'stripe'
})
The generated dashboard includes:
Key Metrics Cards
Charts
Tables
scripts/setup_analytics.py - Automated setup scripttemplates/dashboard.tsx - Analytics dashboard componentreferences/analytics_patterns.md - Comprehensive guide (300+ lines)// Product viewed
trackEvent('product_viewed', {
product_id: product.id,
category: product.category,
price: product.price
})
// Added to cart
trackEvent('add_to_cart', {
product_id: product.id,
quantity: 1,
cart_total: cart.total
})
// Purchase completed
trackEvent('purchase_completed', {
order_id: order.id,
total: order.total,
items: order.items.length
})
// Trial started
trackEvent('trial_started', {
plan: 'pro',
trial_days: 14
})
// Feature used
trackEvent('feature_used', {
feature_name: 'export_data',
usage_count: user.export_count
})
// Subscription upgraded
trackEvent('subscription_upgraded', {
from_plan: 'basic',
to_plan: 'pro',
mrr_change: 20
})
Manual Setup: 2-3 hours
With This Skill: 15-20 minutes
Time Saved: ~2 hours per project
deployment-automation - Deploy with analytics configureduser-authentication-system - Identify users after loginfeature-flag-system - Track feature flag usageerror-monitoring-setup - Combine with error trackingBuilt with best practices, privacy-conscious, performance-optimized.
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer