analytics - identify user + extra actions added

packages/builder/package.json

@@ -75,7 +75,7 @@
     "fast-sort": "^2.2.0",
     "lodash": "^4.17.13",
     "mustache": "^4.0.1",
-    "posthog-js": "1.3.1",
+    "posthog-js": "1.4.5",
     "shortid": "^2.2.15",
     "svelte-loading-spinners": "^0.1.1",
     "svelte-portal": "^0.1.0",

packages/builder/rollup.config.js

@@ -158,6 +158,10 @@ export default {
           find: "constants",
           replacement: path.resolve(projectRootDir, "src/constants"),
         },
+        {
+          find: "analytics",
+          replacement: path.resolve(projectRootDir, "src/analytics"),
+        },
       ],
       customResolver,
     }),

packages/builder/src/analytics.js

@@ -2,15 +2,20 @@ import * as Sentry from "@sentry/browser"
 import posthog from "posthog-js"
 import api from "builderStore/api"
 
+const analyticsEnabled = process.env.NODE_ENV === "production"
+
 function activate() {
+  if (!analyticsEnabled) return
   Sentry.init({ dsn: process.env.SENTRY_DSN })
   if (!process.env.POSTHOG_TOKEN) return
   posthog.init(process.env.POSTHOG_TOKEN, {
     api_host: process.env.POSTHOG_URL,
   })
+  posthog.set_config({ persistence: "cookie" })
 }
 
 function identify(id) {
+  if (!analyticsEnabled) return
   if (!id) return
   posthog.identify(id)
   Sentry.configureScope(scope => {
@@ -19,6 +24,7 @@ function identify(id) {
 }
 
 async function identifyByApiKey(apiKey) {
+  if (!analyticsEnabled) return true
   const response = await fetch(
     `https://03gaine137.execute-api.eu-west-1.amazonaws.com/prod/account/id?api_key=${apiKey.trim()}`
   )
@@ -35,12 +41,14 @@ async function identifyByApiKey(apiKey) {
 }
 
 function captureException(err) {
+  if (!analyticsEnabled) return
   Sentry.captureException(err)
 }
 
-function captureEvent(event) {
+function captureEvent(eventName, props = {}) {
-  if (!process.env.POSTHOG_TOKEN) return
+  if (!analyticsEnabled || !process.env.POSTHOG_TOKEN) return
-  posthog.capture(event)
+  props.sourceApp = "builder"
+  posthog.capture(eventName, props)
 }
 
 export default {

packages/builder/src/builderStore/index.js

@@ -1,7 +1,7 @@
 import { getStore } from "./store"
 import { getBackendUiStore } from "./store/backend"
 import { getAutomationStore } from "./store/automation/"
-import analytics from "../analytics"
+import analytics from "analytics"
 
 export const store = getStore()
 export const backendUiStore = getBackendUiStore()
@@ -9,9 +9,8 @@ export const automationStore = getAutomationStore()
 
 export const initialise = async () => {
   try {
-    if (process.env.NODE_ENV === "production") {
+    analytics.activate()
-      analytics.activate()
+    analytics.captureEvent("Builder Started")
-    }
   } catch (err) {
     console.log(err)
   }

packages/builder/src/builderStore/store/index.js

@@ -14,6 +14,7 @@ import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
 import { buildCodeForScreens } from "../buildCodeForScreens"
 import { generate_screen_css } from "../generate_css"
 import { insertCodeMetadata } from "../insertCodeMetadata"
+import analytics from "analytics"
 import { uuid } from "../uuid"
 import {
   selectComponent as _selectComponent,
@@ -308,7 +309,9 @@ const addChildComponent = store => (componentToAdd, presetProps = {}) => {
 
     state.currentView = "component"
     state.currentComponentInfo = newComponent.props
-
+    analytics.captureEvent("Added Component", {
+      name: newComponent.props._component,
+    })
     return state
   })
 }

packages/builder/src/components/automation/AutomationPanel/AutomationList/CreateAutomationModal.svelte

@@ -3,6 +3,7 @@
   import { notifier } from "builderStore/store/notifications"
   import ActionButton from "components/common/ActionButton.svelte"
   import { Input } from "@budibase/bbui"
+  import analytics from "analytics"
 
   export let onClosed
 
@@ -19,6 +20,7 @@
     })
     onClosed()
     notifier.success(`Automation ${name} created.`)
+    analytics.captureEvent("Automation Created", { name })
   }
 </script>
 

packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte

@@ -1,5 +1,6 @@
 <script>
   import { automationStore } from "builderStore"
+  import analytics from "analytics"
 
   export let blockDefinition
   export let stepId
@@ -12,6 +13,9 @@
       stepId,
       type: blockType,
     })
+    analytics.captureEvent("Added Automation Block", {
+      name: blockDefinition.name,
+    })
   }
 </script>
 

packages/builder/src/components/database/DataTable/popovers/Calculate.svelte

@@ -10,6 +10,7 @@
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import CreateEditRecord from "../modals/CreateEditRecord.svelte"
+  import analytics from "analytics"
 
   const CALCULATIONS = [
     {
@@ -35,6 +36,7 @@
   function saveView() {
     backendUiStore.actions.views.save(view)
     notifier.success(`View ${view.name} saved.`)
+    analytics.captureEvent("Added View Calculate")
     dropdown.hide()
   }
 </script>

packages/builder/src/components/database/DataTable/popovers/Filter.svelte

@@ -10,6 +10,7 @@
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import CreateEditRecord from "../modals/CreateEditRecord.svelte"
+  import analytics from "analytics"
 
   const CONDITIONS = [
     {
@@ -63,6 +64,7 @@
     backendUiStore.actions.views.save(view)
     notifier.success(`View ${view.name} saved.`)
     dropdown.hide()
+    analytics.captureEvent("Added View Filter")
   }
 
   function removeFilter(idx) {

packages/builder/src/components/database/DataTable/popovers/View.svelte

@@ -11,6 +11,7 @@
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import CreateEditRecord from "../modals/CreateEditRecord.svelte"
+  import analytics from "analytics"
 
   let anchor
   let dropdown
@@ -37,6 +38,7 @@
     })
     notifier.success(`View ${name} created`)
     dropdown.hide()
+    analytics.captureEvent("View Created", { name })
     $goto(`../../../view/${name}`)
   }
 </script>

packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte

@@ -3,6 +3,7 @@
   import { backendUiStore } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
+  import analytics from "analytics"
 
   export let table
 
@@ -19,6 +20,7 @@
     $goto(`./model/${model._id}`)
     name = ""
     dropdown.hide()
+    analytics.captureEvent("Table Created", { name })
   }
 
   const onClosed = () => {

packages/builder/src/components/settings/tabs/APIKeys.svelte

@@ -3,7 +3,7 @@
   import { store } from "builderStore"
   import api from "builderStore/api"
   import posthog from "posthog-js"
-  import analytics from "../../../analytics"
+  import analytics from "analytics"
 
   let keys = { budibase: "", sendGrid: "" }
 

packages/builder/src/components/start/CreateAppModal.svelte

@@ -14,7 +14,7 @@
   import { getContext } from "svelte"
   import { fade } from "svelte/transition"
   import { post } from "builderStore/api"
-  import analytics from "../../analytics"
+  import analytics from "analytics"
 
   const { open, close } = getContext("simple-modal")
   //Move this to context="module" once svelte-forms is updated so that it can bind to stores correctly
@@ -141,7 +141,7 @@
         name: $createAppStore.values.applicationName,
       })
       const appJson = await appResp.json()
-      analytics.captureEvent("web_app_created", {
+      analytics.captureEvent("App Created", {
         name,
         appId: appJson._id,
       })

packages/builder/src/pages/[application]/deploy/index.svelte

@@ -4,7 +4,7 @@
   import { notifier } from "builderStore/store/notifications"
   import api from "builderStore/api"
   import Spinner from "components/common/Spinner.svelte"
-  import analytics from "../../../analytics"
+  import analytics from "analytics"
 
   let deployed = false
   let loading = false
@@ -26,10 +26,13 @@
       notifier.success(`Your Deployment is Complete.`)
       deployed = true
       loading = false
-      analytics.captureEvent("web_app_deployment", {
+      analytics.captureEvent("Deployed App", {
         appId,
       })
     } catch (err) {
+      analytics.captureEvent("Deploy App Failed", {
+        appId,
+      })
       analytics.captureException(err)
       notifier.danger("Deployment unsuccessful. Please try again later.")
       loading = false

packages/builder/src/pages/index.svelte

@@ -9,7 +9,7 @@
   import Spinner from "components/common/Spinner.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import { Button } from "@budibase/bbui"
-  import analytics from "../analytics"
+  import analytics from "analytics"
 
   let promise = getApps()
 
@@ -28,16 +28,15 @@
 
   async function fetchKeys() {
     const response = await api.get(`/api/keys/`)
-    const res = await response.json()
+    return await response.json()
-    return res.budibase
   }
 
   async function checkIfKeysAndApps() {
-    const key = await fetchKeys()
+    const keys = await fetchKeys()
     const apps = await getApps()
-    if (key) {
+    if (keys.userId) {
       hasKey = true
-      analytics.identify(key.userId)
+      analytics.identify(keys.userId)
     } else {
       showCreateAppModal()
     }

packages/builder/yarn.lock

@@ -4847,9 +4847,10 @@ posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
 
-posthog-js@1.3.1:
+posthog-js@1.4.5:
-  version "1.3.1"
+  version "1.4.5"
-  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.3.1.tgz#970acec1423eaa5dba0d2603410c9c70294e16da"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.4.5.tgz#b16235afe47938bd71eaed4ede3790c8b910ed71"
+  integrity sha512-Rzc5/DpuX55BqwNEbZB0tLav1gEinnr5H+82cbLiMtXLADlxmCwZiEaVXcC3XOqW0x8bcAEehicx1TbpfBamzA==
 
 prelude-ls@~1.1.2:
   version "1.1.2"

packages/server/src/api/controllers/apikeys.js

@@ -8,6 +8,7 @@ exports.fetch = async function(ctx) {
   ctx.body = {
     budibase: process.env.BUDIBASE_API_KEY,
     sendgrid: process.env.SENDGRID_API_KEY,
+    userId: process.env.USERID_API_KEY,
   }
 }