tweak(gtm): optimize events (#558)

* feat(gtm): add search type tracing

* tweak(gtm): remove ask_tidb_ai event

* tweak(gtm): remove docs_download

* tweak(gtm): remove signin_click/go_to_cloud_signup

* chore: update GTMEvent

* tweak: reading rate

* chore: remove console

* chore: update comment

* fix: min of time ratio

Author: shhdgit

gatsby-node.js

@@ -1,8 +1,6 @@
 require("ts-node").register({ transpileOnly: true });
 require("dotenv").config();
 
-const path = require("path");
-
 const {
   createDocs,
   createDocHome,

src/components/Layout/HeaderAction.tsx

@@ -18,7 +18,6 @@ import CloudIcon from "@mui/icons-material/Cloud";
 import Search from "components/Search";
 
 import { Locale, BuildType } from "shared/interface";
-import { GTMEvent, gtmTrack } from "shared/utils/gtm";
 import { ActionButton } from "components/Card/FeedbackSection/components";
 import { Link } from "gatsby";
 
@@ -96,9 +95,6 @@ export default function HeaderAction(props: {
                 }}
                 onClick={() => {
                   window.tidbai.open = true;
-                  gtmTrack(GTMEvent.AskTiDBAI, {
-                    position: "header",
-                  });
                 }}
               >
                 Ask AI
@@ -251,11 +247,6 @@ const TiDBCloudBtnGroup = () => {
           // https://developer.chrome.com/blog/referrer-policy-new-chrome-default/
           referrerPolicy="no-referrer-when-downgrade"
           target="_blank"
-          onClick={() =>
-            gtmTrack(GTMEvent.SigninCloud, {
-              position: "header",
-            })
-          }
         >
           Sign In
         </Button>
@@ -265,13 +256,6 @@ const TiDBCloudBtnGroup = () => {
           href="https://tidbcloud.com/free-trial"
           // https://developer.chrome.com/blog/referrer-policy-new-chrome-default/
           referrerPolicy="no-referrer-when-downgrade"
-          onClick={() =>
-            gtmTrack(GTMEvent.SignupCloud, {
-              product_type: "general cloud",
-              button_name: "Start for free",
-              position: "header",
-            })
-          }
         >
           Start for Free
         </Button>
@@ -302,12 +286,6 @@ const TiDBCloudBtnGroup = () => {
         }}
       >
         <MenuItem
-          onClick={() => {
-            handleClose();
-            gtmTrack(GTMEvent.SigninCloud, {
-              position: "header",
-            });
-          }}
           component={Link}
           to={`https://tidbcloud.com/signin`}
           target="_blank"
@@ -321,11 +299,6 @@ const TiDBCloudBtnGroup = () => {
         <MenuItem
           onClick={() => {
             handleClose();
-            gtmTrack(GTMEvent.SignupCloud, {
-              product_type: "general cloud",
-              button_name: "Try Free",
-              position: "header",
-            });
           }}
           component={Link}
           to={`https://tidbcloud.com/free-trial`}

src/components/Navigation/RightNav.tsx

@@ -86,11 +86,6 @@ export default function RightNav(props: RightNavProps) {
                 label={t("doc.download-pdf")}
                 rel="noreferrer"
                 download
-                onClick={() => {
-                  gtmTrack(GTMEvent.DownloadPDF, {
-                    position: "right_nav",
-                  });
-                }}
               />
             )}
             {buildType !== "archive" && (

src/components/Search/index.tsx

@@ -10,6 +10,7 @@ import { styled } from "@mui/material/styles";
 import SearchIcon from "@mui/icons-material/Search";
 import { Card, MenuItem, Popper, PopperProps } from "@mui/material";
 import { Locale } from "shared/interface";
+import { GTMEvent, gtmTrack } from "shared/utils/gtm";
 
 const StyledTextField = styled((props: TextFieldProps) => (
   <TextField {...props} />
@@ -67,6 +68,7 @@ export default function Search(props: {
     inputEl.current?.blur();
 
     if (searchType === SearchType.Onsite) {
+      gtmTrack(GTMEvent.UseOnsiteSearch);
       navigate(
         `/search?type=${docInfo.type}&version=${docInfo.version}&q=${q}`,
         {
@@ -85,6 +87,9 @@ export default function Search(props: {
     }`;
 
     if (searchType === SearchType.Google) {
+      gtmTrack(GTMEvent.UseExternalSearch, {
+        search_type: searchType,
+      });
       window.open(
         `https://www.google.com/search?q=site%3Adocs.pingcap.com/${segmentPath}+${q}`,
         "_blank"
@@ -93,6 +98,9 @@ export default function Search(props: {
     }
 
     if (searchType === SearchType.Bing) {
+      gtmTrack(GTMEvent.UseExternalSearch, {
+        search_type: searchType,
+      });
       window.open(
         `https://cn.bing.com/search?q=site%3Adocs.pingcap.com/${segmentPath}+${q}`,
         "_blank"

src/shared/useReportReadingRate.ts

@@ -0,0 +1,59 @@
+import throttle from "lodash/throttle";
+import React from "react";
+import { GTMEvent, gtmTrack } from "./utils/gtm";
+
+// timeToRead: minutes of reading
+export const useReportReadingRate = (timeToRead: number) => {
+  const lastPercentage = React.useRef(0);
+
+  const handleScroll = throttle(() => {
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const clientHeight = window.innerHeight;
+    const scrollHeight = document.documentElement.scrollHeight;
+
+    const scrollPercentage = Math.min(
+      (scrollTop / (scrollHeight - clientHeight)) * 100,
+      100
+    );
+
+    if (
+      Math.floor(scrollPercentage / 10) >
+      Math.floor(lastPercentage.current / 10)
+    ) {
+      lastPercentage.current = Math.floor(scrollPercentage / 10) * 10;
+    }
+  }, 1000);
+
+  const startTime = React.useRef(Date.now());
+  const timeToReadSecond = timeToRead * 60;
+
+  const reportReadingRate = () => {
+    const endTime = Date.now();
+    const timeSpent = Math.floor((endTime - startTime.current) / 1000);
+
+    if (document.visibilityState === "hidden") {
+      if (timeSpent < 6) {
+        return;
+      }
+      gtmTrack(GTMEvent.ReadingRate, {
+        readingRate:
+          Math.min(Math.floor((timeSpent / timeToReadSecond) * 100) / 100, 1) *
+          lastPercentage.current,
+        timeToRead: timeToReadSecond,
+        timeSpent,
+        scrollPercentage: lastPercentage.current,
+      });
+    } else {
+      startTime.current = Date.now();
+    }
+  };
+
+  React.useEffect(() => {
+    window.addEventListener("visibilitychange", reportReadingRate);
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("visibilitychange", reportReadingRate);
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+};

src/shared/utils/gtm.ts

@@ -1,11 +1,9 @@
 export const GTMEvent = {
   ClickHeadNav: "docs_navi_click",
   ClickFooter: "docs_footer_click",
-  SignupCloud: "go_to_cloud_signup",
-  SigninCloud: "signin_click",
-  GotoPlayground: "go_to_playground",
-  DownloadPDF: "docs_download",
-  AskTiDBAI: "ask_tidb_ai",
+  UseOnsiteSearch: "use_onsite_search",
+  UseExternalSearch: "use_external_search",
+  ReadingRate: "reading_rate",
 } as const;
 
 export function gtmTrack(

src/templates/DocTemplate.tsx

@@ -25,6 +25,7 @@ import GitCommitInfoCard from "components/Card/GitCommitInfoCard";
 import { FeedbackSection } from "components/Card/FeedbackSection";
 import { FeedbackSurveyCampaign } from "components/Campaign/FeedbackSurvey";
 import { DOC_HOME_URL } from "shared/resources";
+import { useReportReadingRate } from "shared/useReportReadingRate";
 
 interface DocTemplateProps {
   pageContext: PageContext & {
@@ -46,6 +47,7 @@ interface DocTemplateProps {
       frontmatter: FrontMatter;
       body: string;
       tableOfContents: TableOfContent;
+      timeToRead: number;
     };
     navigation?: {
       navigation: RepoNav;
@@ -66,10 +68,12 @@ export default function DocTemplate({
   data,
 }: DocTemplateProps) {
   const {
-    mdx: { frontmatter, tableOfContents, body },
+    mdx: { frontmatter, tableOfContents, body, timeToRead },
     navigation: originNav,
   } = data;
 
+  useReportReadingRate(timeToRead);
+
   const navigation = originNav ? originNav.navigation : [];
 
   const tocData: TableOfContent[] | undefined = React.useMemo(() => {
@@ -301,6 +305,7 @@ export const query = graphql`
       }
       body
       tableOfContents
+      timeToRead
     }
 
     navigation: mdx(slug: { eq: $navUrl }) {