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

- Tool: Bubble
- Difficulty: Beginner
- Time required: 25-30 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Building custom analytics in Bubble means tracking user events in a database, aggregating data by time periods, and displaying results in admin dashboards with charts and metrics. This tutorial covers creating an event tracking Data Type, recording user actions with workflows, building aggregation queries for daily, weekly, and monthly data, and visualizing analytics with chart plugins and summary cards.

## Overview: Creating Custom Analytics in Bubble

This tutorial shows you how to build an internal analytics system in Bubble. Instead of relying solely on Google Analytics, you will track specific user events that matter to your business, store them in your database, aggregate them into meaningful metrics, and display them on an admin dashboard with charts and KPI cards.

## Before you start

- A Bubble app with user authentication and at least one feature users interact with
- Basic understanding of Bubble Data Types and workflows
- A chart plugin installed (Chart Element plugin or similar)
- Familiarity with Do a Search for and :group by operator

## Step-by-step guide

### 1. Create the event tracking Data Type

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.

**Expected result:** Your database has an AnalyticsEvent type for raw event tracking and a DailyMetric type for pre-aggregated metrics.

### 2. Track user events with workflows

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.

> Pro tip: Create events asynchronously with Schedule API Workflow to avoid adding latency to user-facing actions like button clicks.

**Expected result:** User actions throughout your app are tracked as AnalyticsEvent records in your database.

### 3. Aggregate data with a scheduled 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.

**Expected result:** Pre-aggregated daily metrics are stored in the DailyMetric Data Type, updated automatically each day.

### 4. Build the analytics dashboard with KPI cards

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.

**Expected result:** The admin dashboard displays real-time KPI cards showing key business metrics.

### 5. Add charts to visualize trends over time

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.

**Expected result:** Interactive charts display analytics trends over time with date range filtering.

### 6. Add filters and export functionality

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.

**Expected result:** Admin users can filter analytics by date range and event type, and export data to CSV for external analysis.

## Complete code example

File: `Workflow summary`

```text
CUSTOM ANALYTICS ARCHITECTURE
===============================

DATA TYPES:
  AnalyticsEvent (raw events):
    - event_name: text (page_view, signup, purchase, etc.)
    - user: User
    - page: text
    - metadata: text (JSON string)
    - created_date: date

  DailyMetric (pre-aggregated):
    - date: date
    - event_name: text
    - count: number
    - sum_value: number

EVENT TRACKING (throughout app):
  Page load → Schedule API Workflow:
    Create AnalyticsEvent (event_name: 'page_view')
  Signup → Schedule API Workflow:
    Create AnalyticsEvent (event_name: 'signup')
  Purchase → Schedule API Workflow:
    Create AnalyticsEvent (event_name: 'purchase', metadata: price)

DAILY AGGREGATION (backend, scheduled midnight):
  1. Search AnalyticsEvents from yesterday
  2. Group by event_name
  3. For each group:
     Create DailyMetric:
       date = yesterday
       event_name = group key
       count = group count
       sum_value = sum of values

DASHBOARD PAGE:
  KPI Cards (Row layout):
    - Total Users: Search Users :count
    - Monthly Revenue: Search DailyMetrics (purchase, this month) sum
    - Weekly Signups: Search DailyMetrics (signup, 7 days) sum
    - Active Users: Search AnalyticsEvents (today, unique users)

  Charts (Chart Element plugin):
    - Line chart: DailyMetrics by date
    - Bar chart: events by type
    - Filters: date range picker, event type dropdown

  Export:
    - CSV download from filtered DailyMetric records
```

## Common mistakes

- **Querying raw AnalyticsEvent records directly on the dashboard** — With thousands or millions of raw events, dashboard searches become extremely slow and consume excessive workload units Fix: Pre-aggregate data into DailyMetric records using a scheduled backend workflow and query the aggregated data on the dashboard
- **Creating AnalyticsEvent records synchronously in user-facing workflows** — Adding a database create action to every button click adds latency to the user experience Fix: Use Schedule API Workflow to create events asynchronously in a backend workflow so the user-facing action completes instantly
- **Not setting privacy rules on analytics Data Types** — Without privacy rules, any authenticated user could potentially access analytics data meant only for administrators Fix: Add privacy rules on AnalyticsEvent and DailyMetric restricting access to users with an admin role

## Best practices

- Pre-aggregate analytics data daily to keep dashboard loading fast
- Track events asynchronously using Schedule API Workflow to avoid slowing user actions
- Use consistent event naming conventions — lowercase with underscores (e.g., page_view, user_signup)
- Store metadata as a JSON text string for flexibility without creating extra fields
- Add date range filters to all analytics views so admins can analyze specific periods
- Set privacy rules restricting analytics data to admin users only
- Consider archiving or deleting raw AnalyticsEvent records older than 90 days to save storage

## Frequently asked questions

### Should I use custom analytics or Google Analytics?

Use both. Google Analytics tracks standard web metrics. Custom analytics track business-specific events like purchases, feature usage, and user engagement that Google Analytics cannot capture from your Bubble database.

### How do I prevent analytics events from consuming too many workload units?

Create events asynchronously via Schedule API Workflow, pre-aggregate daily data to reduce dashboard queries, and archive or delete raw events older than 90 days.

### What chart plugin works best in Bubble?

Chart Element (by Bubble) is the simplest option. For more customization, ApexCharts or Chart.js plugins offer more chart types, better styling, and interactive features like tooltips and zoom.

### Can I track events from users who are not logged in?

Yes. Leave the user field empty for anonymous events and track by session or a cookie-based identifier stored in a custom state.

### Can RapidDev help build a custom analytics dashboard in Bubble?

Yes. RapidDev can design and build a complete analytics system including event tracking, data aggregation, interactive dashboards with charts, and CSV export functionality tailored to your business metrics.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-custom-analytics-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-custom-analytics-in-bubble