refine(gatsby, components): add universal GTM tracking (#457)

* build(gatsby): remove legacy GA tracking * build(gatsby): add a universal GTM * feat(utils): add gtm tracking utils * refine(layout): add gtm tracking to header * refine(layout): add gtm tracking to footer * refine(nav): add gtm tracking to right nav
pingcap · Dec 19, 2023 · 7c2be0f · 7c2be0f
1 parent a522e96
commit 7c2be0f
Show file tree

Hide file tree

Showing 8 changed files with 185 additions and 40 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -25,10 +25,10 @@ module.exports = {
       },
     },
     {
-      resolve: `gatsby-plugin-google-analytics`,
+      resolve: "gatsby-plugin-google-tagmanager",
       options: {
-        trackingId: "UA-99991864-7",
-        head: true,
+        id: "GTM-TPX49SBK",
+        includeInDevelopment: false,
       },
     },
     `gatsby-plugin-root-import`,

diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
@@ -16,15 +16,15 @@ import {
   generateFooterItems,
   generatePrivacyPolicy,
 } from "utils";
-
+import { GTMEvent, gtmTrack } from "utils/gtm";
 
 export default function Footer() {
   return (
     <>
       <Box sx={{ bgcolor: "#20222B", padding: "3.5rem 0" }} component="footer">
         <Container maxWidth="lg">
           <FooterBlock />
-          <Stack direction="row" >
+          <Stack direction="row">
             <Typography
               variant="body2"
               component="div"
@@ -130,6 +130,11 @@ const IconGroup = () => {
               href={icon.href}
               target="_blank"
               color="inherit"
+              onClick={() =>
+                gtmTrack(GTMEvent.ClickFooter, {
+                  item_name: icon.name,
+                })
+              }
             >
               <icon.icon />
             </IconButton>
@@ -145,26 +150,26 @@ const PrivacyPolicy = () => {
   const url = generatePrivacyPolicy(language);
   return (
     <>
-        <Link
-          href={url}
-          variant="body2"
-          color="rgba(255, 255, 255, 0.5)"
-          sx={{
-            marginLeft: ".2rem",
-            paddingTop: "3rem",
-            textAlign: {
-              xs: "center",
-              md: "left",
-            },
-            textDecoration: "none",
-          }}
-          target="_blank"
-        >
-          Privacy Policy.
-        </Link>
+      <Link
+        href={url}
+        variant="body2"
+        color="rgba(255, 255, 255, 0.5)"
+        sx={{
+          marginLeft: ".2rem",
+          paddingTop: "3rem",
+          textAlign: {
+            xs: "center",
+            md: "left",
+          },
+          textDecoration: "none",
+        }}
+        target="_blank"
+      >
+        Privacy Policy.
+      </Link>
     </>
-  )
-}
+  );
+};
 
 const FooterItems = () => {
   const theme = useTheme();
@@ -183,6 +188,11 @@ const FooterItems = () => {
               to={item.url}
               isI18n
               sx={{ width: "fit-content" }}
+              onClick={() =>
+                gtmTrack(GTMEvent.ClickFooter, {
+                  item_name: item.name,
+                })
+              }
             >
               <Typography color={theme.palette.website.m4} component="div">
                 {item.name}

diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
@@ -14,6 +14,7 @@ import HeaderAction from "components/Layout/HeaderAction";
 
 import { generatePingcapUrl } from "utils";
 import { Locale, BuildType } from "static/Type";
+import { GTMEvent, gtmTrack } from "utils/gtm";
 
 export default function Header(props: {
   menu?: React.ReactNode;
@@ -49,7 +50,14 @@ export default function Header(props: {
             },
           }}
         >
-          <LinkComponent to={generatePingcapUrl(language)}>
+          <LinkComponent
+            to={generatePingcapUrl(language)}
+            onClick={() =>
+              gtmTrack(GTMEvent.ClickHeadNav, {
+                item_name: "logo",
+              })
+            }
+          >
             <PingcapLogoIcon
               sx={{ width: "6.75rem", display: { xs: "none", sm: "block" } }}
             />

diff --git a/src/components/Layout/HeaderAction.tsx b/src/components/Layout/HeaderAction.tsx
@@ -17,6 +17,7 @@ import CloudIcon from "@mui/icons-material/Cloud";
 import Search from "components/Search";
 
 import { Locale, BuildType } from "static/Type";
+import { GTMEvent, gtmTrack } from "utils/gtm";
 
 export default function HeaderAction(props: {
   supportedLocales: Locale[];
@@ -192,6 +193,11 @@ const TiDBCloudBtnGroup = () => {
           sx={{
             color: "website.k1",
           }}
+          onClick={() =>
+            gtmTrack(GTMEvent.SigninCloud, {
+              position: "header",
+            })
+          }
         >
           Sign In
         </Button>
@@ -209,6 +215,13 @@ const TiDBCloudBtnGroup = () => {
               boxShadow: "0px 1px 4px rgba(0, 0, 0, 0.16)",
             },
           }}
+          onClick={() =>
+            gtmTrack(GTMEvent.SignupCloud, {
+              product_type: 'general cloud',
+              button_name: "Try Free",
+              position: "header",
+            })
+          }
         >
           Try Free
         </Button>
@@ -248,6 +261,11 @@ const TiDBCloudBtnGroup = () => {
             sx={{
               textDecoration: "none",
             }}
+            onClick={() =>
+              gtmTrack(GTMEvent.SigninCloud, {
+                position: "header",
+              })
+            }
           >
             Sign In
           </Typography>
@@ -262,6 +280,13 @@ const TiDBCloudBtnGroup = () => {
             sx={{
               textDecoration: "none",
             }}
+            onClick={() =>
+              gtmTrack(GTMEvent.SignupCloud, {
+                product_type: 'general cloud',
+                button_name: "Try Free",
+                position: "header",
+              })
+            }
           >
             Try Free
           </Typography>