chore(analytic): track stripe checkout journeyÏ

src/components/_preview/containers/StripePreview/controller.tsx

@@ -6,6 +6,7 @@ import {
 } from 'next-stripe/client';
 import { useAsync } from 'react-use';
 
+import trackGoal from '@src/utils/trackGoal';
 import formatAmountForStripe from '@src/lib/stripe/formatAmountForStripe';
 import StripePreview from './elements';
 
@@ -31,13 +32,20 @@ export default function StripePreviewController({ prices }) {
         .then((res) => res.json())
         .then((paymentIntent) => {
           console.log('paymentIntent:', paymentIntent);
+
           if (paymentIntent.statusCode === 500) {
+            trackGoal('StripePreview_PaymentFailed');
+
             alert('Payment failed: ' + paymentIntent.message);
-            return;
+          } else {
+            trackGoal(
+              'StripePreview_PaymentSuccessful',
+              paymentIntent.amount_total
+            );
+
+            alert('Payment status: ' + paymentIntent.payment_status);
+            localStorage.removeItem('_stripeCheckoutSession');
           }
-
-          alert('Payment status: ' + paymentIntent.payment_status);
-          localStorage.removeItem('_stripeCheckoutSession');
         });
     }
   }, []);
@@ -65,7 +73,9 @@ export default function StripePreviewController({ prices }) {
     return 'cus_JCdi2hmQ4ggKhh';
   }
 
-  async function onCheckout(priceId, mode: 'subscription' | 'payment') {
+  async function onCheckout(priceId, amount, mode: 'subscription' | 'payment') {
+    trackGoal('StripePreview_ClickCheckout', amount);
+
     // Create stripe checkout session
     const qty = 1; // Assume user will buy one item
 
@@ -75,10 +85,7 @@ export default function StripePreviewController({ prices }) {
     const lineItem = isCustomAmount
       ? {
           name: customPrice.id,
-          amount: formatAmountForStripe(
-            customPrice.unit_amount / 100,
-            customPrice.currency
-          ),
+          amount: formatAmountForStripe(amount / 100, customPrice.currency),
           currency: customPrice.currency,
           quantity: qty,
         }
@@ -109,6 +116,8 @@ export default function StripePreviewController({ prices }) {
   }
 
   async function onClickManageSubscription() {
+    trackGoal('StripePreview_ClickManageSubscription');
+
     const session = await createBillingPortalSession({
       customer: getCustomerId(),
       return_url: window.location.href,

src/components/_preview/containers/StripePreview/elements.tsx

@@ -31,9 +31,9 @@ function HintStripeTestCards() {
 function PriceList({ prices, onCheckout, recurringSuffix = null }) {
   const [isCheckingOut, setIsCheckingOut] = useState(null);
 
-  async function _onCheckout(priceId, mode) {
+  async function _onCheckout(priceId, amount, mode) {
     setIsCheckingOut(priceId);
-    await onCheckout(priceId, mode);
+    await onCheckout(priceId, amount, mode);
     setIsCheckingOut(null);
   }
 
@@ -46,6 +46,7 @@ function PriceList({ prices, onCheckout, recurringSuffix = null }) {
           onClick={() =>
             _onCheckout(
               price.id,
+              price.unit_amount,
               Boolean(recurringSuffix) ? 'subscription' : 'payment'
             )
           }

src/config/analytic.ts

@@ -23,6 +23,20 @@ export const events = {
   Preview_GridCell_ClickOpenInGithub: {
     event: 'XDGII22Y',
   },
+
+  // Track checkout process
+  StripePreview_ClickCheckout: {
+    event: 'P8KTQRJY',
+  },
+  StripePreview_PaymentSuccessful: {
+    event: 'DRFURCVI',
+  },
+  StripePreview_PaymentFailed: {
+    event: '33F0HCOC',
+  },
+  StripePreview_ClickManageSubscription: {
+    event: 'VKBNYD6J',
+  },
 };
 
 export default { events };

src/utils/trackGoal.ts

@@ -1,9 +1,12 @@
 import { events } from '@src/config/analytic';
 import { trackGoal as _trackGoal } from '@src/lib/analytic';
 
-export default function trackGoal(event: keyof typeof events) {
+export default function trackGoal(
+  event: keyof typeof events,
+  centValue?: number
+) {
   if (process.env.NODE_ENV === 'production') {
-    _trackGoal(events[event]);
+    _trackGoal({ ...events[event], centValue });
   } else {
     console.log('[dev][analytic] trackGoal:', events[event]);
   }