[FEATURE] Engagement Dashboard with KPIs, Trends, and Platform Analytics #34307
Description
Problem
Content managers and marketing teams need visibility into how users are actually engaging with their content. Currently, they can see traffic numbers, but cannot easily answer critical questions like:
- What percentage of visitors are truly engaging vs. bouncing?
- How is engagement trending over time?
- Which devices, browsers, and languages show the highest engagement?
- What's the average time users spend actively interacting with content?
Without this insight, teams struggle to make informed decisions about content strategy, optimize for their most engaged audiences, or identify where users are losing interest.
Goal
Provide content and marketing teams with a comprehensive Engagement Dashboard that displays:
- 7 Key Performance Indicators: Engagement Rate, Avg Interactions, Session Time, Conversion Rate, Total Sessions, Pageviews, Unique Visitors
- 60-day trend visualization showing engagement patterns over time
- Engagement quality breakdown (engaged vs bounced sessions)
- Platform analytics tables for Device, Browser, and Language segments with views, time spent, and scroll depth metrics
This enables teams to quickly identify engagement trends, understand which platforms perform best, and make data-driven content optimization decisions.
Target Personas
- Content teams
- Developer teams (for implementation)
- DevOps teams
- System administrators (dotCMS)
Demo Expectations
In the demo, we will show:
- Feature Toggle: Engagement tab appears in Analytics dashboard based on feature flag configuration
- KPI Overview: 7 metric cards displaying current values with percentage change indicators (green/red trending)
- Trend Visualization: Interactive 60-day line chart showing engagement patterns
- Quality Breakdown: Doughnut chart showing engaged (65%) vs bounced (35%) session ratio
- Platform Analytics: Three tabbed tables (Device/Browser/Language) showing:
- Name and views with visual progress bars
- Average time spent per platform
- Scroll depth percentages
- Responsive Design: Dashboard adapts to different screen sizes
Acceptance Criteria
Business Requirements
- New "Engagement" tab is accessible from Analytics dashboard navigation
- Dashboard displays all 7 KPI metrics with trend indicators
- 60-day engagement trend is visualized clearly
- Platform comparison tables help identify optimization opportunities
- Feature can be toggled via configuration for controlled rollout
- All visualizations follow dotCMS design system
- Dashboard is responsive across devices
- Empty states are handled gracefully
Technical Implementation
- Create feature flag
SHOW_ENGAGEMENT_DASHBOARD_FLAGin configuration - Define TypeScript interfaces in
types.ts:EngagementKPIs(7 metrics)EngagementTrend(time-series data)EngagementBreakdown(engaged/bounced data)EngagementSegment(device/browser/language data)
- Create
mock-engagement-data.tswith sample data - Update
DotAnalyticsDashboardStore:- Add engagement state management
- Add load effect:
if (engagementTab) return of(MOCK_DATA) - Create computed selectors for Chart.js data transformation
- Create
DotAnalyticsDashboardEngagementComponentwith:- KPI metrics section (reuse/enhance existing metrics component)
- Engagement trend chart (Chart.js line chart)
- Engagement breakdown (Chart.js doughnut chart)
- Platform analytics tables (reusable table component for 3 tabs)
- Update
dot-analytics-dashboard.component.ts:- Add Engagement tab to navigation
- Implement feature flag conditional rendering
- Wire up routing
- Component tests using Spectator
- Integration tests for feature flag behavior
Links
- Design Screenshot: https://pageview-pulse-dashboard-18.lovable.app/
Technical Notes
- Reuse existing analytics components where possible
- Table component must be reusable across Device/Browser/Language tabs
- Follow Angular 19+ patterns with signals
- Chart.js already integrated in project
- Mock data structure should align with future API response format