Remove GA (#1122)

remove GA
rage · Feb 27, 2023 · cda68ba · cda68ba
1 parent 650b895
commit cda68ba
Show file tree

Hide file tree

Showing 11 changed files with 94 additions and 152 deletions.
diff --git a/frontend/components/Home/CourseCard.tsx b/frontend/components/Home/CourseCard.tsx
@@ -1,5 +1,3 @@
-import ReactGA from "react-ga"
-
 import { Chip, Grid, Skeleton } from "@mui/material"
 import { styled } from "@mui/material/styles"
 
@@ -62,9 +60,6 @@ const TextArea = styled("div")`
   }
 `
 
-const CardLinkWithGA = styled(ReactGA.OutboundLink)`
-  text-decoration: none;
-`
 interface CourseCardProps {
   course?: CourseFieldsFragment
 }
@@ -74,67 +69,63 @@ function CourseCard({ course }: CourseCardProps) {
 
   return (
     <Grid item xs={12} sm={12} md={6} lg={4} xl={3}>
-      <CardLinkWithGA
-        eventLabel={`coursesite: ${course?.name ?? ""}`}
+      <Background
+        focusRipple
         to={course?.link ?? ""}
         target="_blank"
+        disabled={
+          !course?.link ||
+          (course?.status === "Upcoming" && !course?.upcoming_active_link)
+        }
+        component="div"
+        role="none"
       >
-        <Background
-          focusRipple
-          disabled={
-            !course?.link ||
-            (course?.status === "Upcoming" && !course?.upcoming_active_link)
-          }
-          component="div"
-          role="none"
-        >
-          <ResponsiveCourseImageBase>
-            {course ? (
-              <CourseImage
-                photo={course.photo}
-                style={{ opacity: course.status === "Upcoming" ? 0.6 : 1 }}
+        <ResponsiveCourseImageBase>
+          {course ? (
+            <CourseImage
+              photo={course.photo}
+              style={{ opacity: course.status === "Upcoming" ? 0.6 : 1 }}
+            />
+          ) : (
+            <Skeleton variant="rectangular" height="100%" />
+          )}
+          {course?.link &&
+            course?.status === "Upcoming" &&
+            course?.upcoming_active_link && (
+              <Chip
+                variant="outlined"
+                style={{
+                  position: "absolute",
+                  top: "10px",
+                  right: "10px",
+                  backgroundColor: "white",
+                }}
+                clickable
+                label={t("coursePageAvailable")}
               />
-            ) : (
-              <Skeleton variant="rectangular" height="100%" />
             )}
-            {course?.link &&
-              course?.status === "Upcoming" &&
-              course?.upcoming_active_link && (
-                <Chip
-                  variant="outlined"
-                  style={{
-                    position: "absolute",
-                    top: "10px",
-                    right: "10px",
-                    backgroundColor: "white",
-                  }}
-                  clickable
-                  label={t("coursePageAvailable")}
-                />
-              )}
-          </ResponsiveCourseImageBase>
-          <TextArea>
-            {course ? (
-              <>
-                <CardTitle component="h3" variant="h3">
-                  {course.name}
-                </CardTitle>
-                <CardText component="p" variant="body1" paragraph align="left">
-                  {course.description}
-                </CardText>
-              </>
-            ) : (
-              <>
-                <h3>
-                  <Skeleton variant="text" width="100%" />
-                </h3>
+        </ResponsiveCourseImageBase>
+        <TextArea>
+          {course ? (
+            <>
+              <CardTitle component="h3" variant="h3">
+                {course.name}
+              </CardTitle>
+              <CardText component="p" variant="body1" paragraph align="left">
+                {course.description}
+              </CardText>
+            </>
+          ) : (
+            <>
+              <h3>
                 <Skeleton variant="text" width="100%" />
-                <Skeleton variant="text" width="100%" />
-              </>
-            )}
-          </TextArea>
-        </Background>
-      </CardLinkWithGA>
+              </h3>
+              <Skeleton variant="text" width="100%" />
+              <Skeleton variant="text" width="100%" />
+            </>
+          )}
+        </TextArea>
+      </Background>
     </Grid>
   )
 }

diff --git a/frontend/components/Home/ModuleSmallCourseCard.tsx b/frontend/components/Home/ModuleSmallCourseCard.tsx
@@ -1,5 +1,3 @@
-import ReactGA from "react-ga"
-
 import { Grid, Skeleton, Typography } from "@mui/material"
 import { styled } from "@mui/material/styles"
 
@@ -110,42 +108,38 @@ function ModuleSmallCourseCard({
 
   return (
     <Grid item xs={12} sm={6} md={12} lg={6} xl={4}>
-      <Background focusRipple component="div" role="none">
-        {course ? (
-          <ReactGA.OutboundLink
-            eventLabel={`modulecoursesite: ${course ? course.name : ""}`}
-            to={course.link ?? ""}
-            target="_blank"
-            style={{ textDecoration: "none", width: "100%" }}
-            onClick={(e) => (course.link === "" ? e.preventDefault() : null)}
-            aria-label={`To the course homepage of ${course.name}`}
-          >
-            {showHeader &&
-              (course.study_module_start_point ||
-                course.status === CourseStatus.Upcoming) && (
-                <Header
-                  startPoint={course.study_module_start_point}
-                  upcoming={course.status === CourseStatus.Upcoming}
-                >
-                  <Typography variant="body1">
-                    {course.status === CourseStatus.Upcoming
-                      ? t("upcomingShort")
-                      : t("moduleCourseStartPoint")}
-                  </Typography>
-                </Header>
-              )}
-            <ContentArea>
-              <ModuleCardTitle>{course.name}</ModuleCardTitle>
-              <ModuleCardText>{course.description}</ModuleCardText>
-            </ContentArea>
-          </ReactGA.OutboundLink>
-        ) : (
-          <>
-            <SkeletonTitle />
-            <SkeletonText />
-          </>
-        )}
-      </Background>
+      {course ? (
+        <Background
+          focusRipple
+          href={course.link ?? ""}
+          target="_blank"
+          aria-label={`To the course homepage of ${course.name}`}
+        >
+          {showHeader &&
+            (course.study_module_start_point ||
+              course.status === CourseStatus.Upcoming) && (
+              <Header
+                startPoint={course.study_module_start_point}
+                upcoming={course.status === CourseStatus.Upcoming}
+              >
+                <Typography variant="body1">
+                  {course.status === CourseStatus.Upcoming
+                    ? t("upcomingShort")
+                    : t("moduleCourseStartPoint")}
+                </Typography>
+              </Header>
+            )}
+          <ContentArea>
+            <ModuleCardTitle>{course.name}</ModuleCardTitle>
+            <ModuleCardText>{course.description}</ModuleCardText>
+          </ContentArea>
+        </Background>
+      ) : (
+        <Background focusRipple component="div" role="none">
+          <SkeletonTitle />
+          <SkeletonText />
+        </Background>
+      )}
     </Grid>
   )
 }

diff --git a/frontend/components/Home/UkraineInfo.tsx b/frontend/components/Home/UkraineInfo.tsx
@@ -90,18 +90,15 @@ function UkraineInfo() {
             <CardTitle component="h3" variant="h3" style={{ marginTop: 0 }}>
               {t("ukraineText")}
             </CardTitle>
-            <OutboundLink eventLabel="custom: ukraina" to={t("ukraineLink")}>
+            <OutboundLink href={t("ukraineLink")}>
               {t("ukraineLinkText")}
             </OutboundLink>
           </InfoContainer>
           <InfoContainer>
             <CardTitle component="h3" variant="h3" style={{ marginTop: 0 }}>
               {t("ukraineHyText")}
             </CardTitle>
-            <OutboundLink
-              eventLabel="custom: ukrainaHy"
-              to={t("ukraineHyLink")}
-            >
+            <OutboundLink href={t("ukraineHyLink")}>
               {t("ukraineHyLinkText")}
             </OutboundLink>
           </InfoContainer>

diff --git a/frontend/components/NewLayout/Courses/CourseCard.tsx b/frontend/components/NewLayout/Courses/CourseCard.tsx
@@ -134,7 +134,7 @@ const StyledTooltip = styled(Tooltip)`
 const Link = styled(OutboundLink)`
   justify-self: right;
   margin: 1rem;
-`
+` as typeof OutboundLink
 
 const Tags = styled("div")``
 
@@ -339,9 +339,7 @@ function CourseCard({ course }: CourseCardProps) {
                 </DifficultyTagContainer>
               ))}
           </DifficultyTags>
-          <Link eventLabel="to_course_material" to="https://www.mooc.fi">
-            {t("showCourse")}
-          </Link>
+          <Link href="https://www.mooc.fi">{t("showCourse")}</Link>
         </RightContentContainer>
         {/* <SponsorContainer>
           <Sponsor src={sponsorLogo.src} alt="Sponsor logo" fill />

diff --git a/frontend/components/OutboundLink.tsx b/frontend/components/OutboundLink.tsx
@@ -1,15 +1,10 @@
 import React, { PropsWithChildren } from "react"
 
-import ReactGA from "react-ga"
-
 import upRightFromSquareSvg from "@fortawesome/fontawesome-free/svgs/solid/up-right-from-square.svg"
+import { Link, LinkProps } from "@mui/material"
 import { styled } from "@mui/material/styles"
 
-interface OutboundLinkProps {
-  label?: string
-}
-
-const StyledOutboundLink = styled(ReactGA.OutboundLink)`
+const StyledOutboundLink = styled(Link)`
   padding-right: 0.5rem;
   ::after {
     content: "";
@@ -20,17 +15,13 @@ const StyledOutboundLink = styled(ReactGA.OutboundLink)`
     height: 0.75rem;
     margin-left: 0.5rem;
   }
-` as React.FC<ReactGA.OutboundLinkProps & React.HTMLProps<HTMLAnchorElement>>
+` as Link
 
 function OutboundLink({
   label,
   children,
   ...props
-}: PropsWithChildren<
-  ReactGA.OutboundLinkProps &
-    React.HTMLProps<HTMLAnchorElement> &
-    OutboundLinkProps
->) {
+}: PropsWithChildren<LinkProps>) {
   return (
     <StyledOutboundLink target="_blank" aria-label={label} {...props}>
       {children}

diff --git a/frontend/lib/gtag.ts b/frontend/lib/gtag.ts
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -65,7 +65,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
-    "react-ga": "^3.3.1",
     "react-hook-form": "^7.43.2",
     "sharp": "^0.31.3",
     "styled-jsx": "^5.1.2",

diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
@@ -15,7 +15,6 @@ import { BreadcrumbProvider } from "/contexts/BreadcrumbContext"
 import { LoginStateProvider } from "/contexts/LoginStateContext"
 import { useScrollToHash } from "/hooks/useScrollToHash"
 import { isAdmin, isSignedIn } from "/lib/authentication"
-import { initGA, logPageView } from "/lib/gtag"
 import withApolloClient from "/lib/with-apollo-client"
 import { createEmotionSsr } from "/src/createEmotionSsr"
 import newTheme from "/src/newTheme"
@@ -37,20 +36,11 @@ export function MyApp({ Component, pageProps }: AppProps) {
   const isNew = router.pathname?.includes("_new")
 
   useEffect(() => {
-    initGA()
-    logPageView()
-
-    router.events.on("routeChangeComplete", logPageView)
-
     const jssStyles = document?.querySelector("#jss-server-side")
     if (jssStyles?.parentElement) {
       jssStyles.parentElement.removeChild(jssStyles)
     }
-
-    return () => {
-      router.events.off("routeChangeComplete", logPageView)
-    }
-  }, [router])
+  }, [])
 
   useScrollToHash()
 

diff --git a/frontend/public/md_pages/lut_module.mdx b/frontend/public/md_pages/lut_module.mdx
@@ -34,7 +34,7 @@ LUT-yliopisto tarjoaa ohjelmistotuotannon opintoja joustavina etäopintoina. Opi
   * Ilmoittautuminen: 29.11. klo 8.00 &mdash; 12.12.2022
 </CustomModuleCourse>
 
-<OutboundLink eventLabel="custom: lut-ohjelmistotuotanto" to="https://www.lut.fi/fi/opiskelu/avoin-yliopisto/avoimen-yliopiston-opintotarjonta/ohjelmistotuotannon-opintokokonaisuus">Lue lisää kursseista ja ilmoittautumisesta LUTin sivuilta.</OutboundLink>
+<OutboundLink href="https://www.lut.fi/fi/opiskelu/avoin-yliopisto/avoimen-yliopiston-opintotarjonta/ohjelmistotuotannon-opintokokonaisuus">Lue lisää kursseista ja ilmoittautumisesta LUTin sivuilta.</OutboundLink>
 
 </CustomModuleContent>
 export default ({ children }) => (

diff --git a/frontend/src/theme/components.tsx b/frontend/src/theme/components.tsx
@@ -10,6 +10,7 @@ import { openSansCondensedDeclaration } from "/src/fonts"
 const LinkBehavior = React.forwardRef<HTMLAnchorElement, NextLinkProps>(
   (props, ref) => {
     const { href, ...other } = props
+
     return <Link ref={ref} href={href} {...other} />
   },
 )