Add grouping

Author: CompuIves

packages/app/src/app/overmind/actions.ts

@@ -244,12 +244,15 @@ export const refetchSandboxInfo: AsyncAction = async ({
   await actions.editor.internal.initializeSandbox(sandbox);
 };
 
-export const acceptTeamInvitation: Action<{ teamName: string }> = (
-  { effects },
-  { teamName }
-) => {
+export const acceptTeamInvitation: Action<{
+  teamName: string;
+  teamId: string;
+}> = ({ effects }, { teamName, teamId }) => {
   effects.analytics.track('Team - Invitation Accepted', {});
 
+  effects.analytics.setGroup('teamName', teamName);
+  effects.analytics.setGroup('teamId', teamId);
+
   effects.notificationToast.success(`Accepted invitation to ${teamName}`);
 };
 

packages/app/src/app/overmind/effects/analytics.ts

@@ -3,6 +3,7 @@ import track, {
   logError,
   setAnonymousId,
   setUserId,
+  setGroup,
 } from '@codesandbox/common/lib/utils/analytics';
 
 export default (() => {
@@ -21,5 +22,6 @@ export default (() => {
     identify,
     setAnonymousId,
     setUserId,
+    setGroup,
   };
 })();

packages/app/src/app/pages/Dashboard/Content/routes/CreateTeam/index.js

@@ -3,7 +3,7 @@ import { Mutation } from 'react-apollo';
 
 import Input from '@codesandbox/common/lib/components/Input';
 import { Button } from '@codesandbox/common/lib/components/Button';
-import track from '@codesandbox/common/lib/utils/analytics';
+import track, { setGroup } from '@codesandbox/common/lib/utils/analytics';
 import history from 'app/utils/history';
 import { teamOverviewUrl } from '@codesandbox/common/lib/utils/url-generator';
 import { notificationState } from '@codesandbox/common/lib/utils/notifications';
@@ -88,6 +88,9 @@ export default class CreateTeam extends React.PureComponent {
                   });
                 },
               }).then(({ data }) => {
+                setGroup('teamName', data.createTeam.name);
+                setGroup('teamId', data.createTeam.id);
+
                 notificationState.addNotification({
                   message: `Succesfully created team '${data.createTeam.name}'`,
                   status: NotificationStatus.SUCCESS,

packages/app/src/app/pages/common/Navigation/Notifications/notifications/TeamInvite.tsx

@@ -61,7 +61,7 @@ export const TeamInvite: FunctionComponent<Props> = ({
             mutation={ACCEPT_TEAM_INVITATION}
             refetchQueries={['RecentNotifications', 'TeamsSidebar']}
             onCompleted={() => {
-              acceptTeamInvitation({ teamName });
+              acceptTeamInvitation({ teamName, teamId });
 
               history.push(teamOverviewUrl(teamId));
             }}

packages/common/src/utils/analytics/amplitude.ts

@@ -107,3 +107,11 @@ export const track = async (eventName: string, data: any) => {
     );
   }
 };
+
+export const setGroup = async (group: string, value: string | string[]) => {
+  const amplitude = await getAmplitude();
+  if (amplitude) {
+    debug('[Amplitude] Grouping', group, value);
+    amplitude.setGroup(group, value);
+  }
+};

packages/common/src/utils/analytics/index.ts

@@ -87,6 +87,15 @@ export function trackPageview() {
   }
 }
 
+/**
+ * Assign the user to a group. Can be multiple under one key.
+ */
+export function setGroup(name: string, value: string | string[]) {
+  if (!DO_NOT_TRACK_ENABLED) {
+    amplitude.setGroup(name, value);
+  }
+}
+
 export default function track(eventName, secondArg: Object = {}) {
   if (!DO_NOT_TRACK_ENABLED && isAllowedEvent(eventName, secondArg)) {
     const data = {