How to use the @codesandbox/common/lib/utils/analytics function in @codesandbox/common

const submit = e => {
              e.preventDefault();
              e.stopPropagation();
              const name = this.state.inputValue;

              track('Team - Create Team');

              mutate({
                variables: {
                  name,
                },
                optimisticResponse: {
                  __typename: 'Mutation',
                  createTeam: {
                    __typename: 'Team',
                    id: 'new-team',
                    name,
                  },
                },
                update: (proxy, { data: { createTeam } }) => {
                  // Read the data from our cache for this query.
                  const d = proxy.readQuery({

this.setState({
          localSandboxesSelected: sandboxIds,
        });
      } else {
        this.props.sandboxesSelected({
          sandboxIds,
        });
        this.setState({
          localSandboxesSelected: null,
        });
      }
    };

    if (range === true) {
      if (!delay) {
        track('Dashboard - Sandbox Shift Selection');
      }
      const indexedSandboxes = sandboxes.map((sandbox, i) => ({ sandbox, i }));

      // We need to select a range
      const firstIndexInfo = indexedSandboxes.find(({ sandbox }) =>
        selectedSandboxes.includes(sandbox.id)
      );

      const [id] = ids;

      const lastIndexInfo = indexedSandboxes.find(
        ({ sandbox }) => sandbox.id === id
      );

      if (firstIndexInfo && lastIndexInfo) {
        const indexes = [firstIndexInfo.i, lastIndexInfo.i].sort();

const signal = controller.getSignal('editor.codeChanged');
        signal({
          code: recoverData.code,
          moduleShortid: module.shortid,
        });

        return true;
      }

      return false;
    })
    .filter(Boolean);
  const numRecoveredFiles = recoveredList.length;

  if (numRecoveredFiles > 0) {
    track('Files Recovered', { fileCount: numRecoveredFiles });

    notificationState.addNotification({
      message: `We recovered ${numRecoveredFiles} unsaved ${
        numRecoveredFiles > 1 ? 'files' : 'file'
      } from a previous session`,
      status: NotificationStatus.NOTICE,
    });
  }

  return {};
}

({ props: givenProps }) => {
    track('Sandbox - Update Privacy', {
      source: 'editor',
      privacy: givenProps.privacy,
    });
  },
  when(

{(mutate, { loading: revokeLoading }) => {
                                    track('Team - Revoke Invitation');

                                    const handleClick = () =>
                                      mutate({
                                        variables: { userId: user.id, teamId },
                                      });

                                    return (

useEffect(() => {
    if (menuProps.visible) {
      track('User Menu Open');
    }
  }, [menuProps.visible]);

if (
          state.get('workspace.project.description') &&
          state.get(
            `editor.sandboxes.${state.get('editor.currentId')}.description`
          ) !== state.get('workspace.project.description')
        ) {
          track('Sandbox - Update Description');
        }

        if (
          state.get('workspace.project.alias') &&
          state.get(
            `editor.sandboxes.${state.get('editor.currentId')}.alias`
          ) !== state.get('workspace.project.alias')
        ) {
          track('Sandbox - Update Alias');
        }
      },

if (
          state.get('workspace.project.title') &&
          state.get(
            `editor.sandboxes.${state.get('editor.currentId')}.title`
          ) !== state.get('workspace.project.title')
        ) {
          track('Sandbox - Update Title');
        }

        if (
          state.get('workspace.project.description') &&
          state.get(
            `editor.sandboxes.${state.get('editor.currentId')}.description`
          ) !== state.get('workspace.project.description')
        ) {
          track('Sandbox - Update Description');
        }

        if (
          state.get('workspace.project.alias') &&
          state.get(
            `editor.sandboxes.${state.get('editor.currentId')}.alias`
          ) !== state.get('workspace.project.alias')
        ) {
          track('Sandbox - Update Alias');
        }
      },

onSubmit={e => {
            e.preventDefault();
            const path = basePath + '/' + input.value;

            track('Dashboard - Create Directory', {
              path,
            });

            mutate({
              variables: { path, teamId },
              optimisticResponse: {
                __typename: 'Mutation',
                createCollection: {
                  id: 'optimistic-id',
                  path,
                  __typename: 'Collection',
                },
              },
              update: (proxy, { data: { createCollection } }) => {
                const variables: { teamId?: string } = {};
                if (teamId) {

useEffect(() => {
    track('Create Sandbox Tab Open', { tab: 'create' });
  }, []);