Skip to content

Commit

Permalink
tweak(gtm): optimize events (#558)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
shhdgit authored Dec 11, 2024
1 parent dd3be74 commit 8f53aa8
Show file tree
Hide file tree
Showing 7 changed files with 76 additions and 40 deletions.
2 changes: 0 additions & 2 deletions gatsby-node.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
require("ts-node").register({ transpileOnly: true });
require("dotenv").config();

const path = require("path");

const {
createDocs,
createDocHome,
Expand Down
27 changes: 0 additions & 27 deletions src/components/Layout/HeaderAction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -96,9 +95,6 @@ export default function HeaderAction(props: {
}}
onClick={() => {
window.tidbai.open = true;
gtmTrack(GTMEvent.AskTiDBAI, {
position: "header",
});
}}
>
Ask AI
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -302,12 +286,6 @@ const TiDBCloudBtnGroup = () => {
}}
>
<MenuItem
onClick={() => {
handleClose();
gtmTrack(GTMEvent.SigninCloud, {
position: "header",
});
}}
component={Link}
to={`https://tidbcloud.com/signin`}
target="_blank"
Expand All @@ -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`}
Expand Down
5 changes: 0 additions & 5 deletions src/components/Navigation/RightNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" && (
Expand Down
8 changes: 8 additions & 0 deletions src/components/Search/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down Expand Up @@ -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}`,
{
Expand All @@ -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"
Expand All @@ -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"
Expand Down
59 changes: 59 additions & 0 deletions src/shared/useReportReadingRate.ts
Original file line number Diff line number Diff line change
@@ -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);
};
}, []);
};
8 changes: 3 additions & 5 deletions src/shared/utils/gtm.ts
Original file line number Diff line number Diff line change
@@ -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(
Expand Down
7 changes: 6 additions & 1 deletion src/templates/DocTemplate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 & {
Expand All @@ -46,6 +47,7 @@ interface DocTemplateProps {
frontmatter: FrontMatter;
body: string;
tableOfContents: TableOfContent;
timeToRead: number;
};
navigation?: {
navigation: RepoNav;
Expand All @@ -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(() => {
Expand Down Expand Up @@ -301,6 +305,7 @@ export const query = graphql`
}
body
tableOfContents
timeToRead
}
navigation: mdx(slug: { eq: $navUrl }) {
Expand Down

0 comments on commit 8f53aa8

Please sign in to comment.