feat: simple analytics

packages/website/components/account/filesManager/pinRequestsTable.js

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import countly from 'lib/countly';
+import analytics, { saEvent } from 'lib/analytics';
 import Loading from 'components/loading/loading';
 import Button, { ButtonVariant } from 'components/button/button';
 import Dropdown from 'ZeroComponents/dropdown/dropdown';
@@ -10,9 +10,9 @@ import Modal from 'modules/zero/components/modal/modal';
 import CloseIcon from 'assets/icons/close';
 import { useUser } from 'components/contexts/userContext';
 import RefreshIcon from 'assets/icons/refresh';
+import { usePinRequests } from 'components/contexts/pinRequestsContext';
 import PinRequestRowItem from './pinRequestRowItem';
 import GradientBackground from '../../gradientbackground/gradientbackground.js';
-import { usePinRequests } from 'components/contexts/pinRequestsContext';
 
 /**
  * @typedef {Object} PinRequestsTableProps
@@ -76,8 +76,8 @@ const PinRequestsTable = ({ content, hidden, onUpdatingChange, showCheckOverlay
 
   const closeDeleteModal = useCallback(() => {
     deleteModalState[1](false);
-    countly.trackEvent(countly.events.FILE_DELETE_CLICK, {
-      ui: countly.ui.FILES,
+    saEvent(analytics.events.FILE_DELETE_CLICK, {
+      ui: analytics.ui.FILES,
       totalDeleted: 0,
     });
   }, [deleteModalState]);
@@ -92,9 +92,8 @@ const PinRequestsTable = ({ content, hidden, onUpdatingChange, showCheckOverlay
         await Promise.all(selectedPinRequests.map(({ requestid }) => deletePinRequest(requestid)));
       }
     } catch (e) {}
-
-    countly.trackEvent(countly.events.FILE_DELETE_CLICK, {
-      ui: countly.ui.FILES,
+    saEvent(analytics.events.FILE_DELETE_CLICK, {
+      ui: analytics.ui.FILES,
       totalDeleted: selectedPinRequests.length,
     });
 

packages/website/components/account/filesManager/uploadsTable.js

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router';
 
 import CloseIcon from 'assets/icons/close';
 import RefreshIcon from 'assets/icons/refresh';
-import countly from 'lib/countly';
+import analytics, { saEvent } from 'lib/analytics';
 import { formatTimestamp, formatTimestampFull } from 'lib/utils';
 import Modal from 'modules/zero/components/modal/modal';
 import Dropdown from 'ZeroComponents/dropdown/dropdown';
@@ -154,8 +154,8 @@ const UploadsTable = ({ content, hidden, onFileUpload, onUpdatingChange, showChe
   /** Closes the delete dialog modal. */
   const closeDeleteModal = useCallback(() => {
     deleteModalState[1](false);
-    countly.trackEvent(countly.events.FILE_DELETE_CLICK, {
-      ui: countly.ui.FILES,
+    saEvent(analytics.events.FILE_DELETE_CLICK, {
+      ui: analytics.ui.FILES,
       totalDeleted: 0,
     });
   }, [deleteModalState]);
@@ -172,8 +172,8 @@ const UploadsTable = ({ content, hidden, onFileUpload, onUpdatingChange, showChe
       }
     } catch (e) {}
 
-    countly.trackEvent(countly.events.FILE_DELETE_CLICK, {
-      ui: countly.ui.FILES,
+    saEvent(analytics.events.FILE_DELETE_CLICK, {
+      ui: analytics.ui.FILES,
       totalDeleted: selectedUploads.length,
     });
 
@@ -370,7 +370,7 @@ const UploadsTable = ({ content, hidden, onFileUpload, onUpdatingChange, showChe
             onClick={onFileUpload}
             variant={content?.upload.theme}
             tracking={{
-              ui: countly.ui[content?.upload.ui],
+              ui: analytics.ui[content?.upload.ui],
               action: content?.upload.action,
               data: { isFirstFile: false },
             }}
@@ -435,7 +435,7 @@ const UploadsTable = ({ content, hidden, onFileUpload, onUpdatingChange, showChe
               onClick={onFileUpload}
               variant={content?.table.cta.theme}
               tracking={{
-                ui: countly.ui[content?.table.cta.ui],
+                ui: analytics.ui[content?.table.cta.ui],
                 action: content?.table.cta.action,
                 data: { isFirstFile: true },
               }}

packages/website/components/button/button.js

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useCallback } from 'react';
 
 import ZeroButton from 'ZeroComponents/button/button';
-import { trackEvent, events } from 'lib/countly';
+import { events, saEvent } from 'lib/analytics';
 import Tooltip from 'ZeroComponents/tooltip/tooltip';
 
 export const ButtonVariant = {
@@ -17,7 +17,7 @@ export const ButtonVariant = {
 };
 /**
  * @typedef {Object} TrackingProps
- * @prop {string} [ui] UI section id. One of countly.ui.
+ * @prop {string} [ui] UI section id. One of analytics.ui.
  * @prop {string} [action] Action id. used to uniquely identify an action within a ui section.
  * @prop {string} [event] Custom event name to be used instead of the default CTA_LINK_CLICK.
  * @prop {Record<string, any>} [data] The data attached to this tracking event
@@ -54,7 +54,7 @@ const Button = ({
   const onClickHandler = useCallback(
     event => {
       tracking &&
-        trackEvent(tracking.event || events.CTA_LINK_CLICK, {
+        saEvent(tracking.event || events.CTA_LINK_CLICK, {
           ui: tracking.ui,
           action: tracking.action,
           link: props.href || '',

packages/website/components/card/card-tier.js

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 import clsx from 'clsx';
 
 import Button from '../button/button';
-import countly from '../../lib/countly';
+import analytics from '../../lib/analytics';
 import { elementIsInViewport } from '../../lib/utils.js';
 
 // ====================================================================== Params
@@ -23,10 +23,10 @@ export default function Card({ card, cardsGroup = [], index = 0, onCardLoad }) {
   const tracking = {};
   if (typeof card.cta === 'object') {
     if (card.cta.event) {
-      tracking.event = countly.events[card.cta.event];
+      tracking.event = analytics.events[card.cta.event];
     }
     if (card.cta.ui) {
-      tracking.ui = countly.ui[card.cta.ui];
+      tracking.ui = analytics.ui[card.cta.ui];
     }
     if (card.cta.action) {
       tracking.action = card.cta.action;

packages/website/components/card/card.js

@@ -9,7 +9,7 @@ import CardTier from './card-tier';
 import Button from '../button/button';
 import NpmIcon from '../../assets/icons/npmicon';
 import Windows from '../../assets/icons/windows';
-import countly from '../../lib/countly';
+import analytics, { saEvent } from '../../lib/analytics';
 
 // ====================================================================== Params
 /**
@@ -27,10 +27,10 @@ export default function Card({ card, cardsGroup = [], index = 0, targetClass, on
   const tracking = {};
   if (typeof card.cta === 'object') {
     if (card.cta.event) {
-      tracking.event = countly.events[card.cta.event];
+      tracking.event = analytics.events[card.cta.event];
     }
     if (card.cta.ui) {
-      tracking.ui = countly.ui[card.cta.ui];
+      tracking.ui = analytics.ui[card.cta.ui];
     }
     if (card.cta.action) {
       tracking.action = card.cta.action;
@@ -44,7 +44,7 @@ export default function Card({ card, cardsGroup = [], index = 0, targetClass, on
   }, [onCardLoad]);
 
   const onLinkClick = useCallback(e => {
-    countly.trackCustomLinkClick(countly.events.LINK_CLICK_EXPLORE_DOCS, e.currentTarget);
+    saEvent(analytics.events.LINK_CLICK_EXPLORE_DOCS, { link_text: e.currentTarget });
   }, []);
 
   const handleButtonClick = useCallback(

packages/website/components/footer/footer.js

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { useRouter } from 'next/router';
 import clsx from 'clsx';
 
-import { trackCustomLinkClick, events } from '../../lib/countly';
+import { events, saEvent } from '../../lib/analytics';
 import Link, { useIsExternalHref } from '../link/link';
 import SiteLogo from '../../assets/icons/w3storage-logo.js';
 import Button from '../button/button';
@@ -30,7 +30,7 @@ export default function Footer({ isProductApp }) {
 
   // ================================================================= Functions
   const onLinkClick = useCallback(e => {
-    trackCustomLinkClick(events.LINK_CLICK_FOOTER, e.currentTarget);
+    saEvent(events.LINK_CLICK_FOOTER, { target: e.currentTarget });
   }, []);
 
   const handleButtonClick = useCallback(

packages/website/components/navigation/navigation.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import { useAuthorization } from 'components/contexts/authorizationContext';
 import ZeroAccordion from 'ZeroComponents/accordion/accordion';
 import ZeroAccordionSection from 'ZeroComponents/accordion/accordionSection';
-import { trackCustomLinkClick, events, ui } from 'lib/countly';
+import { events, saEvent, ui } from 'lib/analytics';
 import Loading from 'components/loading/loading';
 import Breadcrumbs from 'components/breadcrumbs/breadcrumbs';
 import Sidebar from 'modules/docs-theme/sidebar/sidebar';
@@ -50,7 +50,8 @@ export default function Navigation({ breadcrumbs, isProductApp }) {
 
   const onLinkClick = useCallback(
     e => {
-      trackCustomLinkClick(events.LINK_CLICK_NAVBAR, e.currentTarget);
+      saEvent(events.LINK_CLICK_NAVBAR, { target: e.currentTarget });
+
       if (isMenuOpen) {
         setMenuOpen(false);
       }

packages/website/components/textblock/textblock.js

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 import clsx from 'clsx';
 
 import Button from '../button/button';
-import countly from '../../lib/countly';
+import analytics from '../../lib/analytics';
 
 // ====================================================================== Params
 /**
@@ -19,21 +19,21 @@ export default function TextBlock({ block }) {
   const tracking2 = {};
   if (typeof block.cta === 'object') {
     if (block.cta.event) {
-      tracking.event = countly.events[block.cta.event];
+      tracking.event = analytics.events[block.cta.event];
     }
     if (block.cta.ui) {
-      tracking.ui = countly.ui[block.cta.ui];
+      tracking.ui = analytics.ui[block.cta.ui];
     }
     if (block.cta.action) {
       tracking.action = block.cta.action;
     }
   }
   if (typeof block.cta22 === 'object') {
     if (block.cta2.event) {
-      tracking2.event = countly.events[block.cta2.event];
+      tracking2.event = analytics.events[block.cta2.event];
     }
     if (block.cta2.ui) {
-      tracking2.ui = countly.ui[block.cta2.ui];
+      tracking2.ui = analytics.ui[block.cta2.ui];
     }
     if (block.cta2.action) {
       tracking2.action = block.cta2.action;

packages/website/components/tokens/tokenCreator/tokenCreator.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 
-import countly from 'lib/countly';
+import analytics, { saEvent } from 'lib/analytics';
 import Button, { ButtonVariant } from 'components/button/button';
 import { useTokens } from 'components/contexts/tokensContext';
 import { useUser } from 'hooks/use-user';
@@ -30,15 +30,15 @@ const TokenCreator = ({ content }) => {
   const onTokenCreate = useCallback(
     async e => {
       // Tracking
-      countly.trackEvent(
-        countly.events.TOKEN_CREATE,
+      saEvent(
+        analytics.events.TOKEN_CREATE,
         !tokens.length
           ? {
-              ui: countly.ui.TOKENS_EMPTY,
+              ui: analytics.ui.TOKENS_EMPTY,
               action: 'New API Token',
             }
           : {
-              ui: countly.ui.NEW_TOKEN,
+              ui: analytics.ui.NEW_TOKEN,
               action: 'Create new token',
             }
       );

packages/website/components/tokens/tokensManager/tokensManager.js

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router';
 
 import Link from 'components/link/link';
 import TokenRowItem from './tokenRowItem';
-import countly from 'lib/countly';
+import analytics, { saEvent } from 'lib/analytics';
 import Loading from 'components/loading/loading';
 import Button, { ButtonVariant } from 'components/button/button';
 import { useTokens } from 'components/contexts/tokensContext';
@@ -74,8 +74,8 @@ const TokensManager = ({ content }) => {
     } finally {
       await queryClient.invalidateQueries('get-tokens');
 
-      countly.trackEvent(countly.events.TOKEN_DELETE, {
-        ui: countly.ui.TOKENS,
+      saEvent(analytics.events.TOKEN_DELETE, {
+        ui: analytics.ui.TOKENS,
       });
 
       await getTokens();
@@ -144,7 +144,7 @@ const TokensManager = ({ content }) => {
                 className={clsx(isCreating && 'isDisabled')}
                 href={content.table.cta.link}
                 variant={content.table.cta.theme}
-                tracking={{ ui: countly.ui[content.table.cta.ui], action: content.table.cta.action }}
+                tracking={{ ui: analytics.ui[content.table.cta.ui], action: content.table.cta.action }}
               >
                 <Link href={content.table.cta.link}>{content.table.cta.text}</Link>
               </Button>

packages/website/lib/analytics.js

@@ -0,0 +1,48 @@
+/** @constant */
+export const events = {
+  LINK_CLICK_BANNER_NFTSTORAGE: 'linkClickBannerNFTStorage',
+  LINK_CLICK_NAVBAR: 'linkClickNavbar',
+  LINK_CLICK_FOOTER: 'linkClickFooter',
+  // Used for CTAs that are only linking to other pages/resources
+  CTA_LINK_CLICK: 'ctaLinkClick',
+  // Other custom action events
+  LOGIN_CLICK: 'loginClick',
+  LOGOUT_CLICK: 'logoutClick',
+  FILE_UPLOAD_CLICK: 'fileUploadClick',
+  FILE_DELETE_CLICK: 'fileDeleteClick',
+  FILES_NAVIGATION_CLICK: 'filesNavigationClick',
+  FILES_REFRESH: 'filesRefreshClick',
+  TOKEN_CREATE: 'tokenCreate',
+  TOKEN_COPY: 'tokenCopy',
+  TOKEN_DELETE: 'tokenDelete',
+  NOT_FOUND: 'notFound',
+  FEEDBACK_HELPFUL: 'feedbackHelpful',
+  FEEDBACK_IMPORTANT: 'feedbackImportant',
+  FEEDBACK_GENERAL: 'feedbackGeneral',
+};
+
+/** @constant */
+export const ui = {
+  HOME_HERO: 'home/hero',
+  HOME_GET_STARTED: 'home/get-started',
+  NAVBAR: 'navbar',
+  LOGIN: 'login',
+  FILES: 'files',
+  UPLOAD: 'upload',
+  NEW_TOKEN: 'new-token',
+  TOKENS: 'tokens',
+  TOKENS_EMPTY: 'tokens/empty',
+  PROFILE_GETTING_STARTED: 'profile/getting-started',
+  PROFILE_API_TOKENS: 'profile/api-tokens',
+};
+
+export default {
+  events,
+  ui
+};
+
+export const saEvent = (eventName, metadata) => {
+
+  // @ts-ignore
+  if (window && window.sa_event) return window.sa_event(eventName, metadata);
+};