"use strict";(self.webpackChunkdocs_website=self.webpackChunkdocs_website||[]).push([[80130],{15680:(e,t,n)=>{n.d(t,{xA:()=>g,yg:()=>d});var a=n(96540);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var p=a.createContext({}),c=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},g=function(e){var t=c(e.components);return a.createElement(p.Provider,{value:t},e.children)},s="mdxType",y={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var n=e.components,i=e.mdxType,r=e.originalType,p=e.parentName,g=o(e,["components","mdxType","originalType","parentName"]),s=c(n),u=i,d=s["".concat(p,".").concat(u)]||s[u]||y[u]||r;return n?a.createElement(d,l(l({ref:t},g),{},{components:n})):a.createElement(d,l({ref:t},g))}));function d(e,t){var n=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var r=n.length,l=new Array(r);l[0]=u;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o[s]="string"==typeof e?e:i,l[1]=o;for(var c=2;c<r;c++)l[c]=n[c];return a.createElement.apply(null,l)}return a.createElement.apply(null,n)}u.displayName="MDXCreateElement"},26025:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>g,contentTitle:()=>p,default:()=>d,frontMatter:()=>o,metadata:()=>c,toc:()=>s});n(96540);var a=n(15680);function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}function l(e,t){if(null==e)return{};var n,a,i=function(e,t){if(null==e)return{};var n,a,i={},r=Object.keys(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(a=0;a<r.length;a++)n=r[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}const o={title:"DataHub React Analytics",sidebar_label:"React Analytics",slug:"/datahub-web-react/src/app/analytics",custom_edit_url:"https://github.com/datahub-project/datahub/blob/master/datahub-web-react/src/app/analytics/README.md"},p="DataHub React Analytics",c={unversionedId:"datahub-web-react/src/app/analytics/README",id:"version-1.1.0/datahub-web-react/src/app/analytics/README",title:"DataHub React Analytics",description:"About",source:"@site/versioned_docs/version-1.1.0/datahub-web-react/src/app/analytics/README.md",sourceDirName:"datahub-web-react/src/app/analytics",slug:"/datahub-web-react/src/app/analytics",permalink:"/docs/1.1.0/datahub-web-react/src/app/analytics",draft:!1,editUrl:"https://github.com/datahub-project/datahub/blob/master/datahub-web-react/src/app/analytics/README.md",tags:[],version:"1.1.0",frontMatter:{title:"DataHub React Analytics",sidebar_label:"React Analytics",slug:"/datahub-web-react/src/app/analytics",custom_edit_url:"https://github.com/datahub-project/datahub/blob/master/datahub-web-react/src/app/analytics/README.md"},sidebar:"overviewSidebar",previous:{title:"API Tracing",permalink:"/docs/1.1.0/advanced/api-tracing"},next:{title:"Upgrade Docker Image",permalink:"/docs/1.1.0/docker/datahub-upgrade"}},g={},s=[{value:"About",id:"about",level:2},{value:"Configuring an Analytics Provider",id:"configuring-an-analytics-provider",level:2},{value:"Mixpanel",id:"mixpanel",level:3},{value:"Amplitude",id:"amplitude",level:3},{value:"Google Analytics",id:"google-analytics",level:3},{value:"Verifying your Analytics Setup",id:"verifying-your-analytics-setup",level:2},{value:"Development",id:"development",level:2},{value:"Adding a plugin",id:"adding-a-plugin",level:3},{value:"Adding an event",id:"adding-an-event",level:3},{value:"Emitting an event",id:"emitting-an-event",level:3},{value:"Debugging: Enabling Event Logging",id:"debugging-enabling-event-logging",level:3},{value:"Coming Soon",id:"coming-soon",level:2}],y={toc:s},u="wrapper";function d(e){var{components:t}=e,n=l(e,["components"]);return(0,a.yg)(u,r(function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},a=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),a.forEach((function(t){i(e,t,n[t])}))}return e}({},y,n),{components:t,mdxType:"MDXLayout"}),(0,a.yg)("h1",{id:"datahub-react-analytics"},"DataHub React Analytics"),(0,a.yg)("h2",{id:"about"},"About"),(0,a.yg)("p",null,"The DataHub React application can be configured to emit a set of standardized product analytics events to multiple backend providers including"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},"Mixpanel"),(0,a.yg)("li",{parentName:"ul"},"Amplitude"),(0,a.yg)("li",{parentName:"ul"},"Google Analytics")),(0,a.yg)("p",null,"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."),(0,a.yg)("p",null,"To accomplish this, we have built a small extension on top of the popular ",(0,a.yg)("a",{parentName:"p",href:"https://www.npmjs.com/package/analytics"},"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 ",(0,a.yg)("a",{parentName:"p",href:"https://github.com/DavidWells/analytics#analytic-plugins"},"here"),"."),(0,a.yg)("h2",{id:"configuring-an-analytics-provider"},"Configuring an Analytics Provider"),(0,a.yg)("p",null,"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."),(0,a.yg)("h3",{id:"mixpanel"},"Mixpanel"),(0,a.yg)("ol",null,(0,a.yg)("li",{parentName:"ol"},"Open ",(0,a.yg)("inlineCode",{parentName:"li"},"datahub-web-react/src/conf/analytics.ts")),(0,a.yg)("li",{parentName:"ol"},"Uncomment the ",(0,a.yg)("inlineCode",{parentName:"li"},"mixpanel")," field within the ",(0,a.yg)("inlineCode",{parentName:"li"},"config")," object."),(0,a.yg)("li",{parentName:"ol"},"Replace the sample ",(0,a.yg)("inlineCode",{parentName:"li"},"token")," with the API token provided by Mixpanel."),(0,a.yg)("li",{parentName:"ol"},"Rebuild & redeploy ",(0,a.yg)("inlineCode",{parentName:"li"},"datahub-frontend-react")," to start tracking.")),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-typescript"},"const config: any = {\n    mixpanel: {\n        token: 'fad1285da4e618b618973cacf6565e61',\n    },\n};\n")),(0,a.yg)("h3",{id:"amplitude"},"Amplitude"),(0,a.yg)("ol",null,(0,a.yg)("li",{parentName:"ol"},"Open ",(0,a.yg)("inlineCode",{parentName:"li"},"datahub-web-react/src/conf/analytics.ts")),(0,a.yg)("li",{parentName:"ol"},"Uncomment the ",(0,a.yg)("inlineCode",{parentName:"li"},"amplitude")," field within the ",(0,a.yg)("inlineCode",{parentName:"li"},"config")," object."),(0,a.yg)("li",{parentName:"ol"},"Replace the sample ",(0,a.yg)("inlineCode",{parentName:"li"},"apiKey")," with the key provided by Amplitude."),(0,a.yg)("li",{parentName:"ol"},"Rebuild & redeploy ",(0,a.yg)("inlineCode",{parentName:"li"},"datahub-frontend-react")," to start tracking.")),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-typescript"},"const config: any = {\n    amplitude: {\n        apiKey: 'c5c212632315d19c752ab083bc7c92ff',\n    },\n};\n")),(0,a.yg)("h3",{id:"google-analytics"},"Google Analytics"),(0,a.yg)("ol",null,(0,a.yg)("li",{parentName:"ol"},"Open ",(0,a.yg)("inlineCode",{parentName:"li"},"datahub-web-react/src/conf/analytics.ts")),(0,a.yg)("li",{parentName:"ol"},"Uncomment the ",(0,a.yg)("inlineCode",{parentName:"li"},"googleAnalytics")," field within the ",(0,a.yg)("inlineCode",{parentName:"li"},"config"),"."),(0,a.yg)("li",{parentName:"ol"},"Replace the sample ",(0,a.yg)("inlineCode",{parentName:"li"},"measurementIds")," with the one provided by Google Analytics."),(0,a.yg)("li",{parentName:"ol"},"Rebuild & redeploy ",(0,a.yg)("inlineCode",{parentName:"li"},"datahub-frontend-react")," to start tracking.")),(0,a.yg)("p",null,"Example:"),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-typescript"},"const config: any = {\n    googleAnalytics: {\n        measurementIds: ['G-ATV123'],\n    },\n};\n")),(0,a.yg)("h2",{id:"verifying-your-analytics-setup"},"Verifying your Analytics Setup"),(0,a.yg)("p",null,"To verify that analytics are being sent to your provider, you can inspect the networking tab of a Google Chrome inspector window:"),(0,a.yg)("p",null,"With DataHub open on Google Chrome"),(0,a.yg)("ol",null,(0,a.yg)("li",{parentName:"ol"},"Right click, then Inspect"),(0,a.yg)("li",{parentName:"ol"},"Click 'Network'"),(0,a.yg)("li",{parentName:"ol"},"Issue a search in DataHub"),(0,a.yg)("li",{parentName:"ol"},"Inspect the outbound traffic for requests routed to your analytics provider.")),(0,a.yg)("h2",{id:"development"},"Development"),(0,a.yg)("h3",{id:"adding-a-plugin"},"Adding a plugin"),(0,a.yg)("p",null,"To add a new plugin from the ",(0,a.yg)("a",{parentName:"p",href:"https://www.npmjs.com/package/analytics"},"Analytics")," library:"),(0,a.yg)("ol",null,(0,a.yg)("li",{parentName:"ol"},"Add a new file under ",(0,a.yg)("inlineCode",{parentName:"li"},"src/app/analytics/plugin")," named based on the plugin"),(0,a.yg)("li",{parentName:"ol"},"Extract configs from the analytics config object required to instantiate the plugin"),(0,a.yg)("li",{parentName:"ol"},"Instantiate the plugin"),(0,a.yg)("li",{parentName:"ol"},"Export a default object with 'isEnabled' and 'plugin' fields"),(0,a.yg)("li",{parentName:"ol"},"Import / Export the new plugin module from ",(0,a.yg)("inlineCode",{parentName:"li"},"src/app/analytics/plugin/index.js"))),(0,a.yg)("p",null,"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."),(0,a.yg)("h3",{id:"adding-an-event"},"Adding an event"),(0,a.yg)("p",null,"To add a new DataHub analytics event, make the following changes to ",(0,a.yg)("inlineCode",{parentName:"p"},"src/app/analytics/event.ts"),":"),(0,a.yg)("ol",null,(0,a.yg)("li",{parentName:"ol"},"Add a new value to the ",(0,a.yg)("inlineCode",{parentName:"li"},"EventType")," enum")),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-typescript"},"   export enum EventType {\n    LogInEvent,\n    LogOutEvent,\n    ...,\n    MyNewEvent\n}\n")),(0,a.yg)("ol",{start:2},(0,a.yg)("li",{parentName:"ol"},"Create a new interface extending ",(0,a.yg)("inlineCode",{parentName:"li"},"BaseEvent"))),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-typescript"},"export interface MyNewEvent extends BaseEvent {\n    type: EventType.MyNewEvent; // must be the type you just added\n    ... your event's custom fields\n}\n")),(0,a.yg)("ol",{start:3},(0,a.yg)("li",{parentName:"ol"},"Add the interface to the exported ",(0,a.yg)("inlineCode",{parentName:"li"},"Event")," type.")),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-typescript"},"export type Event =\n    | LogInEvent\n    | LogOutEvent\n    ....\n    | MyNewEvent\n")),(0,a.yg)("h3",{id:"emitting-an-event"},"Emitting an event"),(0,a.yg)("p",null,"Emitting a tracking DataHub analytics event is a 2-step process:"),(0,a.yg)("ol",null,(0,a.yg)("li",{parentName:"ol"},"Import relevant items from ",(0,a.yg)("inlineCode",{parentName:"li"},"analytics")," module")),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-typescript"},"import analytics, { EventType } from '../analytics';\n")),(0,a.yg)("ol",{start:2},(0,a.yg)("li",{parentName:"ol"},"Call the ",(0,a.yg)("inlineCode",{parentName:"li"},"event")," method, passing in an event object of the appropriate type")),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-typescript"},"analytics.event({ type: EventType.MyNewEvent, ...my event fields });\n")),(0,a.yg)("h3",{id:"debugging-enabling-event-logging"},"Debugging: Enabling Event Logging"),(0,a.yg)("p",null,"To log events to the console for debugging / verification purposes"),(0,a.yg)("ol",null,(0,a.yg)("li",{parentName:"ol"},"Open ",(0,a.yg)("inlineCode",{parentName:"li"},"datahub-web-react/src/conf/analytics.ts")),(0,a.yg)("li",{parentName:"ol"},"Uncomment ",(0,a.yg)("inlineCode",{parentName:"li"},"logging: true")," within the ",(0,a.yg)("inlineCode",{parentName:"li"},"config")," object."),(0,a.yg)("li",{parentName:"ol"},"Rebuild & redeploy ",(0,a.yg)("inlineCode",{parentName:"li"},"datahub-frontend-react")," to start logging all events to your browser's console.")),(0,a.yg)("h2",{id:"coming-soon"},"Coming Soon"),(0,a.yg)("p",null,"In the near future, we intend to"),(0,a.yg)("ol",null,(0,a.yg)("li",{parentName:"ol"},"Send product analytics events back to DataHub itself, using them as feedback to improve the product experience."),(0,a.yg)("li",{parentName:"ol"},"No-code configuration of Analytics plugins. This will be achieved using server driven configuration for the React app.")))}d.isMDXComponent=!0}}]);