Dashboard Guide

Complete guide to using your Databuddy analytics dashboard

📊 Dashboard Guide

Your Databuddy dashboard provides comprehensive analytics insights with real-time data, detailed reports, and powerful filtering capabilities.

Access: Visit app.databuddy.cc to view your analytics dashboard

🏠 Overview Tab

The overview tab gives you a high-level view of your website's performance with key metrics and trends.

📈 Key Metrics

📊

Core Analytics

  • Pageviews - Total page views across your site
  • Visitors - Unique visitors (deduplicated by anonymous ID)
  • Sessions - User sessions with 30-minute timeout
  • Bounce Rate - Percentage of single-page sessions
  • Session Duration - Average time spent per session
  • Pages per Session - Average pages viewed per session
⚡

Performance Metrics

  • Load Time - Average page load time
  • TTFB - Time to First Byte
  • Core Web Vitals - LCP, FCP, CLS when available
  • Performance Score - Overall site performance rating

⏰ Time Range Selection

Choose from predefined time periods:

  • Last 24 hours - Real-time insights
  • Last 7 days - Weekly trends
  • Last 30 days - Monthly overview
  • Last 90 days - Quarterly analysis

Select any date range for specific analysis:

  • Pick start and end dates
  • Compare different periods
  • Analyze specific campaigns or events
  • Export data for custom ranges

Comparison Mode: Use the comparison toggle to compare your selected period with the previous period of the same length.

📊 Data Granularity

View your metrics at different granularities based on your time range:

📈 Charts and Visualizations

Interactive Metrics Chart:

  • 📈 Line charts showing trends over time
  • 🔍 Toggle different metrics on/off
  • 🖱️ Interactive hover for detailed values
  • 📱 Responsive design for mobile viewing

Performance Indicators:

  • ✅ Green indicators for positive changes
  • ⚠️ Red indicators for areas needing attention
  • 📊 Percentage changes compared to previous period
  • 🎯 Automatic calculation based on selected time range

📄 Top Pages

Discover your most popular content and page performance:

📊 Page Analytics

📄

Page Metrics

  • Page path and title - URL and page title
  • Total pageviews - Number of views
  • Unique visitors - Distinct users
  • Average time on page - Engagement duration
  • Bounce rate - Single-page session rate
🔍

Interactive Features

  • Click to visit - Click page paths to open them
  • Sort by metrics - Order by any column
  • Pagination - Handle large datasets efficiently
  • Search & filter - Find specific pages quickly

💡 Page Insights

Performance Tip: Pages with high bounce rates but long time-on-page often indicate quality content that doesn't require further navigation.

Use this data to:

  • 🎯 Identify your most valuable content
  • 🔍 Find pages that need optimization
  • 📈 Track content performance over time
  • 🚀 Optimize user journeys

🔗 Traffic Sources

Understand where your visitors come from and optimize your marketing efforts:

📊 Referrer Categories

📈 Traffic Analysis

For each source, you'll see:

  • 👥 Visitor counts - Number of users from each source
  • 📊 Percentage breakdown - Share of total traffic
  • 🏷️ Source classification - Automatic categorization with icons
  • 📈 Trend analysis - Growth or decline over time

🌍 Geographic Analytics

Discover your global audience and optimize for different regions:

🗺️ Geographic Breakdown

Country-Level Analytics:

  • 🏳️ Country names with flag icons
  • 👥 Visitor counts and percentages
  • 📊 Interactive sortable data table
  • 🌍 Geographic distribution insights

Use Cases:

  • Identify primary markets
  • Plan localization efforts
  • Understand global reach
  • Optimize content for regions

Detailed Location Data:

  • 🏛️ State/province information
  • 🏙️ City-level analytics (when available)
  • 🕐 Time zone considerations
  • 📍 Geographic clustering insights

Benefits:

  • Local market analysis
  • Regional campaign targeting
  • Time zone optimization
  • Location-based content strategy

Privacy Note: Location data is derived from IP addresses and anonymized. No precise location tracking is performed.

Powering the Map View

The geographic data displayed on maps and in regional breakdowns is typically derived from the user's IP address at the beginning of a session. This functionality is an integral part of session tracking. Ensure trackSessions={true} (which is enabled by default) in your SDK configuration to collect this data.

💻 Technology Stack Analysis

Understand your audience's technical environment:

📱 Device Analytics

📱

Device Types

Categories:

  • 🖥️ Desktop - Traditional computers
  • 📱 Mobile - Smartphones and mobile devices
  • 📟 Tablet - Tablets and large mobile devices

Metrics:

  • Visitor distribution
  • Device-specific performance
  • User behavior patterns
🌐

Browser Information

Data Included:

  • 🌐 Browser names and versions
  • 📊 Market share among your visitors
  • ⚡ Browser-specific performance data
  • 🔧 Compatibility insights

🖥️ Operating System Insights

Platform Distribution:

  • 🍎 macOS - Apple computers
  • 🪟 Windows - Microsoft Windows
  • 🐧 Linux - Linux distributions
  • 📱 iOS - Apple mobile devices
  • 🤖 Android - Android devices

Strategic Benefits:

  • 🎯 Optimize for popular platforms
  • 🐛 Debug platform-specific issues
  • 📊 Understand technical demographics
  • 🔧 Plan feature compatibility

Cross-Platform Considerations: Ensure your website works well across all popular platforms used by your audience.

🎯 Custom Events Analytics

Track and analyze your business-specific events with detailed property breakdowns:

Populating This Section

The analytics, breakdowns, and examples shown here are populated by the custom events you actively send from your application using the db.track('your_event_name', {your_properties}) method. The more relevant and well-structured custom events you track, the more insightful this section will become. For detailed guidance on how to implement custom event tracking, please refer to the SDK Methods Reference and strategies in the Custom Event Tracking section of the SDK documentation.

📊 Enhanced Event Interface

Tree-Structure Analytics:

  • 📊 Event Level - Overall event metrics and performance
  • 📂 Property Categories - Organized property groupings with counts
  • 🔍 Property Values - Individual values with percentage distributions
  • 📈 Visual Hierarchy - Color-coded dots and professional typography

Event Display Features:

  • 🎯 Event badges - Blue dots for main events
  • 📊 Count displays - Total events and unique users
  • 📈 Share percentages - Relative event frequency
  • 🗓️ Occurrence tracking - First and last event timestamps

Automatic Property Analysis:

  • 🏷️ Property extraction - All custom properties automatically categorized
  • 📊 Value distribution - Percentage breakdown of property values
  • 🔢 Count aggregation - Total occurrences per property value
  • 📈 Category sorting - Properties sorted by frequency

Property Category Features:

  • 📂 Category headers - Property names with aggregate counts
  • 📊 Value lists - Individual property values with metrics
  • 🎯 Usage indicators - Visual badges showing value counts
  • 📈 Percentage pills - Clean percentage displays

Example Property Structure:

Event: purchase_completed (156 events, 89 users)
├── 📂 product_category (156 values)
│   ├── software: 98 (63%) 
│   ├── hardware: 45 (29%)
│   └── services: 13 (8%)
├── 📂 payment_method (156 values)
│   ├── credit_card: 124 (79%)
│   ├── paypal: 22 (14%)
│   └── bank_transfer: 10 (6%)

User Experience Enhancements:

  • 🔍 Individual toggles - Expand/collapse each property category independently
  • 📊 Scrollable content - Handle large property lists with smooth scrolling
  • 🎯 Visual feedback - Hover effects and transition animations
  • 📱 Mobile responsive - Optimized for all device sizes

Navigation Features:

  • ▶️ Expand arrows - Rotating chevrons indicate expansion state
  • 📋 Value count badges - Show number of unique values per property
  • 📊 Scroll indicators - Visual cues when content is scrollable
  • 🎨 Professional styling - Subtle gradients and clean borders

Performance Optimizations:

  • 🚀 Lazy rendering - Only render visible content
  • 📊 Efficient scrolling - Max height limits with overflow handling
  • 🎯 State management - Persistent expand/collapse states
  • 📱 Touch optimization - Mobile-friendly interaction areas

🔍 Event Examples

🛒

E-commerce Events

{
  "event": "purchase_completed",
  "properties": {
    "product_id": "prod_123",
    "revenue": 29.99,
    "currency": "USD",
    "category": "software"
  }
}
💡

Engagement Events

{
  "event": "feature_used",
  "properties": {
    "feature": "export_data",
    "plan": "pro",
    "usage_count": 5
  }
}

⚡ Real-time Analytics

Coming Soon: Real-time analytics with WebSocket streaming will be available in the next major update.

🔮 Planned Features

Live Metrics Dashboard:

  • 👥 Active visitors - Users currently on your site
  • 📄 Current pageviews - Real-time page popularity
  • 🔄 Live updates - Data refreshed automatically
  • 📊 Real-time charts - Live data visualization

WebSocket Integration:

  • 🚀 Instant updates - No page refresh needed
  • ⚙️ Configurable intervals - Customize update frequency
  • 🟢 Live indicators - Visual real-time status
  • 📱 Mobile optimized - Real-time on all devices

🔍 Advanced Filtering & Segmentation

Slice and dice your data for specific insights:

🎛️ Available Filters

🎯 Segmentation Strategies

👥

User Behavior Segments

  • High-engagement users - Multiple page visits
  • Quick browsers - Short session durations
  • Deep readers - Long time on page
  • Mobile-first users - Primarily mobile traffic
🔧

Technical Segments

  • Performance impact - Fast vs slow connections
  • Browser compatibility - Modern vs legacy browsers
  • Device capabilities - Screen size and features
  • Platform preferences - Operating system usage

📈 Performance Monitoring

Monitor your website's technical health and user experience:

Enabling Performance Data

The performance metrics, including Core Web Vitals, are populated when you enable trackPerformance={true} (enabled by default) and trackWebVitals={true} (disabled by default, but recommended) in your SDK configuration. Enabling these options allows the SDK to collect detailed timing and performance data from the user's browser.

⚡ Core Web Vitals

Essential Performance Metrics:

🖼️

LCP - Largest Contentful Paint

Good: ≤ 2.5 seconds

Measures loading performance. Time until the largest content element is rendered.

⚡

FID - First Input Delay

Good: ≤ 100 milliseconds

Measures interactivity. Time from first user interaction to browser response.

📐

CLS - Cumulative Layout Shift

Good: ≤ 0.1

Measures visual stability. Sum of all unexpected layout shift scores.

🎨

FCP - First Contentful Paint

Good: ≤ 1.8 seconds

Time until first content element is rendered on screen.

Optimization Strategies:

For LCP (Loading):

  • 🖼️ Optimize images and videos
  • 🚀 Use a fast CDN
  • 📦 Minimize resource load times
  • 🔄 Implement lazy loading

For FID (Interactivity):

  • 📦 Reduce JavaScript bundle size
  • ⚡ Optimize long-running tasks
  • 🔄 Use web workers for heavy computation
  • 📱 Improve mobile responsiveness

For CLS (Visual Stability):

  • 📐 Set dimensions for images/videos
  • 🎨 Avoid inserting content above existing content
  • 📱 Use transform animations over layout changes
  • 🔧 Preload web fonts

📊 Performance Analytics

Detailed Performance Data:

  • 📈 Load time distribution - Histogram of page load times
  • 📄 Performance by page - Page-specific metrics
  • 📅 Performance trends - Changes over time
  • 📱 Mobile vs desktop - Device-specific performance

Performance Tip: Use the performance data to identify slow pages and prioritize optimization efforts where they'll have the biggest impact.

🚨 Error Tracking & Debugging

Monitor and resolve issues affecting your users:

Enabling Error Data Collection

To populate the error tracking sections of the dashboard, ensure you have trackErrors={true} enabled in your SDK configuration. This will automatically capture unhandled JavaScript errors and promise rejections. For more detailed context on specific handled errors, you can manually send error events using db.track('error', { /* custom properties */ }) as described in the SDK Methods Reference.

🐛 JavaScript Error Analytics

🔧 Error Resolution Workflow

  1. Identify - Spot errors in the dashboard
  2. Analyze - Review stack traces and context
  3. Prioritize - Focus on high-frequency errors
  4. Fix - Implement solutions
  5. Verify - Monitor error reduction

Error Impact: JavaScript errors can significantly impact user experience. Regular monitoring helps maintain site reliability.

📱 Mobile Dashboard Experience

Access your analytics on any device:

📱 Mobile Features

Optimized Mobile Interface:

  • 📊 Touch-friendly charts and graphs
  • 📱 Responsive table layouts
  • 🔍 Mobile-optimized filtering
  • ⚡ Fast loading on mobile networks

Mobile-Specific Insights:

  • 📱 Mobile vs desktop performance comparison
  • 🎯 Mobile user behavior patterns
  • 📊 Mobile-specific error tracking
  • 🚀 Mobile Core Web Vitals monitoring

📊 Data Export & Integration

Get your data where you need it:

📁 Export Options

📄

CSV Export

Download raw data for analysis in spreadsheets or other tools.

🔗

API Access

Programmatic access to your analytics data via REST API.

⏰

Scheduled Reports

Automated email reports with key metrics and insights.

🔔

Webhooks

Real-time data streaming to your applications.

🎯 Getting the Most from Your Dashboard

💡 Best Practices

Regular Monitoring: Check your dashboard weekly to spot trends and issues early.

Daily Tasks:

  • ✅ Check overall visitor trends
  • 🔍 Monitor error reports
  • 📈 Review performance metrics
  • 🎯 Track custom events

Weekly Analysis:

  • 📊 Compare week-over-week growth
  • 🌍 Analyze geographic trends
  • 📱 Review device usage patterns
  • 🔗 Evaluate traffic sources

Monthly Reviews:

  • 📈 Assess monthly growth trends
  • 🎯 Review goal achievement
  • 📄 Analyze top-performing content
  • 🚀 Plan optimization strategies

🆘 Dashboard Troubleshooting

❓ Common Issues

🔗 Related Resources

📦

SDK Reference

Complete SDK configuration and tracking options

🎯

Custom Events

Implement custom event tracking for business insights

⚡

Performance Tracking

Optimize your website's performance metrics

🔒

Privacy Settings

Configure privacy and GDPR compliance options

Need Help? Join our Discord community or contact support for dashboard assistance.

📊 Funnel Analysis

Funnel analysis helps you understand how users progress through specific sequences of actions on your site, such as a signup process or a checkout flow. Defining and tracking these steps is crucial for identifying drop-off points and optimizing conversion rates.

Populating Funnel Data

To populate funnel data, you need to:

  1. Define the steps of your funnel within the Databuddy dashboard settings.
  2. Ensure each step corresponds to a custom event (or page view) that you are tracking with the SDK. For example, a signup funnel might be defined by a sequence of events like viewed_signup_page (a screen view), started_signup_form (custom event), and completed_signup (custom event).

The sequence of these events for users will then build the funnel visualization. For more details on sending custom events, see the SDK Methods Reference in the SDK documentation.

(Detailed instructions on how to define funnels within the dashboard interface and interpret the funnel visualization will be available here. This feature helps pinpoint where users drop off in key workflows.)

🗺️ User Journey Visualization

User journey visualization allows you to see the paths users take through your website on a session-by-session basis. This includes the sequence of page views and custom events they trigger, offering insights into user behavior and navigation patterns.

Data for User Journeys

This feature relies on the comprehensive event data tracked by the SDK. The richness of the user journeys depends on:

  • Thorough screen_view tracking (often automatic via trackScreenViews={true} in the SDK configuration).
  • Detailed custom event tracking (db.track()) for significant interactions as described in the SDK Methods Reference.

Each event is tied to a user's session, allowing the dashboard to reconstruct their path.

(Information on how to access and interpret user journey maps in the dashboard, including filtering by user segments or starting/ending events, will be detailed here. This helps understand common paths to conversion or points of confusion.)

👤 User Profiles

The dashboard can compile user profiles that show a history of activity for individual visitors, even if they are anonymous. These profiles are built by aggregating all events linked to the same unique user ID, which the SDK manages automatically as part of session tracking (trackSessions={true}).

Building Rich User Profiles

Richer user profiles are developed when you consistently track custom events that provide context about user actions and milestones. While the SDK handles user identification, the depth of each profile is determined by the quality and breadth of your event tracking strategy.

Refer to these SDK documentation sections for more:

(Details on where to find user profiles in the dashboard, what information they contain (e.g., event history, first seen, last seen, device info, location), and how to use them for segmentation or understanding individual user behavior will be provided here.)

Google Tag Manager

Add Databuddy analytics through Google Tag Manager

API Reference

Complete API reference for Databuddy analytics endpoints