fix(SpreadsheetAddOn): fix broken links, cleanup UA/GA4 logic

src/components/Layout/index.tsx

@@ -37,7 +37,6 @@ import MenuIcon from "@mui/icons-material/Menu"
 import Typography from "@mui/material/Typography"
 
 import Login from "./Login"
-import { useGAVersion } from "../../hooks"
 import { GAVersion, Url } from "../../constants"
 import Spinner from "../Spinner"
 import { linkData } from "./links"
@@ -117,25 +116,29 @@ const Template: React.FC<PropsWithChildren<LayoutProps & TemplateProps>> = ({
                                                                               user,
                                                                             }) => {
   usePageView(title)
-  const { gaVersion, setGAVersion } = useGAVersion(pathname)
+  const gaVersion = GAVersion.GoogleAnalytics4
 
   const [open, setOpen] = React.useState(false)
 
   useEffect(() => {
-    //const timeout = setTimeout(() => {
+    const uaToGa4Redirects: { [key: string]: string } = {
+      "/campaign-url-builder/": "/ga4/campaign-url-builder/",
+      "/enhanced-ecommerce/": "/ga4/enhanced-ecommerce/",
+      "/": "/ga4/",
+    }
+
+    const redirectPath = uaToGa4Redirects[window.location.pathname]
+    if (redirectPath) {
+      window.location.replace(redirectPath)
+    }
+
     // Redirect to the new domain while preserving the path.
     if( window.location.hostname.indexOf('web.app') !== -1 && !window.location.hostname.includes('staging')) {
       const newHostname = window.location.hostname.replace('web.app', 'google');
       const newLocation =  window.location.href.replace( window.location.hostname, newHostname );
       window.location.replace(newLocation);
     }
 
-    if( !window.location.search && window.location.pathname === '/' ) {
-      const newLocation = window.location.pathname = '/ga4/';
-      window.location.replace(newLocation);
-    }
-      //}, 1000);
-
     return;
   }, []);
 
@@ -186,7 +189,7 @@ const Template: React.FC<PropsWithChildren<LayoutProps & TemplateProps>> = ({
           <Drawer open={open} onClose={() => setOpen(false)}>
             <List className={classes.mobileNav}>
               <Link
-                  to={gaVersion === GAVersion.UniversalAnalytics ? "/" : "/ga4/"}
+                  to="/ga4/"
                   className={classes.noColor}
               >
                 <Typography
@@ -229,7 +232,7 @@ const Template: React.FC<PropsWithChildren<LayoutProps & TemplateProps>> = ({
           <ol>
             <li>
               <Link
-                  to={gaVersion === GAVersion.UniversalAnalytics ? "/" : "/ga4/"}
+                  to="/ga4/"
               >
                 <Typography
                     className={clsx(classes.innerNav, classes.home)}

src/components/Layout/links.ts

@@ -96,9 +96,9 @@ export const linkData: LinkData[] = [
   },
   {
     text: "Spreadsheet Add-on",
-    href: "/spreadsheet-add-on/",
+    href: "/ga4/spreadsheet-add-on/",
     type: "link",
-    versions: [GAVersion.UniversalAnalytics],
+    versions: [GAVersion.GoogleAnalytics4],
   },
   {
     text: "Tag Assistant",

src/constants.ts

@@ -58,8 +58,9 @@ export enum Url {
   gaDevsite = "http://developers.google.com/analytics",
   gaDevsiteHelp = "http://developers.google.com/analytics/help/",
   reportingApis = "https://developers.google.com/analytics/devguides/reporting/",
+  // TODO: Update spreadsheetAddOn link once documentation is available
   spreadsheetAddOn = "https://developers.google.com/analytics/solutions/google-analytics-spreadsheet-add-on",
-  spreadsheetAddOnExternal = "https://gsuite.google.com/marketplace/app/google_analytics/477988381226",
+  spreadsheetAddOnExternal = "https://workspace.google.com/marketplace/app/ga4_reports_builder_for_google_analytics/589269949355",
   tagAssistantExternal = "https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk",
   crossDomainMeasurement = "https://developers.google.com/analytics/devguides/collection/analyticsjs/cross-domain",
   protocolParameters = "https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters",

src/hooks/index.ts

@@ -1,11 +1,10 @@
 import * as React from "react"
 
-import { navigate } from "gatsby"
 import { useLocation } from "@reach/router"
 import { useState, useEffect, useCallback } from "react"
 import { useDispatch } from "react-redux"
 
 import { StorageKey, GAVersion } from "@/constants"
 import { Dispatch } from "@/types"
 import copyToClipboard from "copy-to-clipboard"
 
@@ -155,110 +154,6 @@
   return [fromStorage, setValue]
 }
 
-const uaToast = (tool: string) => `Redirecting to the UA ${tool}.`
-const ga4Toast = (tool: string) => `Redirecting to the GA4 ${tool}.`
-
-const getRedirectInfo = (
-  path: string,
-  version: GAVersion
-): { redirectPath: string; toast: string } | undefined => {
-  switch (version) {
-    case GAVersion.UniversalAnalytics: {
-      switch (path) {
-        case "/ga4/query-explorer/":
-          return {
-            redirectPath: "/query-explorer/",
-            toast: uaToast("Query Explorer"),
-          }
-        case "/ga4/event-builder/":
-          return {
-            redirectPath: "/hit-builder/",
-            toast: uaToast("Hit Builder"),
-          }
-        case "/ga4/dimensions-metrics-explorer/":
-          return {
-            redirectPath: "/dimensions-metrics-explorer/",
-            toast: uaToast("Dimensions & Metrics Explorer"),
-          }
-        case "/ga4/campaign-url-builder/":
-          return {
-            redirectPath: "/campaign-url-builder/",
-            toast: uaToast("Campaign URL Builder"),
-          }
-        case "/ga4/campaign-url-builder/ios/":
-          return {
-            redirectPath: "/campaign-url-builder/ios/",
-            toast: uaToast("iOS Campaign URL Builder"),
-          }
-        case "/ga4/campaign-url-builder/play/":
-          return {
-            redirectPath: "/campaign-url-builder/play/",
-            toast: uaToast("play Campaign URL Builder"),
-          }
-        case "/ga4/":
-          return {
-            redirectPath: "/",
-            toast: "Redirecting to the UA home page.",
-          }
-        default:
-          return {
-            redirectPath: "/",
-            toast: "No UA demo. Redirecting to the UA home page.",
-          }
-      }
-    }
-    case GAVersion.GoogleAnalytics4: {
-      switch (path) {
-        case "/hit-builder/":
-          return {
-            redirectPath: "/ga4/event-builder/",
-            toast: ga4Toast("Event Builder"),
-          }
-        case "/dimensions-metrics-explorer/":
-          return {
-            redirectPath: "/ga4/dimensions-metrics-explorer/",
-            toast: ga4Toast("Dimensions & Metrics Explorer"),
-          }
-        case "/query-explorer/":
-          return {
-            redirectPath: "/ga4/query-explorer/",
-            toast: ga4Toast("Query Explorer"),
-          }
-        case "/request-composer/":
-          return {
-            redirectPath: "/ga4/query-explorer/",
-            toast: ga4Toast("Query Explorer"),
-          }
-        case "/campaign-url-builder/":
-          return {
-            redirectPath: "/ga4/campaign-url-builder/",
-            toast: ga4Toast("Campaign URL Builder"),
-          }
-        case "/campaign-url-builder/ios/":
-          return {
-            redirectPath: "/ga4/campaign-url-builder/ios/",
-            toast: ga4Toast("iOS Campaign URL Builder"),
-          }
-        case "/campaign-url-builder/play/":
-          return {
-            redirectPath: "/ga4/campaign-url-builder/play/",
-            toast: ga4Toast("Play Campaign URL Builder"),
-          }
-        case "/":
-          return {
-            redirectPath: "/ga4/",
-            toast: "Redirecting to the GA4 home page.",
-          }
-        default:
-          return {
-            redirectPath: "/ga4/",
-            toast: "No GA4 demo. Redirecting to the GA4 home page.",
-          }
-      }
-    }
-  }
-}
-
 export const useSetToast = () => {
   const dispatch = useDispatch()
   const setToast = React.useCallback(
@@ -272,37 +167,6 @@
 
 export const IS_SSR = typeof window === "undefined"
 
-export const useGAVersion = (
-  pathname: string
-): {
-  gaVersion: GAVersion
-  setGAVersion: (version: GAVersion) => void
-} => {
-  const location = useLocation()
-  const setToast = useSetToast()
-  const gaVersion = React.useMemo(() => {
-    if (pathname.includes("/ga4/")) {
-      return GAVersion.GoogleAnalytics4
-    } else {
-      return GAVersion.UniversalAnalytics
-    }
-  }, [pathname])
-
-  const setGAVersion = React.useCallback(
-    (version: GAVersion) => {
-      const redirectInfo = getRedirectInfo(location.pathname, version)
-      if (redirectInfo === undefined) {
-        return
-      }
-      setToast(redirectInfo.toast)
-      navigate(redirectInfo.redirectPath)
-    },
-    [location.pathname, setToast]
-  )
-
-  return { gaVersion, setGAVersion }
-}
-
 export const useScrollTo = () => {
   const [initialLoad, setInitialLoad] = useState(true)
   const location = useLocation()

src/pages/spreadsheet-add-on.tsx → src/pages/ga4/spreadsheet-add-on.tsx

@@ -51,7 +51,7 @@ const SpreadsheetAddOn = (props: Props) => {
       <a href={Url.spreadsheetAddOnExternal}>
         <StaticImage
           alt="screenshot of the add-on"
-          src="../images/screenshots/spreadsheet-add-on-2x.png"
+          src="../../images/screenshots/spreadsheet-add-on-2x.png"
         />
       </a>