chore: [M3-6497] - Remove Google Analytics and clean up custom events

packages/api-v4/.changeset/pr-9266-removed-1686852804191.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Removed
+---
+
+References to deprecated Google Tag Manager ([#9266](https://github.com/linode/manager/pull/9266))

packages/api-v4/src/request.ts

@@ -179,46 +179,6 @@ export const requestGenerator = <T>(...fns: Function[]): Promise<T> => {
     );
   }
   return baseRequest(config).then((response) => response.data);
-
-  /*
-   * If in the future, we want to hook into every single
-   * async action for the purpose of sending the request data
-   * to Google Tag Manager, we can uncomment out the following
-   * .then() and .catch() on return Axios(config)
-   */
-
-  // .then(response => {
-  //   /*
-  //    * This is sending an event to the Google Tag Manager
-  //    * data layer. This is important because it lets us track
-  //    * async actions as custom events
-  //    */
-  //   if ((window as any).dataLayer) {
-  //     (window as any).dataLayer = (window as any).dataLayer || [];
-  //     (window as any).dataLayer.push({
-  //       'event': 'asyncActionSuccess',
-  //       'url': response.config.url,
-  //       'method': response.config.method,
-  //     });
-  //   };
-  //   return response;
-  // })
-  // .catch(e => {
-  //   /*
-  //    * This is sending an event to the Google Tag Manager
-  //    * data layer. This is important because it lets us track
-  //    * async actions as custom events
-  //    */
-  //   if ((window as any).dataLayer) {
-  //     (window as any).dataLayer = (window as any).dataLayer || [];
-  //     (window as any).dataLayer.push({
-  //       'event': 'asyncActionFailure',
-  //       'url': e.response.config.url,
-  //       'method': e.response.config.method,
-  //     });
-  //   };
-  //   return Promise.reject(e);
-  // });
 };
 
 /**

packages/manager/.changeset/pr-9266-removed-1686852738775.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Removed
+---
+
+Deprecate Google Analytics and clean up unused custom events ([#9266](https://github.com/linode/manager/pull/9266))

packages/manager/.env.example

@@ -23,12 +23,6 @@ REACT_APP_LKE_HIGH_AVAILABILITY_PRICE='60'
 # Adobe Analytics:
 # REACT_APP_ADOBE_ANALYTICS_URL=
 
-# Google Analytics:
-# REACT_APP_GA_ID=
-
-# Google Tag Manager:
-# REACT_APP_GTM_ID=
-
 # Linode Docs search with Algolia:
 # REACT_APP_ALGOLIA_APPLICATION_ID=
 # REACT_APP_ALGOLIA_SEARCH_KEY=

packages/manager/package.json

@@ -63,7 +63,6 @@
     "react-csv": "^2.0.3",
     "react-dom": "^17.0.2",
     "react-dropzone": "~11.2.0",
-    "react-ga": "^2.5.3",
     "react-number-format": "^3.5.0",
     "react-page-visibility": "^6.2.0",
     "react-query": "^3.3.2",

packages/manager/src/App.tsx

@@ -125,11 +125,6 @@ const BaseApp = withFeatureFlagProvider(
        * Send pageviews
        */
       return history.listen(({ pathname }) => {
-        // Send Google Analytics page view events
-        if ((window as any).ga) {
-          (window as any).ga('send', 'pageview', pathname);
-        }
-
         // Send Adobe Analytics page view events
         if ((window as any)._satellite) {
           (window as any)._satellite.track('page view', {

packages/manager/src/IdentifyUser.tsx

@@ -2,7 +2,6 @@ import md5 from 'md5';
 import * as React from 'react';
 import { LAUNCH_DARKLY_API_KEY } from 'src/constants';
 import { useLDClient } from 'src/containers/withFeatureFlagProvider.container';
-import { initGTMUser } from './analytics';
 import { configureErrorReportingUser } from './exceptionReporting';
 import useFeatureFlagsLoad from './hooks/useFeatureFlagLoad';
 import { useAccount } from './queries/account';
@@ -23,7 +22,6 @@ export const IdentifyUser = () => {
 
   const { setFeatureFlagsLoaded } = useFeatureFlagsLoad();
 
-  const euuid = account?.euuid;
   const userID = profile?.uid;
   const username = profile?.username;
 
@@ -34,13 +32,6 @@ export const IdentifyUser = () => {
     }
   }, [userID, username]);
 
-  // Configure user for GTM once we have the info we need.
-  React.useEffect(() => {
-    if (euuid) {
-      initGTMUser(euuid);
-    }
-  }, [euuid]);
-
   React.useEffect(() => {
     if (!LAUNCH_DARKLY_API_KEY) {
       /**

packages/manager/src/components/Button/Button.stories.tsx

@@ -18,7 +18,7 @@ const meta: Meta<typeof Button> = {
   component: Button,
   argTypes: {
     tooltipAnalyticsEvent: {
-      action: 'GA Event Action',
+      action: 'Analytics Event Action',
     },
   },
   args: {

packages/manager/src/components/DocsLink/DocsLink.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import DocsIcon from 'src/assets/icons/docs.svg';
 import { makeStyles } from 'tss-react/mui';
 import { Theme } from '@mui/material/styles';
-import { sendHelpButtonClickEvent } from 'src/utilities/ga';
+import { sendHelpButtonClickEvent } from 'src/utilities/analytics';
 import { IconTextLink } from '../IconTextLink/IconTextLink';
 
 const useStyles = makeStyles()((theme: Theme) => ({

packages/manager/src/components/EmptyLandingPageResources/ResourcesLinks.tsx

@@ -8,15 +8,15 @@ import { ResourcesLinkIcon } from 'src/components/EmptyLandingPageResources/Reso
 import type { ResourcesLinks } from './ResourcesLinksTypes';
 
 export const ResourceLinks = (props: ResourcesLinks) => {
-  const { linkGAEvent, links } = props;
+  const { linkAnalyticsEvent, links } = props;
 
   return (
     <List>
       {links.map((linkData) => (
         <ListItem key={linkData.to}>
           <Link
             to={linkData.to}
-            onClick={getLinkOnClick(linkGAEvent, linkData.text)}
+            onClick={getLinkOnClick(linkAnalyticsEvent, linkData.text)}
           >
             {linkData.text}
             {linkData.external && (

packages/manager/src/components/EmptyLandingPageResources/ResourcesLinksTypes.ts

@@ -4,7 +4,7 @@ interface ResourcesLink {
   external?: boolean;
 }
 
-export interface LinkGAEvent {
+export interface linkAnalyticsEvent {
   category: string;
   action: string;
 }
@@ -17,7 +17,7 @@ export interface ResourcesHeaders {
 
 export interface ResourcesLinks {
   links: ResourcesLink[];
-  linkGAEvent: LinkGAEvent;
+  linkAnalyticsEvent: linkAnalyticsEvent;
 }
 
 export interface ResourcesLinkSection {

packages/manager/src/components/EmptyLandingPageResources/ResourcesSection.tsx

@@ -18,7 +18,7 @@ import {
 } from 'src/utilities/emptyStateLandingUtils';
 import type {
   ResourcesHeaders,
-  LinkGAEvent,
+  linkAnalyticsEvent,
   ResourcesLinkSection,
 } from 'src/components/EmptyLandingPageResources/ResourcesLinksTypes';
 
@@ -56,7 +56,7 @@ interface ResourcesSectionProps {
   /**
    * The event data to be sent when the call to action is clicked
    */
-  linkGAEvent: LinkGAEvent;
+  linkAnalyticsEvent: linkAnalyticsEvent;
   /**
    * If true, the transfer display will be shown at the bottom
    * */
@@ -74,14 +74,22 @@ interface ResourcesSectionProps {
   wide?: boolean;
 }
 
-const GuideLinks = (guides: ResourcesLinkSection, linkGAEvent: LinkGAEvent) => (
-  <ResourceLinks links={guides.links} linkGAEvent={linkGAEvent} />
+const GuideLinks = (
+  guides: ResourcesLinkSection,
+  linkAnalyticsEvent: linkAnalyticsEvent
+) => (
+  <ResourceLinks links={guides.links} linkAnalyticsEvent={linkAnalyticsEvent} />
 );
 
 const YoutubeLinks = (
   youtube: ResourcesLinkSection,
-  linkGAEvent: LinkGAEvent
-) => <ResourceLinks links={youtube.links} linkGAEvent={linkGAEvent} />;
+  linkAnalyticsEvent: linkAnalyticsEvent
+) => (
+  <ResourceLinks
+    links={youtube.links}
+    linkAnalyticsEvent={linkAnalyticsEvent}
+  />
+);
 
 export const ResourcesSection = (props: ResourcesSectionProps) => {
   const {
@@ -91,7 +99,7 @@ export const ResourcesSection = (props: ResourcesSectionProps) => {
     gettingStartedGuidesData,
     headers,
     icon,
-    linkGAEvent,
+    linkAnalyticsEvent,
     showTransferDisplay,
     youtubeLinkData,
     wide = false,
@@ -112,7 +120,7 @@ export const ResourcesSection = (props: ResourcesSectionProps) => {
             MoreLink={(props) => (
               <ResourcesMoreLink
                 onClick={getLinkOnClick(
-                  linkGAEvent,
+                  linkAnalyticsEvent,
                   gettingStartedGuidesData.moreInfo.text
                 )}
                 to={gettingStartedGuidesData.moreInfo.to}
@@ -124,15 +132,18 @@ export const ResourcesSection = (props: ResourcesSectionProps) => {
             )}
             title={gettingStartedGuidesData.title}
           >
-            {GuideLinks(gettingStartedGuidesData, linkGAEvent)}
+            {GuideLinks(gettingStartedGuidesData, linkAnalyticsEvent)}
           </ResourcesLinksSubSection>
           {CustomResource && <CustomResource />}
           <ResourcesLinksSubSection
             icon={<YoutubeIcon />}
             MoreLink={(props) => (
               <ResourcesMoreLink
                 external
-                onClick={getLinkOnClick(linkGAEvent, youtubeMoreLinkLabel)}
+                onClick={getLinkOnClick(
+                  linkAnalyticsEvent,
+                  youtubeMoreLinkLabel
+                )}
                 to={youtubeChannelLink}
                 {...props}
               >
@@ -145,7 +156,7 @@ export const ResourcesSection = (props: ResourcesSectionProps) => {
             )}
             title={youtubeLinkData.title}
           >
-            {YoutubeLinks(youtubeLinkData, linkGAEvent)}
+            {YoutubeLinks(youtubeLinkData, linkAnalyticsEvent)}
           </ResourcesLinksSubSection>
         </ResourcesLinksSection>
       }

packages/manager/src/components/FileUploader/FileUploader.tsx

@@ -27,7 +27,7 @@ import { useCurrentToken } from 'src/hooks/useAuthentication';
 import { queryKey, useUploadImageQuery } from 'src/queries/images';
 import { redirectToLogin } from 'src/session';
 import { setPendingUpload } from 'src/store/pendingUpload';
-import { sendImageUploadEvent } from 'src/utilities/ga';
+import { sendImageUploadEvent } from 'src/utilities/analytics';
 import { readableBytes } from 'src/utilities/unitConversions';
 
 interface FileUploaderProps {

packages/manager/src/components/LinodeCLIModal/LinodeCLIModal.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
 import { Dialog } from 'src/components/Dialog/Dialog';
-import { sendCLIClickEvent } from 'src/utilities/ga';
+import { sendCLIClickEvent } from 'src/utilities/analytics';
 import { styled } from '@mui/material/styles';
 
 export interface ImageUploadSuccessDialogProps {

packages/manager/src/components/SelectRegionPanel/SelectRegionPanel.tsx

@@ -8,7 +8,7 @@ import { Notice } from 'src/components/Notice/Notice';
 import { Region } from '@linode/api-v4/lib/regions';
 import { RegionHelperText } from 'src/components/SelectRegionPanel/RegionHelperText';
 import { RegionSelect } from 'src/components/EnhancedSelect/variants/RegionSelect';
-import { sendLinodeCreateDocsEvent } from 'src/utilities/ga';
+import { sendLinodeCreateDocsEvent } from 'src/utilities/analytics';
 import { useLocation } from 'react-router-dom';
 import { useTheme } from '@mui/material/styles';
 

packages/manager/src/constants.ts

@@ -67,9 +67,6 @@ export const LONGVIEW_ROOT = 'https://longview.linode.com/fetch';
 export const SENTRY_URL = import.meta.env.REACT_APP_SENTRY_URL;
 export const LOGIN_SESSION_LIFETIME_MS = 45 * 60 * 1000;
 export const OAUTH_TOKEN_REFRESH_TIMEOUT = LOGIN_SESSION_LIFETIME_MS / 2;
-/** Google Analytics and Tag Manager */
-export const GA_ID = import.meta.env.REACT_APP_GA_ID;
-export const GTM_ID = import.meta.env.REACT_APP_GTM_ID;
 /** Adobe Analytics */
 export const ADOBE_ANALYTICS_URL = import.meta.env
   .REACT_APP_ADOBE_ANALYTICS_URL;

packages/manager/src/env.d.ts

@@ -12,8 +12,6 @@ interface ImportMetaEnv {
   REACT_APP_DISABLE_EVENT_THROTTLE?: boolean;
   REACT_APP_LOG_PERFORMANCE_METRICS?: string;
   REACT_APP_ACCESS_TOKEN?: string;
-  REACT_APP_GTM_ID?: string;
-  REACT_APP_GA_ID?: string;
   REACT_APP_ADOBE_ANALYTICS_URL?: string;
   REACT_APP_SENTRY_URL?: string;
   REACT_APP_GPAY_ENV?: 'TEST' | 'PRODUCTION';