The DataHub React application can be configured to emit a set of standardized product analytics events to multiple backend providers including
- Mixpanel
- Amplitude
- Google Analytics
This provides operators of DataHub with visibility into how their users are engaging with the platform, allowing them to answer questions around weekly active users, the most used features, the least used features, and more.
To accomplish this, we have built a small extension on top of the popular Analytics npm package. This package was chosen because it offers a clear pathway to extending support to many other providers, all of which you can find listed here.
Currently, configuring an analytics provider requires that you fork DataHub & modify code. As described in 'Coming Soon', we intend to improve this process by implementing no-code configuration.
- Open
datahub-web-react/src/conf/analytics.ts
- Uncomment the
mixpanel
field within theconfig
object. - Replace the sample
token
with the API token provided by Mixpanel. - Rebuild & redeploy
datahub-frontend-react
to start tracking.
const config: any = {
mixpanel: {
token: 'fad1285da4e618b618973cacf6565e61',
},
};
- Open
datahub-web-react/src/conf/analytics.ts
- Uncomment the
amplitude
field within theconfig
object. - Replace the sample
apiKey
with the key provided by Amplitude. - Rebuild & redeploy
datahub-frontend-react
to start tracking.
const config: any = {
amplitude: {
apiKey: 'c5c212632315d19c752ab083bc7c92ff',
},
};
Disclaimers
- This plugin requires use of Universal Analytics and does not yet support GA4. To create a Universal Analytics Property, follow this guide.
- Google Analytics lacks robust support for custom event properties. For that reason many of the DataHub events discussed above will not be fully populated. Instead, we map certain fields of the DataHub event to the standard
category
,action
,label
fields required by GA.
- Open
datahub-web-react/src/conf/analytics.ts
- Uncomment the
googleAnalytics
field within theconfig
object. - Replace the sample
trackingId
with the one provided by Google Analytics. - Rebuild & redeploy
datahub-frontend-react
to start tracking.
const config: any = {
googleAnalytics: {
trackingId: 'UA-24123123-01',
},
};
To verify that analytics are being sent to your provider, you can inspect the networking tab of a Google Chrome inspector window:
With DataHub open on Google Chrome
- Right click, then Inspect
- Click 'Network'
- Issue a search in DataHub
- Inspect the outbound traffic for requests routed to your analytics provider.
To add a new plugin from the Analytics library:
- Add a new file under
src/app/analytics/plugin
named based on the plugin - Extract configs from the analytics config object required to instantiate the plugin
- Instantiate the plugin
- Export a default object with 'isEnabled' and 'plugin' fields
- Import / Export the new plugin module from
src/app/analytics/plugin/index.js
If you're unsure, check out the existing plugin implements as examples. Before contributing a plugin, please be sure to verify the integration by viewing the product metrics in the new analytics provider.
To add a new DataHub analytics event, make the following changes to src/app/analytics/event.ts
:
- Add a new value to the
EventType
enum
export enum EventType {
LogInEvent,
LogOutEvent,
...,
MyNewEvent
}
- Create a new interface extending
BaseEvent
export interface MyNewEvent extends BaseEvent {
type: EventType.MyNewEvent; // must be the type you just added
... your event's custom fields
}
- Add the interface to the exported
Event
type.
export type Event =
| LogInEvent
| LogOutEvent
....
| MyNewEvent
Emitting a tracking DataHub analytics event is a 2-step process:
- Import relevant items from
analytics
module
import analytics, { EventType } from '../analytics';
- Call the
event
method, passing in an event object of the appropriate type
analytics.event({ type: EventType.MyNewEvent, ...my event fields });
To log events to the console for debugging / verification purposes
- Open
datahub-web-react/src/conf/analytics.ts
- Uncomment
logging: true
within theconfig
object. - Rebuild & redeploy
datahub-frontend-react
to start logging all events to your browser's console.
In the near future, we intend to
- Send product analytics events back to DataHub itself, using them as feedback to improve the product experience.
- No-code configuration of Analytics plugins. This will be achieved using server driven configuration for the React app.