Add Analytics to Generate CRUD template feat (appsmithorg#6503)

* Add Analytics to Generate CRUD template feat * Add analytics event on datasource click * Send pluginName instead of plugin obj in analytics
nnajiabraham · Aug 10, 2021 · 1827255 · 1827255
1 parent e9e2df2
commit 1827255
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 13 deletions.
diff --git a/app/client/src/pages/Editor/GeneratePage/components/ActionCards.tsx b/app/client/src/pages/Editor/GeneratePage/components/ActionCards.tsx
@@ -17,6 +17,7 @@ import {
 import { useDispatch, useSelector } from "react-redux";
 import { getCurrentPageId } from "selectors/editorSelectors";
 import { fetchPage } from "actions/pageActions";
+import AnalyticsUtil from "utils/AnalyticsUtil";
 
 type routeId = {
   applicationId: string;
@@ -27,10 +28,12 @@ const routeToEmptyEditorFromGenPage = ({
   applicationId,
   pageId,
 }: routeId): void => {
+  AnalyticsUtil.logEvent("BUILD_FROM_SCRATCH_ACTION_CARD_CLICK");
   history.push(BUILDER_PAGE_URL(applicationId, pageId));
 };
 
 const goToGenPageForm = ({ applicationId, pageId }: routeId): void => {
+  AnalyticsUtil.logEvent("GEN_CRUD_PAGE_ACTION_CARD_CLICK");
   history.push(getGenerateTemplateFormURL(applicationId, pageId));
 };
 

diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx
@@ -179,7 +179,11 @@ function GeneratePageForm() {
       dataSourceObj: DropdownOption | undefined,
     ) => {
       if (datasource && dataSourceObj) {
-        AnalyticsUtil.logEvent("GEN_CRUD_PAGE_SELECT_DATASOURCE");
+        const pluginId: string = dataSourceObj.data.pluginId;
+        const pluginPackageName: string = generateCRUDSupportedPlugin[pluginId];
+        AnalyticsUtil.logEvent("GEN_CRUD_PAGE_SELECT_DATASOURCE", {
+          datasourceType: pluginPackageName,
+        });
         selectDataSource(dataSourceObj);
         setSelectedDatasourceTableOptions([]);
         setSelectedTableColumnOptions([]);
@@ -191,6 +195,7 @@ function GeneratePageForm() {
       }
     },
     [
+      generateCRUDSupportedPlugin,
       selectDataSource,
       setSelectedDatasourceTableOptions,
       setSelectedTableColumnOptions,

diff --git a/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx b/app/client/src/pages/Editor/IntegrationEditor/DatasourceHome.tsx
@@ -149,11 +149,6 @@ class DatasourceHomeScreen extends React.Component<Props> {
       showUnsupportedPluginDialog,
     } = this.props;
 
-    AnalyticsUtil.logEvent("CREATE_DATA_SOURCE_CLICK", {
-      appName: currentApplication?.name,
-      plugin: pluginName,
-    });
-
     const isGeneratePageInitiator = getIsGeneratePageInitiator();
 
     /* When isGeneratePageMode is generate page (i.e., Navigating from generate-page) before creating datasource check is it supported datasource for generate template from db?
@@ -166,6 +161,11 @@ class DatasourceHomeScreen extends React.Component<Props> {
         Whenever user click on "continue" in UnsupportedPluginDialog, this callback function is invoked.
     */
     if (isGeneratePageInitiator && !params?.skipValidPluginCheck) {
+      AnalyticsUtil.logEvent("GEN_CRUD_PAGE_DATA_SOURCE_CLICK", {
+        appName: currentApplication?.name,
+        plugin: pluginName,
+        packageName: params?.packageName,
+      });
       if (!generateCRUDSupportedPlugin[pluginId]) {
         // show modal informing user that this will break the generate flow.
         showUnsupportedPluginDialog(() => {
@@ -187,7 +187,7 @@ class DatasourceHomeScreen extends React.Component<Props> {
   };
 
   render() {
-    const { pluginImages, plugins } = this.props;
+    const { currentApplication, pluginImages, plugins } = this.props;
 
     return (
       <DatasourceHomePage>
@@ -197,9 +197,16 @@ class DatasourceHomeScreen extends React.Component<Props> {
               <DatasourceCard
                 className="eachDatasourceCard"
                 key={`${plugin.id}_${idx}`}
-                onClick={() =>
-                  this.goToCreateDatasource(plugin.id, plugin.name)
-                }
+                onClick={() => {
+                  AnalyticsUtil.logEvent("CREATE_DATA_SOURCE_CLICK", {
+                    appName: currentApplication?.name,
+                    pluginName: plugin.name,
+                    pluginPackageName: plugin.packageName,
+                  });
+                  this.goToCreateDatasource(plugin.id, plugin.name, {
+                    packageName: plugin.packageName,
+                  });
+                }}
               >
                 <DatasourceContentWrapper>
                   <div className="dataSourceImageWrapper">

diff --git a/app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx b/app/client/src/pages/Editor/IntegrationEditor/MockDataSources.tsx
@@ -114,7 +114,8 @@ function MockDatasourceCard(props: MockDatasourceCardProps) {
     });
     AnalyticsUtil.logEvent("CREATE_DATA_SOURCE_CLICK", {
       mockDatasourceName: datasource.name,
-      plugin: currentPlugin,
+      pluginName: currentPlugin.name,
+      pluginPackageName: currentPlugin.packageName,
     });
     const queryParams = getQueryParams();
     dispatch(

diff --git a/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx b/app/client/src/pages/Editor/IntegrationEditor/NewApi.tsx
@@ -174,7 +174,8 @@ function NewApiScreen(props: Props) {
         pluginId: authApiPlugin.id,
       });
       AnalyticsUtil.logEvent("CREATE_DATA_SOURCE_CLICK", {
-        plugin: authApiPlugin,
+        pluginName: authApiPlugin.name,
+        pluginPackageName: authApiPlugin.packageName,
       });
       props.createDatasourceFromForm({
         pluginId: authApiPlugin.id,
@@ -300,7 +301,8 @@ function NewApiScreen(props: Props) {
               key={p.id}
               onClick={() => {
                 AnalyticsUtil.logEvent("CREATE_DATA_SOURCE_CLICK", {
-                  plugin: p,
+                  pluginName: p.name,
+                  pluginPackageName: p.packageName,
                 });
                 handleOnClick(API_ACTION.CREATE_DATASOURCE_FORM, {
                   pluginId: p.id,

diff --git a/app/client/src/utils/AnalyticsUtil.tsx b/app/client/src/utils/AnalyticsUtil.tsx
@@ -137,6 +137,10 @@ export type EventName =
   | "GEN_CRUD_PAGE_SELECT_DATASOURCE"
   | "GEN_CRUD_PAGE_SELECT_TABLE"
   | "GEN_CRUD_PAGE_SELECT_SEARCH_COLUMN"
+  | "GEN_CRUD_PAGE_SELECT_SEARCH_COLUMN"
+  | "BUILD_FROM_SCRATCH_ACTION_CARD_CLICK"
+  | "GEN_CRUD_PAGE_ACTION_CARD_CLICK"
+  | "GEN_CRUD_PAGE_DATA_SOURCE_CLICK"
   | "DATASOURCE_CARD_GEN_CRUD_PAGE_ACTION"
   | "DATASOURCE_CARD_DELETE_ACTION"
   | "DATASOURCE_CARD_EDIT_ACTION"