feat: improve demo scripts

surmon-china · Jul 21, 2023 · 8325f4c · 8325f4c
1 parent fd52ca1
commit 8325f4c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -12,22 +12,7 @@
       name="description"
       content="Admin client for Surmon.me powered by Veact and AntDesign"
     />
-    <!-- Google AdSense -->
-    <script
-      async
-      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4710915636313788"
-      crossorigin="anonymous"
-    ></script>
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-84887611-4"></script>
-    <script>
-      window.dataLayer = window.dataLayer || []
-      function gtag() {
-        dataLayer.push(arguments)
-      }
-      gtag('js', new Date())
-      gtag('config', 'UA-84887611-4')
-    </script>
+    <!-- DEMO_SLOT -->
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/AppLayout/Content.tsx b/src/components/AppLayout/Content.tsx
@@ -5,6 +5,7 @@ import * as Icon from '@ant-design/icons'
 import { scrollTo } from '@/services/scroller'
 import { routeMap } from '@/routes'
 import { PageHeaderAD } from './PageAD'
+import { ENABLED_AD } from '@/config'
 
 import styles from './style.module.less'
 
@@ -28,7 +29,7 @@ export const AppContent: React.FC<React.PropsWithChildren> = (props) => {
           ))}
         </Breadcrumb>
       </div>
-      <PageHeaderAD />
+      {ENABLED_AD && <PageHeaderAD />}
       <div className={styles.pageContent}>{props?.children}</div>
       <BackTop className={styles.backTop} onClick={() => scrollTo(document.body)}>
         <div className={styles.tigger}>

diff --git a/src/components/AppLayout/PageAD.tsx b/src/components/AppLayout/PageAD.tsx
@@ -2,23 +2,20 @@ import React from 'react'
 import { onMounted, useRef } from 'veact'
 import { Button } from 'antd'
 import * as Icon from '@ant-design/icons'
-import { ENABLED_AD } from '@/config'
 
 import styles from './style.module.less'
 
 export const PageHeaderAD: React.FC = () => {
-  const isEnabledAD = useRef(Boolean(ENABLED_AD))
+  const isVisibleAD = useRef(true)
   const closeAD = () => {
-    isEnabledAD.value = false
+    isVisibleAD.value = false
   }
 
   onMounted(() => {
-    if (isEnabledAD.value) {
-      ;((window as any).adsbygoogle = (window as any).adsbygoogle || []).push({})
-    }
+    ;((window as any).adsbygoogle = (window as any).adsbygoogle || []).push({})
   })
 
-  if (isEnabledAD.value) {
+  if (isVisibleAD.value) {
     return (
       <div className={styles.appPageHeaderMammon}>
         <div className={styles.mammonBox}>

diff --git a/vite.config.demo.ts b/vite.config.demo.ts
@@ -1,6 +1,28 @@
 import { UserConfig } from 'vite'
 
 const DEMO_BASE_PATH = '/veact-admin/'
+const GOOGLE_ANALYTICS_MEASUREMENT_ID = 'G-WNSSKPKKMG'
+const GOOGLE_ADSENSE_CLIENT_ID = 'ca-pub-4710915636313788'
+
+const DEMO_HACK_SCRIPT = `<script src="${DEMO_BASE_PATH}__demo__/index.js"></script>`
+
+const GOOGLE_ANALYTICS_TAG_SCRIPT = `
+<script async src="https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_MEASUREMENT_ID}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', '${GOOGLE_ANALYTICS_MEASUREMENT_ID}');
+</script>
+`
+
+const GOOGLE_ADSENSE_SCRIPT = `
+<script
+  async
+  crossorigin="anonymous"
+  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${GOOGLE_ADSENSE_CLIENT_ID}"
+></script>
+`
 
 export const demoConfiger = (defaultConfig: UserConfig): UserConfig => {
   return {
@@ -13,9 +35,8 @@ export const demoConfiger = (defaultConfig: UserConfig): UserConfig => {
         name: 'demo-html-transform',
         transformIndexHtml(html) {
           return html.replace(
-            `</head>`,
-            // append mock entry
-            `<script src="${DEMO_BASE_PATH}__demo__/index.js"></script></head>`
+            `<!-- DEMO_SLOT -->`,
+            [DEMO_HACK_SCRIPT, GOOGLE_ANALYTICS_TAG_SCRIPT, GOOGLE_ADSENSE_SCRIPT].join('\n')
           )
         }
       }