feat: add eventing for Credit 250 experiment (#4594)

TCL735 · web-flow · commit 7a36e0168e18 · 2022-05-18T12:06:00.000-07:00
diff --git a/src/billing/components/Free/PAYGConversion.tsx b/src/billing/components/Free/PAYGConversion.tsx
@@ -14,7 +14,9 @@ import {
 import {useHistory} from 'react-router-dom'
 import CloudUpgradeButton from 'src/shared/components/CloudUpgradeButton'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {event} from 'src/cloud/utils/reporting'
 import {GoogleOptimizeExperiment} from 'src/cloud/components/experiments/GoogleOptimizeExperiment'
+import {getDataLayerIdentity} from 'src/cloud/utils/experiments'
 import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
 
 const CARDINALITY_LIMIT = 1_000_000
@@ -46,6 +48,15 @@ export const Credit250PAYGConversion: FC = () => {
               </Heading>
               <CloudUpgradeButton
                 className="credit-250-conversion-upgrade--button"
+                metric={() => {
+                  const identity = getDataLayerIdentity()
+                  event(`billing.conversion.payg.credit-250.upgrade`, {
+                    location: 'billing',
+                    ...identity,
+                    experimentId: CREDIT_250_EXPERIMENT_ID,
+                    experimentVariantId: '1',
+                  })
+                }}
                 showPromoMessage={false}
                 size={ComponentSize.Large}
               />
diff --git a/src/checkout/CancelButton.tsx b/src/checkout/CancelButton.tsx
@@ -1,11 +1,16 @@
 import React, {FC, useContext} from 'react'
 import {CTAButton, ComponentColor} from '@influxdata/clockface'
 import {CheckoutContext} from 'src/checkout/context/checkout'
+import {GoogleOptimizeExperiment} from 'src/cloud/components/experiments/GoogleOptimizeExperiment'
+import {getDataLayerIdentity} from 'src/cloud/utils/experiments'
+import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
+import {event} from 'src/cloud/utils/reporting'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 const CancelButton: FC = () => {
   const {handleCancelClick} = useContext(CheckoutContext)
 
-  return (
+  const original = (
     <CTAButton
       color={ComponentColor.Default}
       onClick={handleCancelClick}
@@ -14,6 +19,37 @@ const CancelButton: FC = () => {
       testID="checkout-cancel--button"
     />
   )
+
+  const handleCancelCredit250Click = () => {
+    const identity = getDataLayerIdentity()
+    event('checkout.cancel.credit-250.upgrade', {
+      location: 'checkout',
+      ...identity,
+      experimentId: CREDIT_250_EXPERIMENT_ID,
+      experimentVariantId: '1',
+    })
+    handleCancelClick()
+  }
+
+  if (isFlagEnabled('credit250Experiment')) {
+    return (
+      <GoogleOptimizeExperiment
+        experimentID={CREDIT_250_EXPERIMENT_ID}
+        original={original}
+        variants={[
+          <CTAButton
+            key="1"
+            color={ComponentColor.Default}
+            onClick={handleCancelCredit250Click}
+            text="Cancel"
+            id="button-cancel" // for google-analytics
+            testID="checkout-cancel--button"
+          />,
+        ]}
+      />
+    )
+  }
+  return original
 }
 
 export default CancelButton
diff --git a/src/cloud/components/AssetLimitAlert.tsx b/src/cloud/components/AssetLimitAlert.tsx
@@ -15,8 +15,17 @@ import {
 } from '@influxdata/clockface'
 import CloudUpgradeButton from 'src/shared/components/CloudUpgradeButton'
 
+// Utils
+import {event} from 'src/cloud/utils/reporting'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  getDataLayerIdentity,
+  getExperimentVariantId,
+} from 'src/cloud/utils/experiments'
+
 // Constants
 import {CLOUD} from 'src/shared/constants'
+import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
 
 // Types
 import {LimitStatus} from 'src/cloud/actions/limits'
@@ -50,6 +59,24 @@ const AssetLimitAlert: FC<Props> = ({limitStatus, resourceName, className}) => {
               <CloudUpgradeButton
                 buttonText={`Get more ${resourceName}`}
                 className="upgrade-payg--button__asset-alert"
+                metric={() => {
+                  const experimentVariantId = getExperimentVariantId(
+                    CREDIT_250_EXPERIMENT_ID
+                  )
+                  const identity = getDataLayerIdentity()
+                  event(
+                    isFlagEnabled('credit250Experiment') &&
+                      experimentVariantId === '1'
+                      ? `${resourceName}.alert.limit.credit-250.upgrade`
+                      : `${resourceName}.alert.limit.upgrade`,
+                    {
+                      asset: resourceName,
+                      ...identity,
+                      experimentId: CREDIT_250_EXPERIMENT_ID,
+                      experimentVariantId,
+                    }
+                  )
+                }}
               />
             </FlexBox>
           </Panel.Body>
diff --git a/src/cloud/components/AssetLimitOverlay.tsx b/src/cloud/components/AssetLimitOverlay.tsx
@@ -14,6 +14,16 @@ import {
 } from '@influxdata/clockface'
 import CloudUpgradeButton from 'src/shared/components/CloudUpgradeButton'
 
+// Utils
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  getDataLayerIdentity,
+  getExperimentVariantId,
+} from 'src/cloud/utils/experiments'
+
+// Constants
+import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
+
 // Types
 import {AppState} from 'src/types'
 import {event} from 'src/cloud/utils/reporting'
@@ -59,7 +69,22 @@ const AssetLimitOverlay: FC<OwnProps & StateProps> = ({assetName, onClose}) => {
               size={ComponentSize.Large}
               className="upgrade-payg--button__asset-create"
               metric={() => {
-                event('asset limit upgrade', {asset: assetName})
+                const experimentVariantId = getExperimentVariantId(
+                  CREDIT_250_EXPERIMENT_ID
+                )
+                const identity = getDataLayerIdentity()
+                event(
+                  isFlagEnabled('credit250Experiment') &&
+                    experimentVariantId === '1'
+                    ? `${assetName}.overlay.limit.credit-250.upgrade`
+                    : `${assetName}.overlay.limit.upgrade`,
+                  {
+                    asset: assetName,
+                    ...identity,
+                    experimentId: CREDIT_250_EXPERIMENT_ID,
+                    experimentVariantId,
+                  }
+                )
               }}
             />
           </Overlay.Footer>
diff --git a/src/cloud/components/RateLimitAlert.tsx b/src/cloud/components/RateLimitAlert.tsx
@@ -25,9 +25,14 @@ import {
 } from 'src/cloud/utils/limits'
 import {event} from 'src/cloud/utils/reporting'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  getDataLayerIdentity,
+  getExperimentVariantId,
+} from 'src/cloud/utils/experiments'
 
 // Constants
 import {CLOUD} from 'src/shared/constants'
+import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
 
 // Types
 import RateLimitAlertContent from 'src/cloud/components/RateLimitAlertContent'
@@ -126,7 +131,21 @@ const RateLimitAlert: FC<Props> = ({alertOnly, className, location}) => {
       <CloudUpgradeButton
         className="upgrade-payg--button__header"
         metric={() => {
-          event('rate limit upgrade', {location})
+          const experimentVariantId = getExperimentVariantId(
+            CREDIT_250_EXPERIMENT_ID
+          )
+          const identity = getDataLayerIdentity()
+          event(
+            isFlagEnabled('credit250Experiment') && experimentVariantId === '1'
+              ? `${location}.alert.credit-250.upgrade`
+              : `${location}.alert.upgrade`,
+            {
+              location,
+              ...identity,
+              experimentId: CREDIT_250_EXPERIMENT_ID,
+              experimentVariantId,
+            }
+          )
         }}
       />
     )
diff --git a/src/cloud/components/RateLimitAlertContent.tsx b/src/cloud/components/RateLimitAlertContent.tsx
@@ -24,6 +24,10 @@ import {event} from 'src/cloud/utils/reporting'
 // Utils
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import {GoogleOptimizeExperiment} from 'src/cloud/components/experiments/GoogleOptimizeExperiment'
+import {
+  getDataLayerIdentity,
+  getExperimentVariantId,
+} from 'src/cloud/utils/experiments'
 
 // Constants
 import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
@@ -99,7 +103,24 @@ export const UpgradeContent: FC<UpgradeProps> = ({
         <CloudUpgradeButton
           className="upgrade-payg--button__rate-alert"
           showPromoMessage={false}
-          metric={() => event(`user.limits.${type}.upgrade`, {location})}
+          metric={() => {
+            const experimentVariantId = getExperimentVariantId(
+              CREDIT_250_EXPERIMENT_ID
+            )
+            const identity = getDataLayerIdentity()
+            event(
+              isFlagEnabled('credit250Experiment') &&
+                experimentVariantId === '1'
+                ? `user.limits.${type}.credit-250.upgrade`
+                : `user.limits.${type}.upgrade`,
+              {
+                location,
+                ...identity,
+                experimentId: CREDIT_250_EXPERIMENT_ID,
+                experimentVariantId,
+              }
+            )
+          }}
         />
       </FlexBox>
     </div>
diff --git a/src/cloud/utils/experiments.ts b/src/cloud/utils/experiments.ts
@@ -21,3 +21,18 @@ export const getExperimentVariantId = (
   pushDataLayerEvent(activationEvent)
   return getVariant(experimentID)
 }
+
+export const getDataLayerIdentity = () => {
+  const identity = Object.assign(
+    {},
+    ...(window?.dataLayer.map(element => {
+      for (const key in element) {
+        if (key === 'identity') {
+          return element[key]
+        }
+      }
+      return {}
+    }) ?? [])
+  )
+  return identity
+}
diff --git a/src/support/components/FreeAccountSupportOverlay.tsx b/src/support/components/FreeAccountSupportOverlay.tsx
@@ -8,6 +8,17 @@ import {SafeBlankLink} from 'src/utils/SafeBlankLink'
 // Contexts
 import {OverlayContext} from 'src/overlays/components/OverlayController'
 
+// Utils
+import {event} from 'src/cloud/utils/reporting'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  getDataLayerIdentity,
+  getExperimentVariantId,
+} from 'src/cloud/utils/experiments'
+
+// Constants
+import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
+
 import './ContactSupport.scss'
 
 interface OwnProps {
@@ -62,7 +73,26 @@ const FreeAccountSupportOverlay: FC<OwnProps> = () => {
         </List>
       </Overlay.Body>
       <Overlay.Footer>
-        <CloudUpgradeButton />
+        <CloudUpgradeButton
+          metric={() => {
+            const experimentVariantId = getExperimentVariantId(
+              CREDIT_250_EXPERIMENT_ID
+            )
+            const identity = getDataLayerIdentity()
+            event(
+              isFlagEnabled('credit250Experiment') &&
+                experimentVariantId === '1'
+                ? `help-bar.overlay.free-account.credit-250.upgrade`
+                : `help-bar.overlay.free-account.upgrade`,
+              {
+                location: 'help bar',
+                ...identity,
+                experimentId: CREDIT_250_EXPERIMENT_ID,
+                experimentVariantId,
+              }
+            )
+          }}
+        />
       </Overlay.Footer>
     </Overlay.Container>
   )
diff --git a/src/writeData/subscriptions/components/CreateSubscriptionPage.tsx b/src/writeData/subscriptions/components/CreateSubscriptionPage.tsx
@@ -37,6 +37,14 @@ import {AppState, ResourceType, Bucket} from 'src/types'
 // Utils
 import {getAll} from 'src/resources/selectors'
 import {event} from 'src/cloud/utils/reporting'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  getDataLayerIdentity,
+  getExperimentVariantId,
+} from 'src/cloud/utils/experiments'
+
+// Constants
+import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
 
 // Actions
 import {shouldShowUpgradeButton, getQuartzMe} from 'src/me/selectors'
@@ -162,7 +170,22 @@ const CreateSubscriptionPage: FC = () => {
               >
                 <CloudUpgradeButton
                   metric={() => {
-                    event('subscription upgrade')
+                    const experimentVariantId = getExperimentVariantId(
+                      CREDIT_250_EXPERIMENT_ID
+                    )
+                    const identity = getDataLayerIdentity()
+                    event(
+                      isFlagEnabled('credit250Experiment') &&
+                        experimentVariantId === '1'
+                        ? `subscriptions.create.credit-250.upgrade`
+                        : `subscriptions.create.upgrade`,
+                      {
+                        location: 'subscriptions create',
+                        ...identity,
+                        experimentId: CREDIT_250_EXPERIMENT_ID,
+                        experimentVariantId,
+                      }
+                    )
                   }}
                 />
               </FlexBox>
diff --git a/src/writeData/subscriptions/components/ParsingForm.tsx b/src/writeData/subscriptions/components/ParsingForm.tsx
@@ -32,6 +32,14 @@ import LineProtocolForm from 'src/writeData/subscriptions/components/LineProtoco
 import {getOrg} from 'src/organizations/selectors'
 import {event} from 'src/cloud/utils/reporting'
 import {checkRequiredFields} from 'src/writeData/subscriptions/utils/form'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+import {
+  getDataLayerIdentity,
+  getExperimentVariantId,
+} from 'src/cloud/utils/experiments'
+
+// Constants
+import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
 
 // Types
 import {SUBSCRIPTIONS, LOAD_DATA} from 'src/shared/constants/routes'
@@ -152,7 +160,22 @@ const ParsingForm: FC<Props> = ({
               <CloudUpgradeButton
                 className="create-parsing-form__upgrade-button"
                 metric={() => {
-                  event('parsing form upgrade')
+                  const experimentVariantId = getExperimentVariantId(
+                    CREDIT_250_EXPERIMENT_ID
+                  )
+                  const identity = getDataLayerIdentity()
+                  event(
+                    isFlagEnabled('credit250Experiment') &&
+                      experimentVariantId === '1'
+                      ? `subscriptions.parsing-form.credit-250.upgrade`
+                      : `subscriptions.parsing-form.upgrade`,
+                    {
+                      location: 'subscriptions parsing form',
+                      ...identity,
+                      experimentId: CREDIT_250_EXPERIMENT_ID,
+                      experimentVariantId,
+                    }
+                  )
                 }}
               />
             ) : (
