Merge pull request #1 from mapswipe/analytics

Add Firebase Analytics event logging

.env.development.local.sample

@@ -1,5 +1,3 @@
-VITE_COMMUNITY_DASHBOARD_URL='https://dev-community.mapswipe.org'
-
 # Firebase development API key for MapSwipe development Firebase
 # Copy into .env.development.local
 VITE_FIREBASE_API_KEY=
@@ -8,4 +6,5 @@ VITE_FIREBASE_DATABASE_URL=
 VITE_FIREBASE_PROJECT_ID=
 VITE_FIREBASE_STORAGE_BUCKET=
 VITE_FIREBASE_MESSAGING_SENDER_ID=
-VITE_FIREBASE_APP_ID=
+VITE_FIREBASE_APP_ID=
+VITE_FIREBASE_MEASUREMENT_ID=

.env.production.local.sample

@@ -7,3 +7,4 @@ VITE_FIREBASE_PROJECT_ID=
 VITE_FIREBASE_STORAGE_BUCKET=
 VITE_FIREBASE_MESSAGING_SENDER_ID=
 VITE_FIREBASE_APP_ID=
+VITE_FIREBASE_MEASUREMENT_ID=

.github/workflows/deploy.yml

@@ -49,6 +49,7 @@ jobs:
           VITE_FIREBASE_DATABASE_URL: "${{ secrets.VITE_FIREBASE_DATABASE_URL }}"
           VITE_FIREBASE_PROJECT_ID: "${{ secrets.VITE_FIREBASE_PROJECT_ID }}"
           VITE_FIREBASE_STORAGE_BUCKET: "${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }}"
+          VITE_FIREBASE_MEASUREMENT_ID: "${{ secrets.VITE_FIREBASE_MEASUREMENT_ID }}"
           VITE_FIREBASE_MESSAGING_SENDER_ID: "${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID }}"
           VITE_FIREBASE_APP_ID: "${{ secrets.VITE_FIREBASE_APP_ID }}"
         run: yarn build-ghpages-dev # or pnpm docs:build / yarn docs:build / bun run docs:build
@@ -65,6 +66,7 @@ jobs:
             VITE_FIREBASE_DATABASE_URL: "${{ secrets.VITE_FIREBASE_DATABASE_URL_PROD }}"
             VITE_FIREBASE_PROJECT_ID: "${{ secrets.VITE_FIREBASE_PROJECT_ID_PROD }}"
             VITE_FIREBASE_STORAGE_BUCKET: "${{ secrets.VITE_FIREBASE_STORAGE_BUCKET_PROD }}"
+            VITE_FIREBASE_MEASUREMENT_ID: "${{ secrets.VITE_FIREBASE_MEASUREMENT_ID_PROD }}"
             VITE_FIREBASE_MESSAGING_SENDER_ID: "${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID_PROD }}"
             VITE_FIREBASE_APP_ID: "${{ secrets.VITE_FIREBASE_APP_ID_PROD }}"
         run: yarn build-ghpages-prod 

src/components/CompareProject.vue

@@ -86,6 +86,7 @@ export default defineComponent({
     }
   },
   inject: {
+    logMappingStarted: 'logMappingStarted',
     saveResults: 'saveResults',
   },
   computed: {
@@ -119,6 +120,7 @@ export default defineComponent({
   created() {
     this.startTime = new Date().toISOString()
     this.taskId = this.tasks[this.taskIndex].taskId
+    this.logMappingStarted(this.project.projectType)
   },
 })
 </script>

src/components/DigitizeProject.vue

@@ -54,6 +54,7 @@ export default defineComponent({
     }
   },
   inject: {
+    logMappingStarted: 'logMappingStarted',
     saveResults: 'saveResults',
   },
   computed: {
@@ -190,6 +191,7 @@ export default defineComponent({
     this.taskId = this.tasks[this.taskIndex].taskId
     this.updateTaskFeature()
     if (this.tasks.length === 1) this.endReached = true
+    this.logMappingStarted(this.project.projectType)
   },
 })
 </script>

src/components/FindProject.vue

@@ -61,6 +61,7 @@ export default defineComponent({
     }
   },
   inject: {
+    logMappingStarted: 'logMappingStarted',
     saveResults: 'saveResults',
     showSnackbar: 'showSnackbar',
   },
@@ -249,6 +250,7 @@ export default defineComponent({
   created() {
     this.startTime = new Date().toISOString()
     this.processedTasks.forEach((task) => (this.results[task.taskId] = this.options[0].value))
+    this.logMappingStarted(this.project.projectType)
   },
 })
 </script>

src/components/MediaProject.vue

@@ -51,6 +51,7 @@ export default defineComponent({
     }
   },
   inject: {
+    logMappingStarted: 'logMappingStarted',
     saveResults: 'saveResults',
   },
   computed: {
@@ -108,6 +109,7 @@ export default defineComponent({
   created() {
     this.startTime = new Date().toISOString()
     this.taskId = this.tasks[this.taskIndex].taskId
+    this.logMappingStarted(this.project.projectType)
   },
 })
 </script>

src/components/SignIn.vue

@@ -2,6 +2,8 @@
 import { defineComponent } from 'vue'
 import { i18nRoute } from '@/i18n/translation'
 import { signInWithEmailAndPassword, getAuth } from 'firebase/auth'
+import { logEvent } from 'firebase/analytics'
+import { fbAnalytics } from '@/firebase'
 
 export default defineComponent({
   data() {
@@ -54,6 +56,7 @@ export default defineComponent({
                 }),
               )
             }
+            logEvent(fbAnalytics, 'account_login')
           })
           .catch((error) => {
             const errorMsg = this.$te(`authView.authErrors.${error.code}`)

src/components/SignUp.vue

@@ -7,6 +7,8 @@ import {
   updateProfile,
 } from 'firebase/auth'
 import { getDatabase, ref, set } from 'firebase/database'
+import { logEvent } from 'firebase/analytics'
+import { fbAnalytics } from '@/firebase'
 import { i18nRoute } from '@/i18n/translation'
 
 export default defineComponent({
@@ -78,6 +80,7 @@ export default defineComponent({
             ])
           })
           .then(() => {
+            logEvent(fbAnalytics, 'account_created')
             this.$router.push(
               i18nRoute({ name: 'authentication', params: { authTab: 'recover-account' } }),
             )

src/components/ValidateProject.vue

@@ -87,6 +87,7 @@ export default defineComponent({
     }
   },
   inject: {
+    logMappingStarted: 'logMappingStarted',
     saveResults: 'saveResults',
   },
   computed: {
@@ -162,6 +163,7 @@ export default defineComponent({
     this.startTime = new Date().toISOString()
     this.taskId = this.tasks[this.taskIndex].taskId
     this.updateTaskFeature()
+    this.logMappingStarted(this.project.projectType)
   },
 })
 </script>

src/firebase/index.ts

@@ -1,4 +1,5 @@
 import { initializeApp } from 'firebase/app'
+import { initializeAnalytics } from 'firebase/analytics'
 import { equalTo, getDatabase, orderByChild, query, ref, startAfter } from 'firebase/database'
 
 const firebaseConfig = {
@@ -9,9 +10,11 @@ const firebaseConfig = {
   storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
   messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
   appId: import.meta.env.VITE_FIREBASE_APP_ID,
+  measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
 }
 
 export const firebaseApp = initializeApp(firebaseConfig)
+export const fbAnalytics = initializeAnalytics(firebaseApp)
 
 // used for the database refs
 const db = getDatabase(firebaseApp)

src/views/ProfileView.vue

@@ -4,6 +4,8 @@ import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import { getAuth, signOut, updateProfile } from 'firebase/auth'
 import { getDatabase, ref, push, set, update, onValue } from 'firebase/database'
+import { logEvent } from 'firebase/analytics'
+import { fbAnalytics } from '@/firebase'
 import { useCurrentUserStore } from '@/stores/currentUser'
 import {
   dbRef,
@@ -76,8 +78,9 @@ export default defineComponent({
       this.user
         .delete()
         .then(() => {
-          this.$router.push(i18nRoute({ name: 'authentication', params: { authTab: 'sign-in' } })),
-            this.showSnackbar(this.$t(`profileView.accountDeleted`), 'success')
+          logEvent(fbAnalytics, 'delete_account')
+          this.$router.push(i18nRoute({ name: 'authentication', params: { authTab: 'sign-in' } }))
+          this.showSnackbar(this.$t(`profileView.accountDeleted`), 'success')
         })
         .catch(() => {
           this.showSnackbar(this.$t(`profileView.accountDeletionFailed`))
@@ -199,9 +202,10 @@ export default defineComponent({
       this.hideDialog()
       const auth = getAuth()
       signOut(auth)
-        .then(() =>
-          this.$router.push(i18nRoute({ name: 'authentication', params: { authTab: 'sign-in' } })),
-        )
+        .then(() => {
+          logEvent(fbAnalytics, 'sign_out')
+          this.$router.push(i18nRoute({ name: 'authentication', params: { authTab: 'sign-in' } }))
+        })
         .catch(() => this.showSnackbar(this.$t(`profileView.signOutFailed`), 'error'))
     },
   },

src/views/ProjectView.vue

@@ -1,7 +1,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { onValue, set } from 'firebase/database'
+import { logEvent } from 'firebase/analytics'
 import {
+  fbAnalytics,
   getGroupsQuery,
   getProjectRef,
   getProjectContributionsRef,
@@ -45,6 +47,9 @@ export default defineComponent({
   },
   provide() {
     return {
+      logMappingStarted: (projectType) => {
+        logEvent(fbAnalytics, 'mapping_started', { projectType: projectType })
+      },
       saveResults: (results, startTime) => {
         const entry = {
           endTime: new Date().toISOString(),
@@ -60,6 +65,7 @@ export default defineComponent({
               this.$t('projectView.resultsSaved', { user: this.user.displayName }),
               'success',
             )
+            logEvent(fbAnalytics, 'complete_group')
             this.mode = 'finished'
             this.nextDialog = true
           })
@@ -199,6 +205,7 @@ export default defineComponent({
     this.bindProject()
     this.bindProjectContributions()
     this.bindTaskGroup()
+    logEvent(fbAnalytics, 'project_view_opened')
   },
 })
 </script>

src/views/ProjectsView.vue

@@ -2,8 +2,9 @@
 import { defineComponent } from 'vue'
 import BasicPage from '@/components/BasicPage.vue'
 import ProjectMoreInfo from '@/components/ProjectMoreInfo.vue'
-import { onValue } from 'firebase/database'
-import { activeProjectsQuery, getUserContributionsRef } from '@/firebase'
+import { ref, getDatabase, onValue, set } from 'firebase/database'
+import { logEvent } from 'firebase/analytics'
+import { activeProjectsQuery, fbAnalytics, getUserContributionsRef } from '@/firebase'
 import { i18nRoute } from '@/i18n/translation'
 import { mapStores } from 'pinia'
 import { useCurrentUserStore } from '@/stores/currentUser'
@@ -154,10 +155,16 @@ export default defineComponent({
       const translationName = 'projectsView.filterLabels.' + attribute
       return label || (this.$te(translationName) ? this.$t(translationName) : attribute)
     },
+    updateLastAppUse() {
+      const userId = this.user.uid
+      set(ref(getDatabase(), `/v2/users/${userId}/lastAppUse`), new Date().toISOString())
+    },
   },
   mounted() {
     this.bindProjects()
     this.bindUserContributions()
+    logEvent(fbAnalytics, 'app_home_seen')
+    this.updateLastAppUse()
   },
 })
 </script>