Feat add tracert (#141)

* feat: add ant tracert * feat: add all pages tracert * feat: opt tracert
TuGraph-family · Aug 22, 2024 · 6e5dab7 · 6e5dab7
1 parent a8c8726
commit 6e5dab7
Show file tree

Hide file tree

Showing 14 changed files with 109 additions and 32 deletions.
diff --git a/.umirc.ts b/.umirc.ts
@@ -55,7 +55,7 @@ export default defineConfig({
     (function() {
       var hm = document.createElement("script");
       hm.src = "https://hm.baidu.com/hm.js?e4bea71987c7daae77ee69586aad5bec";
-      var s = document.getElementsByTagName("script")[0]; 
+      var s = document.getElementsByTagName("script")[0];
       s.parentNode.insertBefore(hm, s);
     })();`,
     {
@@ -70,9 +70,17 @@ export default defineConfig({
     (function() {
       var hm = document.createElement("script");
       hm.src = "https://hm.baidu.com/hm.js?9452f06d5325a3907efec5619d9f2392";
-      var s = document.getElementsByTagName("script")[0]; 
+      var s = document.getElementsByTagName("script")[0];
       s.parentNode.insertBefore(hm, s);
     })();`,
+    {
+      src: 'https://ur.alipay.com/tracert_a4609.js',
+      async: true,
+    },
+    ` window.TracertCmdCache=window.TracertCmdCache||[]
+    ;var t=window.Tracert||{_isRenderInit:!0,call:function(){window.TracertCmdCache.push(arguments)}},f=["call","start","config","logPv","info","err","click","expo","pageName","pageState","time","timeEnd","parse","checkExpo","stringify","report","set","before"];for(let i=0;i<f.length;i++){(function(fn){t[fn]=function(){var a=[],l=arguments.length;for (var j=0;j<l;j++) {a.push(arguments[j])}a.unshift(fn);window.TracertCmdCache.push(a)}})(f[i])}window.Tracert=t;
+    window._to={autoLogPv:false};
+    window.Tracert.start({});`,
   ],
   theme: {
     'primary-color': 'rgba(22,80,255,1)',

diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "react-dom": "17.x",
     "react-helmet": "^6.1.0",
     "react-html-renderer": "^0.3.3",
+    "react-router-dom": "^6.26.1",
     "react-use": "^17.4.0",
     "umi": "^3.5.28"
   },

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -6,6 +6,7 @@ import cx from 'classnames';
 import { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
 import { history, useIntl, useLocation } from 'umi';
+import { Link } from 'react-router-dom';
 
 import { DEFAULT_LOCAL, searchParamsEn, searchParamsZh } from '@/constant';
 import { getSearch, goLinkAt, historyPushLinkAt } from '@/util';
@@ -491,27 +492,21 @@ export const Header = ({ isStick }: { isStick?: boolean }) => {
 
   const menuItems: MenuItem[] = [
     {
-      label: (
-        <a href={goLinkAt('/')} rel="noopener noreferrer">
-          {intl.formatMessage({ id: 'header.home' })}
-        </a>
-      ),
+      label: <Link to="/">{intl.formatMessage({ id: 'header.home' })}</Link>,
       key: 'home',
     },
     { ...(isWide ? pcProductMenu : mobileProductMenu) },
     {
       label: (
-        <a href={goLinkAt('/case')} rel="noopener noreferrer">
-          {intl.formatMessage({ id: 'header.case' })}
-        </a>
+        <Link to="/case">{intl.formatMessage({ id: 'header.case' })}</Link>
       ),
       key: 'case',
     },
     {
       label: (
-        <a href={goLinkAt('/ecosystem')} rel="noopener noreferrer">
+        <Link to="/ecosystem">
           {intl.formatMessage({ id: 'header.ecosystem' })}
-        </a>
+        </Link>
       ),
       key: 'ecosystem',
     },
@@ -520,9 +515,9 @@ export const Header = ({ isStick }: { isStick?: boolean }) => {
     { ...(isWide ? pcCommunityMenu : mobileCommunityMenu) },
     {
       label: (
-        <a href={goLinkAt('/download')} rel="noopener noreferrer">
+        <Link to="/download">
           {intl.formatMessage({ id: 'header.download' })}
-        </a>
+        </Link>
       ),
       key: 'download',
     },

diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx
@@ -5,7 +5,7 @@ import { DEFAULT_LOCAL } from '@/constant';
 import { getZHBlogs } from '@/data/blog';
 import { getENBlogs } from '@/data/blog_en';
 import { BlogItem } from '@/interface';
-import { getSearch } from '@/util';
+import { getSearch, tracertBPos } from '@/util';
 import { Button, Layout, Pagination, Space, Spin, Tabs } from 'antd';
 import cx from 'classnames';
 import React, { useEffect, useState } from 'react';
@@ -57,6 +57,11 @@ export default function BlogPage() {
     setListData(blogs.slice(0, PAGE_SIZE));
   }, [blogs]);
 
+  /** Blog埋点 */
+  useEffect(() => {
+    tracertBPos('b106234');
+  }, []);
+
   const onPaginationChange = (page: number) => {
     const start = 0 + (page - 1) * PAGE_SIZE;
     const end = start + PAGE_SIZE;
@@ -81,8 +86,10 @@ export default function BlogPage() {
 
   const jumpToArticle = (article: BlogItem) => {
     if (article.isLink) {
+      tracertBPos('b106257', { title: article.title });
       window.open(article.content, '_blank');
     } else {
+      tracertBPos('b106258', { title: article.title });
       window.open(`/blog?id=${article.id}&lang=${lang}`);
     }
   };
@@ -111,6 +118,7 @@ export default function BlogPage() {
                   onClick={() => {
                     jumpToArticle(item);
                   }}
+                  data-aspm={item.isLink ? 'c375857' : 'c375858'}
                 >
                   <Space size={isWide ? 24 : 22}>
                     <img src={item.img} alt={item.title} />

diff --git a/src/pages/case.tsx b/src/pages/case.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import { Carousel, Col, Row, Space } from 'antd';
 import { useIntl, isBrowser, useLocation } from 'umi';
@@ -12,7 +12,7 @@ import { getExamples } from '@/data/examples';
 import { getDemos } from '@/data/demos';
 import { SubTitle } from '@/components/SubTitle';
 import { DEFAULT_LOCAL } from '@/constant';
-import { getSearch } from '@/util';
+import { getSearch, tracertBPos } from '@/util';
 
 export default function DemoPage() {
   const intl = useIntl();
@@ -23,6 +23,12 @@ export default function DemoPage() {
   const SWIPE_PADDING = isBrowser()
     ? (40 * document.body.clientWidth) / 750
     : 40;
+
+  /** 案例埋点 */
+  useEffect(() => {
+    tracertBPos('b106231');
+  }, []);
+
   const pcDemo = (
     <div className="maxContainer">
       <Row wrap={true} className={styles.demoWrapper}>

diff --git a/src/pages/download.tsx b/src/pages/download.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Button, Col, message, Row, Select } from 'antd';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { useIntl } from 'umi';
@@ -8,13 +8,19 @@ import { ApplyForm } from '@/components/ApplyForm';
 import { LayoutTemplate } from '@/components/LayoutTemplate';
 import { assetsList, docsList, iconMap } from '@/data/download';
 import { DownloadItem } from '@/interface';
+import { tracertBPos } from '@/util';
 
 export default function DownloadPage() {
   const intl = useIntl();
   const isWide = useMedia('(min-width: 767.99px)', true);
 
   const [showApplyForm, setShowApplyForm] = useState(false);
 
+  /** 下载埋点 */
+  useEffect(() => {
+    tracertBPos('b106235');
+  }, []);
+
   const DownloadGroupItem = ({ name, action, version }: DownloadItem) => {
     const [key, setKey] = useState<any>(version?.list[0]?.value);
     const [isHover, setIsHover] = useState(false);

diff --git a/src/pages/ecosystem.tsx b/src/pages/ecosystem.tsx
@@ -2,15 +2,15 @@ import { Anchor, Col, Row, Space } from 'antd';
 import cx from 'classnames';
 import { useMedia } from 'react-use';
 import { useIntl, useLocation } from 'umi';
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import stylesZh from './ecosystem.less';
 import stylesEn from './ecosystem_en.less';
 import { getPartnerReason } from '@/data/get_partner_reason';
 import { getPartner } from '@/data/get_partner';
 import { LayoutTemplate } from '@/components/LayoutTemplate';
 import { DEFAULT_LOCAL, logoList } from '@/constant';
-import { getSearch } from '@/util';
+import { getSearch, tracertBPos } from '@/util';
 
 const { Link } = Anchor;
 
@@ -20,6 +20,12 @@ export default function EcosystemPage() {
   const lang = getSearch(search)?.lang || DEFAULT_LOCAL;
   const styles = lang === 'en' || lang === 'en-US' ? stylesEn : stylesZh;
   const isWide = useMedia('(min-width: 767.99px)', true);
+
+  /** 生态埋点 */
+  useEffect(() => {
+    tracertBPos('b106232');
+  }, []);
+
   const content = (
     <div className={styles.containerWrapper}>
       <div className={styles.cardWrapper} style={{ marginBottom: 40 }}>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -21,7 +21,7 @@ import {
   Tooltip,
 } from 'antd';
 import cx from 'classnames';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useMedia } from 'react-use';
 import { isBrowser, useIntl, useLocation } from 'umi';
@@ -34,7 +34,7 @@ import { SubTitle } from '@/components/SubTitle';
 import { getCases } from '@/data/cases';
 import { getTugraphFun } from '@/data/get_tugraph_functions';
 import { getReasons } from '@/data/reasons';
-import { getSearch } from '@/util';
+import { getSearch, tracertBPos } from '@/util';
 import stylesZh from './index.less';
 import stylesEn from './index_en.less';
 
@@ -53,6 +53,12 @@ export default function IndexPage() {
   const SWIPE_PADDING = isBrowser()
     ? (48 * document.body.clientWidth) / 750
     : 24;
+
+  /** 首页埋点 */
+  useEffect(() => {
+    tracertBPos('b106229');
+  }, []);
+
   const bannerButton = (
     <div className={styles.bannerButtons}>
       <Space>

diff --git a/src/pages/overview.tsx b/src/pages/overview.tsx
@@ -1,5 +1,5 @@
 import { Button, Col, Row, Space } from 'antd';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import { useMedia } from 'react-use';
 import { useIntl, useLocation } from 'umi';
@@ -11,7 +11,7 @@ import { getOverViewFeats } from '@/data/feats';
 import { SubTitle } from '@/components/SubTitle';
 import { LayoutTemplate } from '@/components/LayoutTemplate';
 import { DEFAULT_LOCAL } from '@/constant';
-import { getSearch } from '@/util';
+import { getSearch, tracertBPos } from '@/util';
 
 export default function OverviewPage() {
   const intl = useIntl();
@@ -20,6 +20,12 @@ export default function OverviewPage() {
   const styles = lang === 'en' || lang === 'en-US' ? stylesEn : stylesZh;
   const isWide = useMedia('(min-width: 767.99px)', true);
   const [showApplyForm, setShowApplyForm] = useState(false);
+
+  /** TuGraph 企业版概览 */
+  useEffect(() => {
+    tracertBPos('b106248');
+  }, []);
+
   const content = (
     <div className={styles.containerWrapper}>
       <Helmet>

diff --git a/src/pages/platform.tsx b/src/pages/platform.tsx
@@ -1,5 +1,5 @@
 import { Button, Col, Row } from 'antd';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useMedia } from 'react-use';
 import { useIntl, useLocation } from 'umi';
 
@@ -9,7 +9,7 @@ import { ApplyForm } from '@/components/ApplyForm';
 import { proAdvantDataDb, proAdvantDataPlat } from '@/data/proAdvantData';
 import { SubTitle } from '@/components/SubTitle';
 import { LayoutTemplate } from '@/components/LayoutTemplate';
-import { getSearch } from '@/util';
+import { getSearch, tracertBPos } from '@/util';
 import { DEFAULT_LOCAL } from '@/constant';
 
 export default function PlatFormPage() {
@@ -25,6 +25,12 @@ export default function PlatFormPage() {
     : proAdvantDataDb(intl);
   const isWide = useMedia('(min-width: 767.99px)', true);
   const [showApplyForm, setShowApplyForm] = useState(false);
+
+  /** TuGraph 一站式图平台、大规模分布式图数据库 */
+  useEffect(() => {
+    isPlatform ? tracertBPos('b106249') : tracertBPos('b106256');
+  }, []);
+
   const content = (
     <div className={styles.containerWrapper}>
       <SubTitle

diff --git a/src/pages/product.tsx b/src/pages/product.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Carousel, Col, Row, Space, Tag } from 'antd';
 import { Helmet } from 'react-helmet';
 import { useMedia } from 'react-use';
@@ -9,7 +9,7 @@ import JoLPlayer from '@/components/Player';
 import { SubTitle } from '@/components/SubTitle';
 import { LayoutTemplate } from '@/components/LayoutTemplate';
 import { getFeats } from '@/data/feats';
-import { getSearch } from '@/util';
+import { getSearch, tracertBPos } from '@/util';
 import { DEFAULT_LOCAL } from '@/constant';
 
 export default function ProductPage() {
@@ -24,6 +24,12 @@ export default function ProductPage() {
   const SWIPE_PADDING = isBrowser()
     ? (40 * document.body.clientWidth) / 750
     : 40;
+
+  /** TuGraph DB Lite 单机版图数据库 */
+  useEffect(() => {
+    tracertBPos('b106230');
+  }, []);
+
   const pcVideoList = (
     <div className={styles.videoWrapper}>
       {isBrowser() && (

diff --git a/src/pages/product_analytics.tsx b/src/pages/product_analytics.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { useIntl, useLocation } from 'umi';
 import { Helmet } from 'react-helmet';
@@ -10,7 +10,7 @@ import stylesEn from './product_analytics_en.less';
 import { LayoutTemplate } from '@/components/LayoutTemplate';
 import { SubTitle } from '@/components/SubTitle';
 import { getFeats } from '@/data/feats2';
-import { getSearch } from '@/util';
+import { getSearch, tracertBPos } from '@/util';
 import { DEFAULT_LOCAL } from '@/constant';
 
 const Root = () => {
@@ -20,6 +20,11 @@ const Root = () => {
   const isWide = useMedia('(min-width: 767.99px)', true);
   const styles = lang === 'en' || lang === 'en-US' ? stylesEn : stylesZh;
 
+  /** TuGraph DB Lite 单机版图数据库 */
+  useEffect(() => {
+    tracertBPos('b106246');
+  }, []);
+
   const content = (
     <div className={styles.containerWrapper}>
       <Helmet>

diff --git a/src/pages/product_learn.tsx b/src/pages/product_learn.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { useIntl, useLocation } from 'umi';
 import { Helmet } from 'react-helmet';
@@ -10,7 +10,7 @@ import stylesEn from './product_learn_en.less';
 import { LayoutTemplate } from '@/components/LayoutTemplate';
 import { SubTitle } from '@/components/SubTitle';
 import { getFeats } from '@/data/feats1';
-import { getSearch } from '@/util';
+import { getSearch, tracertBPos } from '@/util';
 import { DEFAULT_LOCAL } from '@/constant';
 
 const Root = () => {
@@ -19,6 +19,12 @@ const Root = () => {
   const lang = getSearch(search)?.lang || DEFAULT_LOCAL;
   const isWide = useMedia('(min-width: 767.99px)', true);
   const styles = lang === 'en' || lang === 'en-US' ? stylesEn : stylesZh;
+
+  /** TuGraph Learn 图学习引擎 */
+  useEffect(() => {
+    tracertBPos('b106247');
+  }, []);
+
   const content = (
     <div className={styles.containerWrapper}>
       <Helmet>