Understanding Embedded Analytics
Embedded analytics is the integration of analytical capabilities such as dashboards, visualizations, and reports directly into an application’s user interface. Instead of requiring users to navigate to a separate business intelligence (BI) tool, embedded analytics brings insights directly to where users are working, leading to more seamless decision-making and improved user experience.
Metabase is a popular open-source BI tool that simplifies data exploration and visualization. With its intuitive interface, users can create dashboards, write SQL queries, and generate reports without needing extensive technical expertise. Now, with its Embedded Analytics SDK, Metabase extends these capabilities to developers, enabling them to embed individual Metabase components directly into their applications using React.
For an overview of Metabase’s embedded analytics offerings, check out our blog post here.
An overview of the Metabase Embedded Analytics SDK
The Embedded Analytics SDK is currently available only on Pro and Enterprise plans. However, developers can experiment with the SDK locally without a license by using API keys for authentication.
Key Features
- Embed standalone Metabase components like charts, dashboards, and the query builder directly within a React application.
- Manage access and interactivity on a per-component basis.
- Style components seamlessly to match your application’s UI and improve the overall look and feel of embedded analytics.
SDK Prerequisites & Limitations
When deciding if the SDK is the right tool for you, make sure you have:
- React 17 or 18
- Node.js 20.x or higher
Right now Metabase doesn’t support other JavaScript frameworks such as Angular or Vue. If your app isn’t JavaScript based, you will need to implement the iframe method.
While the Embedded Analytics SDK is powerful, it has some limitations:
- No support for verified content & official collections
- No subscriptions or alerts
- No server-side rendering (SSR)
- No support for multiple interactive dashboards on the same page (only static dashboards can be embedded)
- No support for React 19
Use Case
For larger companies that need full granular control over the look and feel of analytics within their application, the Embedded Analytics SDK provides deep customization options. Unlike the simpler iframe embedding method, which allows for quick and easy integration, using the SDK requires more development effort. Companies with strict branding guidelines, unique user interactions, or advanced security requirements will benefit from the SDK’s flexibility.
This approach is more complex and developer-intensive, requiring developer time to integrate and style each component according to business needs. For cases where developer time is limited, it is best to embed an iframe rather than embed components in the application layer.
Example Applications
To showcase the capabilities of the Embedded Analytics SDK, Metabase created an example app called Shoppy (demo available here), which provides four different use cases:
- ProficiencyLabs – An upskilling company.
- theStitch – A clothing shop.
- Luminara – A beauty storefront.
- Pug and Play – A dog accessory storefront.
You can explore the source code for Shoppy here to see how Metabase components are embedded into different business applications.
Metabase’s Embedded Analytics SDK makes it easier than ever to integrate powerful analytics directly into applications. By offering granular access control and seamless customization, it significantly improves the look and feel of embedded analytics.
For more details, check out the official documentation and start experimenting with the SDK today! Want help with implementation? Driftwave is a boutique firm focused on helping small to medium sized growth businesses make the most of their data. We offer expert analytics consulting to get you up and running quickly.