EvezArt Analytics Dashboard Skill
Automate setup of analytics tracking and dashboard generation for web applications.
Purpose
This skill helps you implement comprehensive analytics tracking and create beautiful dashboards to understand user behavior, track conversions, and measure product success.
When to Use
- Adding analytics to a new application
- Implementing event tracking for user actions
- Creating analytics dashboards
- Switching analytics providers
- Setting up conversion tracking
- Building admin analytics views
What It Does
- Detects project type (Next.js, React, Express, Python)
- Installs analytics dependencies (PostHog, Mixpanel, Amplitude, Segment)
- Creates analytics configuration with initialization code
- Generates dashboard components with key metrics
- Provides tracking patterns for common events
- Includes best practices for performance and privacy
Quick Start
1. Run Setup Script
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 key
2. Initialize Analytics
Next.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
})
3. Track Events
import { trackEvent } from '@/lib/analytics'
// Track button click
<button => 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
})
4. Add Dashboard
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 />
}
Supported Providers
PostHog (Recommended)
- Best for: Startups, product analytics
- Features: Session replay, feature flags, A/B testing
- Pricing: Generous free tier
- Setup time: 5 minutes
Mixpanel
- Best for: User behavior analysis
- Features: Funnels, retention, cohorts
- Pricing: Free up to 100k events/month
- Setup time: 10 minutes
Amplitude
- Best for: Product-led growth
- Features: Behavioral analytics, predictions
- Pricing: Free up to 10M events/month
- Setup time: 10 minutes
Segment
- Best for: Multiple analytics tools
- Features: Single API for all providers
- Pricing: Free up to 1k users/month
- Setup time: 15 minutes
Key Metrics to Track
Engagement
- Daily Active Users (DAU)
- Weekly Active Users (WAU)
- Monthly Active Users (MAU)
- Session duration
- Pages per session
Conversion
- Signup conversion rate
- Trial-to-paid conversion
- Purchase completion rate
- Funnel drop-off points
Retention
- Day 1, 7, 30 retention
- Churn rate
- Cohort analysis
Product
- Feature adoption rate
- User flows
- A/B test results
Event Tracking Patterns
Page Views
useEffect(() => {
trackEvent('page_view', {
path: window.location.pathname,
referrer: document.referrer
})
}, [pathname])
User Actions
trackEvent('button_clicked', {
button_name: 'signup',
location: 'homepage_hero'
})
User Identification
identifyUser(user.id, {
email: user.email,
plan: user.subscription_plan,
signup_date: user.created_at
})
Conversions
trackEvent('purchase_completed', {
amount: total,
currency: 'USD',
payment_method: 'stripe'
})
Dashboard Components
The generated dashboard includes:
Key Metrics Cards
- Total events
- Unique users
- Average session duration
- Bounce rate
Charts
- User growth (line chart)
- Top events (bar chart)
- Conversion funnel
Tables
- Top pages by views
- Top events by count
- Recent user activity
Best Practices
Performance
- ✅ Load analytics asynchronously
- ✅ Batch events together
- ✅ Debounce high-frequency events
- ❌ Don't block page load
Privacy
- ✅ Get user consent (GDPR)
- ✅ Provide opt-out mechanism
- ✅ Anonymize sensitive data
- ❌ Don't track PII without consent
Data Quality
- ✅ Include context with events
- ✅ Use consistent naming
- ✅ Test in development
- ❌ Don't track too much
Files Generated
Scripts
scripts/setup_analytics.py- Automated setup script
Templates
templates/dashboard.tsx- Analytics dashboard component
References
references/analytics_patterns.md- Comprehensive guide (300+ lines)
Workflow
- Setup → Run script to install and configure
- Initialize → Add analytics to app entry point
- Track → Add event tracking throughout app
- Dashboard → Add dashboard component for viewing
- Optimize → Refine based on data
Examples
E-commerce Site
// 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
})
SaaS Application
// 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
})
Troubleshooting
Events not showing up
- Check API key is correct
- Verify analytics is initialized
- Check browser console for errors
- Test in production mode
Dashboard not loading
- Verify API endpoint exists
- Check CORS settings
- Ensure data is being tracked
- Check network tab for errors
Performance issues
- Batch events together
- Debounce high-frequency events
- Load analytics asynchronously
- Use sampling for high-volume
Time Savings
Manual Setup: 2-3 hours
- Research providers: 30 min
- Install dependencies: 15 min
- Write configuration: 45 min
- Create dashboard: 60 min
- Test and debug: 30 min
With This Skill: 15-20 minutes
- Run setup script: 5 min
- Configure API keys: 5 min
- Add tracking: 5 min
- Test: 5 min
Time Saved: ~2 hours per project
Related Skills
deployment-automation- Deploy with analytics configureduser-authentication-system- Identify users after loginfeature-flag-system- Track feature flag usageerror-monitoring-setup- Combine with error tracking
Resources
Built with best practices, privacy-conscious, performance-optimized.