chore(shareability): track successful shares (mobile only) (#7411)

* chore(shareability): track successful shares (mobile only) * Apply PR feedback
electricitymaps · Nov 13, 2024 · 33d3dcd · 33d3dcd
1 parent 3a842fa
commit 33d3dcd
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/web/README.md b/web/README.md
@@ -8,7 +8,7 @@ _If you're looking for more info on the parsers, check out [how to setup Python
 
 Prerequisites:
 
-- Ensure you have `NodeJS` and `pnpm` installed locally (`brew install pnpm`)
+- Ensure you have `NodeJS` (`v20.9.0` or above) and `pnpm` installed locally (`brew install pnpm`)
 - Run `pnpm install` in both the web and mockserver directories
 
 1. Start the mockserver: `pnpm run mockserver`

diff --git a/web/src/features/panels/zone/ShareButton.tsx b/web/src/features/panels/zone/ShareButton.tsx
@@ -24,6 +24,7 @@ interface ShareButtonProps
 }
 
 const trackShareClick = trackShare(ShareType.SHARE);
+const trackShareCompletion = trackShare(ShareType.COMPLETED_SHARE);
 
 export function ShareButton({
   iconSize = DEFAULT_ICON_SIZE,
@@ -51,7 +52,11 @@ export function ShareButton({
           url: shareUrl,
         },
         toastMessageCallback
-      );
+      ).then((shareCompleted) => {
+        if (shareCompleted) {
+          trackShareCompletion();
+        }
+      });
     } else {
       copyToClipboard(shareUrl, toastMessageCallback);
     }

diff --git a/web/src/hooks/useShare.ts b/web/src/hooks/useShare.ts
@@ -21,12 +21,14 @@ export function useShare() {
   const share = useCallback(
     async (shareData: ShareOptions, callback?: (argument: string) => void) => {
       try {
-        await CapShare.share(shareData);
+        const result = await CapShare.share(shareData);
+        return result;
       } catch (error) {
         if (error instanceof Error && !/AbortError|canceled/.test(error.toString())) {
           console.error(error);
           callback?.(t('share-button.share-error'));
         }
+        return;
       }
     },
     [t]

diff --git a/web/src/utils/analytics.ts b/web/src/utils/analytics.ts
@@ -33,6 +33,7 @@ export enum ShareType {
   REDDIT = 'reddit',
   COPY = 'copy',
   SHARE = 'share',
+  COMPLETED_SHARE = 'completed_share',
 }
 
 export const trackShare = (shareType: ShareType) => () =>