chore: Update analytics events (#6050)

app/controllers/dashboard_controller.rb

@@ -24,7 +24,6 @@ class DashboardController < ActionController::Base
       'API_CHANNEL_NAME',
       'API_CHANNEL_THUMBNAIL',
       'ANALYTICS_TOKEN',
-      'ANALYTICS_HOST',
       'DIRECT_UPLOADS_ENABLED',
       'HCAPTCHA_SITE_KEY',
       'LOGOUT_REDIRECT_LINK',

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -47,6 +47,9 @@ import {
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
+import AnalyticsHelper, {
+  ANALYTICS_EVENTS,
+} from '../../../helper/AnalyticsHelper';
 
 const createState = (content, placeholder, plugins = []) => {
   return EditorState.create({
@@ -268,6 +271,7 @@ export default {
       );
       this.state = this.editorView.state.apply(tr);
       this.emitOnChange();
+      AnalyticsHelper.track(ANALYTICS_EVENTS.USED_MENTIONS);
 
       return false;
     },
@@ -297,6 +301,7 @@ export default {
       this.emitOnChange();
 
       tr.scrollIntoView();
+      AnalyticsHelper.track(ANALYTICS_EVENTS.INSERTED_A_CANNED_RESPONSE);
       return false;
     },
 

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -161,6 +161,9 @@ import { LocalStorage, LOCAL_STORAGE_KEYS } from '../../../helper/localStorage';
 import { trimContent, debounce } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants';
 import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
+import AnalyticsHelper, {
+  ANALYTICS_EVENTS,
+} from '../../../helper/AnalyticsHelper';
 
 const EmojiInput = () => import('shared/components/emoji/EmojiInput');
 
@@ -698,6 +701,7 @@ export default {
     },
     replaceText(message) {
       setTimeout(() => {
+        AnalyticsHelper.track(ANALYTICS_EVENTS.INSERTED_A_CANNED_RESPONSE);
         this.message = message;
       }, 100);
     },

app/javascript/dashboard/helper/AnalyticsHelper/events.js

@@ -0,0 +1,9 @@
+export const EXECUTED_A_MACRO = 'Executed a macro';
+export const SENT_MESSAGE = 'Sent a message';
+export const SENT_PRIVATE_NOTE = 'Sent a private note';
+export const INSERTED_A_CANNED_RESPONSE = 'Inserted a canned response';
+export const USED_MENTIONS = 'Used mentions';
+export const MERGED_CONTACTS = 'Used merge contact option';
+export const ADDED_TO_CANNED_RESPONSE = 'Used added to canned response option';
+export const ADDED_A_CUSTOM_ATTRIBUTE = 'Added a custom attribute';
+export const ADDED_AN_INBOX = 'Added an inbox';

app/javascript/dashboard/helper/AnalyticsHelper/index.js

@@ -0,0 +1,67 @@
+import { AnalyticsBrowser } from '@june-so/analytics-next';
+
+class AnalyticsHelper {
+  constructor({ token: analyticsToken } = {}) {
+    this.analyticsToken = analyticsToken;
+    this.analytics = null;
+    this.user = {};
+  }
+
+  async init() {
+    if (!this.analyticsToken) {
+      return;
+    }
+
+    let [analytics] = await AnalyticsBrowser.load({
+      writeKey: this.analyticsToken,
+    });
+    this.analytics = analytics;
+  }
+
+  identify(user) {
+    if (!this.analytics) {
+      return;
+    }
+    this.user = user;
+    this.analytics.identify(this.user.email, {
+      userId: this.user.id,
+      email: this.user.email,
+      name: this.user.name,
+      avatar: this.user.avatar_url,
+    });
+
+    const { accounts, account_id: accountId } = this.user;
+    const [currentAccount] = accounts.filter(
+      account => account.id === accountId
+    );
+    if (currentAccount) {
+      this.analytics.group(currentAccount.id, this.user.id, {
+        name: currentAccount.name,
+      });
+    }
+  }
+
+  track(eventName, properties = {}) {
+    if (!this.analytics) {
+      return;
+    }
+
+    this.analytics.track({
+      userId: this.user.id,
+      event: eventName,
+      properties,
+    });
+  }
+
+  page(params) {
+    if (!this.analytics) {
+      return;
+    }
+
+    this.analytics.page(params);
+  }
+}
+
+export * as ANALYTICS_EVENTS from './events';
+
+export default new AnalyticsHelper(window.analyticsConfig);

app/javascript/dashboard/helper/scriptHelpers.js

@@ -1,4 +1,4 @@
-import posthog from 'posthog-js';
+import AnalyticsHelper from './AnalyticsHelper';
 
 export const CHATWOOT_SET_USER = 'CHATWOOT_SET_USER';
 export const CHATWOOT_RESET = 'CHATWOOT_RESET';
@@ -8,16 +8,9 @@ export const ANALYTICS_RESET = 'ANALYTICS_RESET';
 
 export const initializeAnalyticsEvents = () => {
   window.bus.$on(ANALYTICS_IDENTITY, ({ user }) => {
-    if (window.analyticsConfig) {
+    AnalyticsHelper.identify(user);
-      posthog.identify(user.id, { name: user.name, email: user.email });
-    }
-  });
-
-  window.bus.$on(ANALYTICS_RESET, () => {
-    if (window.analyticsConfig) {
-      posthog.reset();
-    }
   });
+  window.bus.$on(ANALYTICS_RESET, () => {});
 };
 
 export const initializeChatwootEvents = () => {

app/javascript/dashboard/modules/contact/ContactMergeModal.vue

@@ -24,6 +24,9 @@ import MergeContact from 'dashboard/modules/contact/components/MergeContact';
 import ContactAPI from 'dashboard/api/contacts';
 
 import { mapGetters } from 'vuex';
+import AnalyticsHelper, {
+  ANALYTICS_EVENTS,
+} from '../../helper/AnalyticsHelper';
 
 export default {
   components: { MergeContact },
@@ -72,6 +75,7 @@ export default {
       }
     },
     async onMergeContacts(childContactId) {
+      AnalyticsHelper.track(ANALYTICS_EVENTS.MERGED_CONTACTS);
       try {
         await this.$store.dispatch('contacts/merge', {
           childId: childContactId,

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -72,6 +72,9 @@ import AddCannedModal from 'dashboard/routes/dashboard/settings/canned/AddCanned
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import AnalyticsHelper, {
+  ANALYTICS_EVENTS,
+} from '../../../helper/AnalyticsHelper';
 
 export default {
   components: {
@@ -127,6 +130,7 @@ export default {
       this.$emit('toggle', false);
     },
     showCannedResponseModal() {
+      AnalyticsHelper.track(ANALYTICS_EVENTS.ADDED_TO_CANNED_RESPONSE);
       this.isCannedResponseModalOpen = true;
     },
   },

app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue

@@ -35,6 +35,9 @@
 import alertMixin from 'shared/mixins/alertMixin';
 import { mixin as clickaway } from 'vue-clickaway';
 import MacroPreview from './MacroPreview';
+import AnalyticsHelper, {
+  ANALYTICS_EVENTS,
+} from '../../../../helper/AnalyticsHelper';
 export default {
   components: {
     MacroPreview,
@@ -64,6 +67,7 @@ export default {
           macroId: macro.id,
           conversationIds: [this.conversationId],
         });
+        AnalyticsHelper.track(ANALYTICS_EVENTS.EXECUTED_A_MACRO);
         this.showAlert(this.$t('MACROS.EXECUTE.EXECUTED_SUCCESSFULLY'));
       } catch (error) {
         this.showAlert(this.$t('MACROS.ERROR'));

app/javascript/dashboard/routes/index.js

@@ -7,6 +7,7 @@ import dashboard from './dashboard/dashboard.routes';
 import login from './login/login.routes';
 import store from '../store';
 import { validateLoggedInRoutes } from '../helper/routeHelpers';
+import AnalyticsHelper from '../helper/AnalyticsHelper';
 
 const routes = [...login.routes, ...dashboard.routes, ...authRoute.routes];
 
@@ -117,6 +118,11 @@ export const validateRouteAccess = (to, from, next, { getters }) => {
 export const initalizeRouter = () => {
   const userAuthentication = store.dispatch('setUser');
   router.beforeEach((to, from, next) => {
+    AnalyticsHelper.page(to.name || '', {
+      path: to.path,
+      name: to.name,
+    });
+
     if (validateSSOLoginParams(to)) {
       clearBrowserSessionCookies();
       next();

app/javascript/dashboard/store/modules/conversations/actions.js

@@ -10,6 +10,9 @@ import {
   isOnUnattendedView,
 } from './helpers/actionHelpers';
 import messageReadActions from './actions/messageReadActions';
+import AnalyticsHelper, {
+  ANALYTICS_EVENTS,
+} from '../../../helper/AnalyticsHelper';
 // actions
 const actions = {
   getConversation: async ({ commit }, conversationId) => {
@@ -171,6 +174,11 @@ const actions = {
         status: MESSAGE_STATUS.PROGRESS,
       });
       const response = await MessageApi.create(pendingMessage);
+      AnalyticsHelper.track(
+        pendingMessage.private
+          ? ANALYTICS_EVENTS.SENT_PRIVATE_NOTE
+          : ANALYTICS_EVENTS.SENT_MESSAGE
+      );
       commit(types.ADD_MESSAGE, {
         ...response.data,
         status: MESSAGE_STATUS.SENT,

app/javascript/dashboard/store/modules/inboxes.js

@@ -6,6 +6,9 @@ import WebChannel from '../../api/channel/webChannel';
 import FBChannel from '../../api/channel/fbChannel';
 import TwilioChannel from '../../api/channel/twilioChannel';
 import { throwErrorMessage } from '../utils/api';
+import AnalyticsHelper, {
+  ANALYTICS_EVENTS,
+} from '../../helper/AnalyticsHelper';
 
 const buildInboxData = inboxParams => {
   const formData = new FormData();
@@ -117,6 +120,12 @@ export const getters = {
   },
 };
 
+const sendAnalyticsEvent = channelType => {
+  AnalyticsHelper.track(ANALYTICS_EVENTS.ADDED_AN_INBOX, {
+    channelType,
+  });
+};
+
 export const actions = {
   get: async ({ commit }) => {
     commit(types.default.SET_INBOXES_UI_FLAG, { isFetching: true });
@@ -134,6 +143,8 @@ export const actions = {
       const response = await WebChannel.create(params);
       commit(types.default.ADD_INBOXES, response.data);
       commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });
+      const { channel = {} } = params;
+      sendAnalyticsEvent(channel.type);
       return response.data;
     } catch (error) {
       commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });
@@ -146,6 +157,7 @@ export const actions = {
       const response = await WebChannel.create(buildInboxData(params));
       commit(types.default.ADD_INBOXES, response.data);
       commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });
+      sendAnalyticsEvent('website');
       return response.data;
     } catch (error) {
       commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });
@@ -158,6 +170,7 @@ export const actions = {
       const response = await TwilioChannel.create(params);
       commit(types.default.ADD_INBOXES, response.data);
       commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });
+      sendAnalyticsEvent('twilio');
       return response.data;
     } catch (error) {
       commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });
@@ -170,6 +183,7 @@ export const actions = {
       const response = await FBChannel.create(params);
       commit(types.default.ADD_INBOXES, response.data);
       commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });
+      sendAnalyticsEvent('facebook');
       return response.data;
     } catch (error) {
       commit(types.default.SET_INBOXES_UI_FLAG, { isCreating: false });

app/javascript/packs/application.js

@@ -1,8 +1,3 @@
-/* eslint no-console: 0 */
-/* eslint-env browser */
-/* eslint-disable no-new */
-/* Vue Core */
-
 import Vue from 'vue';
 import VueI18n from 'vue-i18n';
 import VueRouter from 'vue-router';
@@ -32,7 +27,6 @@ import constants from '../dashboard/constants';
 import * as Sentry from '@sentry/vue';
 import 'vue-easytable/libs/theme-default/index.css';
 import { Integrations } from '@sentry/tracing';
-import posthog from 'posthog-js';
 import {
   initializeAnalyticsEvents,
   initializeChatwootEvents,
@@ -40,6 +34,7 @@ import {
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
+import AnalyticsHelper from '../dashboard/helper/AnalyticsHelper';
 
 Vue.config.env = process.env;
 
@@ -51,12 +46,6 @@ if (window.errorLoggingConfig) {
   });
 }
 
-if (window.analyticsConfig) {
-  posthog.init(window.analyticsConfig.token, {
-    api_host: window.analyticsConfig.host,
-  });
-}
-
 Vue.use(VueDOMPurifyHTML, domPurifyConfig);
 Vue.use(VueRouter);
 Vue.use(VueI18n);
@@ -90,6 +79,7 @@ window.WootConstants = constants;
 window.axios = createAxios(axios);
 window.bus = new Vue();
 initializeChatwootEvents();
+AnalyticsHelper.init();
 initializeAnalyticsEvents();
 initalizeRouter();
 

app/views/layouts/vueapp.html.erb

@@ -51,11 +51,10 @@
       }
       window.errorLoggingConfig = '<%= ENV.fetch('SENTRY_DSN', '')%>'
     </script>
-    <% if @global_config['ANALYTICS_TOKEN'].present? && @global_config['ANALYTICS_HOST'].present? %>
+    <% if @global_config['ANALYTICS_TOKEN'].present? %>
     <script>
       window.analyticsConfig = {
         token: '<%= @global_config['ANALYTICS_TOKEN'] %>',
-        host: '<%= @global_config['ANALYTICS_HOST'] %>',
       }
     </script>
     <% end %>

config/installation_config.yml

@@ -42,8 +42,6 @@
   value:
 - name: ANALYTICS_TOKEN
   value:
-- name: ANALYTICS_HOST
-  value:
 - name: DIRECT_UPLOADS_ENABLED
   value: false
   locked: false

package.json

@@ -22,6 +22,7 @@
     "@chatwoot/prosemirror-schema": "https://github.com/chatwoot/prosemirror-schema.git#7e8acadd10d7b932c0dc0bd0a18f804434f83517",
     "@chatwoot/utils": "^0.0.10",
     "@hcaptcha/vue-hcaptcha": "^0.3.2",
+    "@june-so/analytics-next": "^1.36.5",
     "@rails/actioncable": "6.1.3",
     "@rails/ujs": "^7.0.3-1",
     "@rails/webpacker": "5.3.0",
@@ -46,7 +47,6 @@
     "md5": "^2.3.0",
     "ninja-keys": "^1.1.9",
     "opus-recorder": "^8.0.5",
-    "posthog-js": "^1.13.7",
     "prosemirror-markdown": "1.5.1",
     "prosemirror-state": "1.3.4",
     "prosemirror-view": "1.18.4",