How to create custom analytics in Bubble.io: Step-by-Step Guide

In the Data tab, create a Data Type called AnalyticsEvent with fields: event_name (text — e.g., 'page_view', 'signup', 'purchase'), user (User — the user who triggered the event), page (text — the page where the event occurred), metadata (text — JSON string for extra data like product ID or amount), created_date (date). Also create a DailyMetric Data Type with fields: date (date), event_name (text), count (number), sum_value (number). DailyMetric will store pre-aggregated daily data for fast dashboard loading.

Add event tracking to key user actions throughout your app. For example, on your product page, add a workflow action 'Create a new AnalyticsEvent' when the page loads with event_name = 'page_view' and page = 'product'. On the purchase button click, add another AnalyticsEvent with event_name = 'purchase' and metadata containing the product price. For signup, track it in the registration workflow. Keep event names consistent — use lowercase with underscores. To avoid slowing down user-facing workflows, use 'Schedule API Workflow' to create events asynchronously in a backend workflow.

Create a backend workflow called 'aggregate-daily-metrics' that runs once daily. The workflow: (1) Searches for AnalyticsEvents created yesterday (date range: yesterday start to yesterday end). (2) Groups results by event_name using :group by. (3) For each event_name group, creates a DailyMetric record with the date, event_name, count (number of events), and sum_value (sum of amounts from metadata if applicable). This pre-aggregation means your dashboard loads fast because it queries DailyMetric (one record per event per day) instead of searching through millions of raw events.

Create an 'analytics' page accessible only to admin users. At the top, add KPI summary cards in a Row layout group. Each card shows a metric like Total Users (Do a Search for Users:count), Revenue This Month (Do a Search for DailyMetrics where event_name = 'purchase' and date >= first day of month :each item's sum_value :sum), and Signups This Week (Do a Search for DailyMetrics where event_name = 'signup' and date >= 7 days ago :each item's count :sum). Style each card as a rounded group with a large number, label, and optional trend indicator showing percentage change from the previous period.

Install a chart plugin like Chart Element or ApexCharts from the Bubble plugin marketplace. Add a Line Chart element to your analytics page. Set the data source to Do a Search for DailyMetrics where event_name = 'page_view' and date is within the selected date range, sorted by date ascending. Map the X-axis to date (formatted as a readable date) and the Y-axis to count. Add a date range picker above the chart (two Date Picker elements for start and end date) that constrains the DailyMetric search. Add separate charts for different metrics — signups, purchases, revenue — or a single chart with multiple series.

Above the charts, add filter controls: a date range picker, an event type dropdown (data source: unique event_name values from DailyMetrics), and a grouping toggle (daily, weekly, monthly). For weekly and monthly views, use the :group by operator on DailyMetrics to sum counts by week or month. For data export, add an Export to CSV button that triggers a backend workflow generating a CSV file from the filtered DailyMetric records. Use the CSV Creator plugin or build CSV text manually and save as a file. This lets stakeholders analyze data in their own tools.