ref(growth): moving organization argument for analytics events (#27951)

In order to unify the APIs for analytics between Sentry and Getsentry, I am moving the organization argument in Sentry from the third argument to the payload of the second argument.

static/app/components/demo/demoHeader.tsx

@@ -52,7 +52,9 @@ export default function DemoHeader() {
       <StyledLogoSentry />
       <ButtonBar gap={4}>
         <StyledExternalLink
-          onClick={() => trackAdvancedAnalyticsEvent('growth.demo_click_docs', {}, null)}
+          onClick={() =>
+            trackAdvancedAnalyticsEvent('growth.demo_click_docs', {organization: null})
+          }
           href={`https://docs.sentry.io/${extraParameter}`}
         >
           {t('Documentation')}
@@ -60,7 +62,9 @@ export default function DemoHeader() {
         <BaseButton
           priority="form"
           onClick={() =>
-            trackAdvancedAnalyticsEvent('growth.demo_click_request_demo', {}, null)
+            trackAdvancedAnalyticsEvent('growth.demo_click_request_demo', {
+              organization: null,
+            })
           }
           href={`https://sentry.io/_/demo/${extraParameter}`}
         >
@@ -68,13 +72,10 @@ export default function DemoHeader() {
         </BaseButton>
         <GetStarted
           onClick={() =>
-            trackAdvancedAnalyticsEvent(
-              'growth.demo_click_get_started',
-              {
-                is_upgrade: !!saasOrgSlug,
-              },
-              null
-            )
+            trackAdvancedAnalyticsEvent('growth.demo_click_get_started', {
+              is_upgrade: !!saasOrgSlug,
+              organization: null,
+            })
           }
           href={getStartedUrl}
         >

static/app/components/events/eventCauseEmpty.tsx

@@ -146,14 +146,11 @@ class EventCauseEmpty extends Component<Props, State> {
   trackAnalytics(eventKey: IssueEventKey) {
     const {project, organization} = this.props;
 
-    trackAdvancedAnalyticsEvent(
-      eventKey,
-      {
-        project_id: project.id,
-        platform: project.platform,
-      },
-      organization
-    );
+    trackAdvancedAnalyticsEvent(eventKey, {
+      project_id: project.id,
+      platform: project.platform,
+      organization,
+    });
   }
 
   render() {

static/app/components/modals/demoSignUp.tsx

@@ -34,7 +34,9 @@ const DemoSignUpModal = ({closeModal}: Props) => {
             priority="primary"
             href={signupUrl}
             onClick={() =>
-              trackAdvancedAnalyticsEvent('growth.demo_modal_clicked_signup', {}, null)
+              trackAdvancedAnalyticsEvent('growth.demo_modal_clicked_signup', {
+                organization: null,
+              })
             }
           >
             {t('Sign up now')}
@@ -42,7 +44,9 @@ const DemoSignUpModal = ({closeModal}: Props) => {
           <Button
             priority="default"
             onClick={() => {
-              trackAdvancedAnalyticsEvent('growth.demo_modal_clicked_continue', {}, null);
+              trackAdvancedAnalyticsEvent('growth.demo_modal_clicked_continue', {
+                organization: null,
+              });
               closeModal();
             }}
           >

static/app/components/modals/suggestProjectModal.tsx

@@ -41,21 +41,19 @@ class SuggestProjectModal extends Component<Props, State> {
 
   handleGetStartedClick = () => {
     const {matchedUserAgentString, organization} = this.props;
-    trackAdvancedAnalyticsEvent(
-      'growth.clicked_mobile_prompt_setup_project',
-      {matchedUserAgentString},
-      organization
-    );
+    trackAdvancedAnalyticsEvent('growth.clicked_mobile_prompt_setup_project', {
+      matchedUserAgentString,
+      organization,
+    });
   };
 
   handleAskTeammate = () => {
     const {matchedUserAgentString, organization} = this.props;
     this.setState({askTeammate: true});
-    trackAdvancedAnalyticsEvent(
-      'growth.clicked_mobile_prompt_ask_teammate',
-      {matchedUserAgentString},
-      organization
-    );
+    trackAdvancedAnalyticsEvent('growth.clicked_mobile_prompt_ask_teammate', {
+      matchedUserAgentString,
+      organization,
+    });
   };
 
   goBack = () => {
@@ -65,11 +63,10 @@ class SuggestProjectModal extends Component<Props, State> {
   handleSubmitSuccess = () => {
     const {matchedUserAgentString, organization, closeModal} = this.props;
     addSuccessMessage('Notified teammate successfully');
-    trackAdvancedAnalyticsEvent(
-      'growth.submitted_mobile_prompt_ask_teammate',
-      {matchedUserAgentString},
-      organization
-    );
+    trackAdvancedAnalyticsEvent('growth.submitted_mobile_prompt_ask_teammate', {
+      matchedUserAgentString,
+      organization,
+    });
     closeModal();
   };
 

static/app/components/platformPicker.tsx

@@ -80,15 +80,12 @@ class PlatformPicker extends React.Component<Props, State> {
 
   logSearch = debounce(() => {
     if (this.state.filter) {
-      trackAdvancedAnalyticsEvent(
-        'growth.platformpicker_search',
-        {
-          search: this.state.filter.toLowerCase(),
-          num_results: this.platformList.length,
-          source: this.props.source,
-        },
-        this.props.organization ?? null
-      );
+      trackAdvancedAnalyticsEvent('growth.platformpicker_search', {
+        search: this.state.filter.toLowerCase(),
+        num_results: this.platformList.length,
+        source: this.props.source,
+        organization: this.props.organization ?? null,
+      });
     }
   }, 300);
 
@@ -115,11 +112,11 @@ class PlatformPicker extends React.Component<Props, State> {
               <ListLink
                 key={id}
                 onClick={(e: React.MouseEvent) => {
-                  trackAdvancedAnalyticsEvent(
-                    'growth.platformpicker_category',
-                    {category: id, source: this.props.source},
-                    this.props.organization ?? null
-                  );
+                  trackAdvancedAnalyticsEvent('growth.platformpicker_category', {
+                    category: id,
+                    source: this.props.source,
+                    organization: this.props.organization ?? null,
+                  });
                   this.setState({category: id, filter: ''});
                   e.preventDefault();
                 }}
@@ -153,14 +150,11 @@ class PlatformPicker extends React.Component<Props, State> {
                 e.stopPropagation();
               }}
               onClick={() => {
-                trackAdvancedAnalyticsEvent(
-                  'growth.select_platform',
-                  {
-                    platform_id: platform.id,
-                    source: this.props.source,
-                  },
-                  this.props.organization ?? null
-                );
+                trackAdvancedAnalyticsEvent('growth.select_platform', {
+                  platform_id: platform.id,
+                  source: this.props.source,
+                  organization: this.props.organization ?? null,
+                });
                 setPlatform(platform.id as PlatformKey);
               }}
             />

static/app/components/suggestProjectCTA.tsx

@@ -126,8 +126,8 @@ class SuggestProjectCTA extends Component<Props, State> {
               matchedUserAgentString,
               mobileEventBrowserName: mobileEventResult?.browserName || '',
               mobileEventClientOsName: mobileEventResult?.clientOsName || '',
+              organization: this.props.organization,
             },
-            this.props.organization,
             {startSession: true}
           );
         }
@@ -160,13 +160,10 @@ class SuggestProjectCTA extends Component<Props, State> {
 
   handleCTAClose = () => {
     const {api, organization} = this.props;
-    trackAdvancedAnalyticsEvent(
-      'growth.dismissed_mobile_prompt_banner',
-      {
-        matchedUserAgentString: this.matchedUserAgentString,
-      },
-      this.props.organization
-    );
+    trackAdvancedAnalyticsEvent('growth.dismissed_mobile_prompt_banner', {
+      matchedUserAgentString: this.matchedUserAgentString,
+      organization,
+    });
 
     promptsUpdate(api, {
       organizationId: organization.id,
@@ -178,13 +175,10 @@ class SuggestProjectCTA extends Component<Props, State> {
   };
 
   openModal = () => {
-    trackAdvancedAnalyticsEvent(
-      'growth.opened_mobile_project_suggest_modal',
-      {
-        matchedUserAgentString: this.matchedUserAgentString,
-      },
-      this.props.organization
-    );
+    trackAdvancedAnalyticsEvent('growth.opened_mobile_project_suggest_modal', {
+      matchedUserAgentString: this.matchedUserAgentString,
+      organization: this.props.organization,
+    });
     openModal(deps => (
       <SuggestProjectModal
         organization={this.props.organization}

static/app/utils/advancedAnalytics.tsx

@@ -1,4 +1,4 @@
-import {Organization} from 'app/types';
+import {LightWeightOrganization} from 'app/types';
 import {Hooks} from 'app/types/hooks';
 import {trackAnalyticsEventV2} from 'app/utils/analytics';
 import {growthEventMap, GrowthEventParameters} from 'app/utils/growthAnalyticsEvents';
@@ -44,6 +44,8 @@ const allEventMap = {
 
 type AnalyticsKey = keyof EventParameters;
 
+type OptionalOrg = {organization: LightWeightOrganization | null};
+
 /**
  * Tracks an event for analytics.
  * Must be tied to an organization.
@@ -53,17 +55,18 @@ type AnalyticsKey = keyof EventParameters;
  */
 export function trackAdvancedAnalyticsEvent<T extends AnalyticsKey>(
   eventKey: T,
-  analyticsParams: EventParameters[T],
-  org: Organization | null, // if org is undefined, event won't be recorded
+  analyticsParams: EventParameters[T] & OptionalOrg,
   options?: Parameters<Hooks['analytics:track-event-v2']>[1]
 ) {
   const eventName = allEventMap[eventKey];
 
+  // need to destructure the org here to make TS happy
+  const {organization, ...rest} = analyticsParams;
   const params = {
     eventKey,
     eventName,
-    organization: org,
-    ...analyticsParams,
+    organization,
+    ...rest,
   };
 
   // could put this into a debug method or for the main trackAnalyticsEvent event

static/app/utils/growthAnalyticsEvents.tsx

@@ -47,7 +47,7 @@ export type GrowthEventParameters = {
   'growth.clicked_mobile_prompt_setup_project': MobilePromptBannerParams;
   'growth.clicked_mobile_prompt_ask_teammate': MobilePromptBannerParams;
   'growth.submitted_mobile_prompt_ask_teammate': MobilePromptBannerParams;
-  'growth.demo_click_get_started': {};
+  'growth.demo_click_get_started': {is_upgrade: boolean};
   'growth.demo_click_docs': {};
   'growth.demo_click_request_demo': {};
   'growth.onboarding_load_choose_platform': {};

static/app/utils/integrationUtil.tsx

@@ -41,11 +41,12 @@ export function trackIntegrationEvent<T extends IntegrationAnalyticsKey>(
   eventKey: T,
   analyticsParams: EventParameters[T],
   org: Organization, // integration events should always be tied to an org
-  options?: Parameters<typeof trackAdvancedAnalyticsEvent>[3]
+  options?: Parameters<typeof trackAdvancedAnalyticsEvent>[2]
 ) {
   options = options || {};
   options.mapValuesFn = mapIntegrationParams;
-  return trackAdvancedAnalyticsEvent(eventKey, analyticsParams, org, options);
+  const params = {organization: org, ...analyticsParams};
+  return trackAdvancedAnalyticsEvent(eventKey, params, options);
 }
 
 /**

static/app/views/onboarding/components/firstEventIndicator.tsx

@@ -36,11 +36,9 @@ const FirstEventIndicator = ({children, ...props}: Props) => (
             disabled={!firstIssue}
             priority="primary"
             onClick={() =>
-              trackAdvancedAnalyticsEvent(
-                'growth.onboarding_take_to_error',
-                {},
-                props.organization
-              )
+              trackAdvancedAnalyticsEvent('growth.onboarding_take_to_error', {
+                organization: props.organization,
+              })
             }
             to={`/organizations/${props.organization.slug}/issues/${
               firstIssue !== true && firstIssue !== null ? `${firstIssue.id}/` : ''