adsense微调

2026-05-18 23:16:49 +00:00 · 2024-04-06 10:41:48 +08:00
parent da69b6d4a8
commit 44b2775380
2 changed files with 294 additions and 144 deletions
--- a/components/ExternalPlugins.js
+++ b/components/ExternalPlugins.js
@@ -1,43 +1,79 @@
 import { siteConfig } from '@/lib/config'
 import dynamic from 'next/dynamic'
-import LA51 from './LA51'
-import WebWhiz from './Webwhiz'
-import TianLiGPT from './TianliGPT'
 import { GlobalStyle } from './GlobalStyle'
+import LA51 from './LA51'
+import TianLiGPT from './TianliGPT'
+import WebWhiz from './Webwhiz'

 import { CUSTOM_EXTERNAL_CSS, CUSTOM_EXTERNAL_JS } from '@/blog.config'
 import { isBrowser, loadExternalResource } from '@/lib/utils'
+import { useEffect } from 'react'
+import { initGoogleAdsense } from './GoogleAdsense'

-const TwikooCommentCounter = dynamic(() => import('@/components/TwikooCommentCounter'), { ssr: false })
-const DebugPanel = dynamic(() => import('@/components/DebugPanel'), { ssr: false })
-const ThemeSwitch = dynamic(() => import('@/components/ThemeSwitch'), { ssr: false })
-const Fireworks = dynamic(() => import('@/components/Fireworks'), { ssr: false })
+const TwikooCommentCounter = dynamic(
+  () => import('@/components/TwikooCommentCounter'),
+  { ssr: false }
+)
+const DebugPanel = dynamic(() => import('@/components/DebugPanel'), {
+  ssr: false
+})
+const ThemeSwitch = dynamic(() => import('@/components/ThemeSwitch'), {
+  ssr: false
+})
+const Fireworks = dynamic(() => import('@/components/Fireworks'), {
+  ssr: false
+})
 const Nest = dynamic(() => import('@/components/Nest'), { ssr: false })
-const FlutteringRibbon = dynamic(() => import('@/components/FlutteringRibbon'), { ssr: false })
+const FlutteringRibbon = dynamic(
+  () => import('@/components/FlutteringRibbon'),
+  { ssr: false }
+)
 const Ribbon = dynamic(() => import('@/components/Ribbon'), { ssr: false })
 const Sakura = dynamic(() => import('@/components/Sakura'), { ssr: false })
-const StarrySky = dynamic(() => import('@/components/StarrySky'), { ssr: false })
-const DifyChatbot = dynamic(() => import('@/components/DifyChatbot'), { ssr: false });
-const Analytics = dynamic(() => import('@vercel/analytics/react').then(async (m) => { return m.Analytics }), { ssr: false })
+const StarrySky = dynamic(() => import('@/components/StarrySky'), {
+  ssr: false
+})
+const DifyChatbot = dynamic(() => import('@/components/DifyChatbot'), {
+  ssr: false
+})
+const Analytics = dynamic(
+  () =>
+    import('@vercel/analytics/react').then(async m => {
+      return m.Analytics
+    }),
+  { ssr: false }
+)
 const MusicPlayer = dynamic(() => import('@/components/Player'), { ssr: false })
 const Ackee = dynamic(() => import('@/components/Ackee'), { ssr: false })
 const Gtag = dynamic(() => import('@/components/Gtag'), { ssr: false })
 const Busuanzi = dynamic(() => import('@/components/Busuanzi'), { ssr: false })
-const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr: false })
-const Messenger = dynamic(() => import('@/components/FacebookMessenger'), { ssr: false })
+const Messenger = dynamic(() => import('@/components/FacebookMessenger'), {
+  ssr: false
+})
 const VConsole = dynamic(() => import('@/components/VConsole'), { ssr: false })
-const CustomContextMenu = dynamic(() => import('@/components/CustomContextMenu'), { ssr: false })
-const DisableCopy = dynamic(() => import('@/components/DisableCopy'), { ssr: false })
-const AdBlockDetect = dynamic(() => import('@/components/AdBlockDetect'), { ssr: false })
-const LoadingProgress = dynamic(() => import('@/components/LoadingProgress'), { ssr: false })
-const AosAnimation = dynamic(() => import('@/components/AOSAnimation'), { ssr: false })
+const CustomContextMenu = dynamic(
+  () => import('@/components/CustomContextMenu'),
+  { ssr: false }
+)
+const DisableCopy = dynamic(() => import('@/components/DisableCopy'), {
+  ssr: false
+})
+const AdBlockDetect = dynamic(() => import('@/components/AdBlockDetect'), {
+  ssr: false
+})
+const LoadingProgress = dynamic(() => import('@/components/LoadingProgress'), {
+  ssr: false
+})
+const AosAnimation = dynamic(() => import('@/components/AOSAnimation'), {
+  ssr: false
+})

 /**
 * 各种插件脚本
 * @param {*} props
 * @returns
 */
-const ExternalPlugin = (props) => {
+const ExternalPlugin = props => {
  const DISABLE_PLUGIN = siteConfig('DISABLE_PLUGIN')
  const THEME_SWITCH = siteConfig('THEME_SWITCH')
  const DEBUG = siteConfig('DEBUG')
@@ -55,7 +91,9 @@ const ExternalPlugin = (props) => {
  const FLUTTERINGRIBBON = siteConfig('FLUTTERINGRIBBON')
  const COMMENT_TWIKOO_COUNT_ENABLE = siteConfig('COMMENT_TWIKOO_COUNT_ENABLE')
  const RIBBON = siteConfig('RIBBON')
-  const CUSTOM_RIGHT_CLICK_CONTEXT_MENU = siteConfig('CUSTOM_RIGHT_CLICK_CONTEXT_MENU')
+  const CUSTOM_RIGHT_CLICK_CONTEXT_MENU = siteConfig(
+    'CUSTOM_RIGHT_CLICK_CONTEXT_MENU'
+  )
  const CAN_COPY = siteConfig('CAN_COPY')
  const WEB_WHIZ_ENABLED = siteConfig('WEB_WHIZ_ENABLED')
  const AD_WWADS_BLOCK_DETECT = siteConfig('AD_WWADS_BLOCK_DETECT')
@@ -113,88 +151,122 @@ const ExternalPlugin = (props) => {
    }
  }

+  useEffect(() => {
+    if (ADSENSE_GOOGLE_ID) {
+      setTimeout(() => {
+        // 异步渲染谷歌广告
+        initGoogleAdsense()
+      }, 1000)
+    }
+  }, [])
+
  if (DISABLE_PLUGIN) {
    return null
  }

-  return <>
+  return (
+    <>
+      {/* 全局样式嵌入 */}
+      <GlobalStyle />

-        {/* 全局样式嵌入 */}
-        <GlobalStyle/>
+      {THEME_SWITCH && <ThemeSwitch />}
+      {DEBUG && <DebugPanel />}
+      {ANALYTICS_ACKEE_TRACKER && <Ackee />}
+      {ANALYTICS_GOOGLE_ID && <Gtag />}
+      {ANALYTICS_VERCEL && <Analytics />}
+      {ANALYTICS_BUSUANZI_ENABLE && <Busuanzi />}
+      {FACEBOOK_APP_ID && FACEBOOK_PAGE_ID && <Messenger />}
+      {FIREWORKS && <Fireworks />}
+      {SAKURA && <Sakura />}
+      {STARRY_SKY && <StarrySky />}
+      {MUSIC_PLAYER && <MusicPlayer />}
+      {NEST && <Nest />}
+      {FLUTTERINGRIBBON && <FlutteringRibbon />}
+      {COMMENT_TWIKOO_COUNT_ENABLE && <TwikooCommentCounter {...props} />}
+      {RIBBON && <Ribbon />}
+      {DIFY_CHATBOT_ENABLED && <DifyChatbot />}
+      {CUSTOM_RIGHT_CLICK_CONTEXT_MENU && <CustomContextMenu {...props} />}
+      {!CAN_COPY && <DisableCopy />}
+      {WEB_WHIZ_ENABLED && <WebWhiz />}
+      {AD_WWADS_BLOCK_DETECT && <AdBlockDetect />}
+      {TIANLI_KEY && <TianLiGPT />}
+      <VConsole />
+      <LoadingProgress />
+      <AosAnimation />
+      {ANALYTICS_51LA_ID && ANALYTICS_51LA_CK && <LA51 />}

-        {THEME_SWITCH && <ThemeSwitch />}
-        {DEBUG && <DebugPanel />}
-        {ANALYTICS_ACKEE_TRACKER && <Ackee />}
-        {ANALYTICS_GOOGLE_ID && <Gtag />}
-        {ANALYTICS_VERCEL && <Analytics />}
-        {ANALYTICS_BUSUANZI_ENABLE && <Busuanzi />}
-        {ADSENSE_GOOGLE_ID && <GoogleAdsense />}
-        {FACEBOOK_APP_ID && FACEBOOK_PAGE_ID && <Messenger />}
-        {FIREWORKS && <Fireworks />}
-        {SAKURA && <Sakura />}
-        {STARRY_SKY && <StarrySky />}
-        {MUSIC_PLAYER && <MusicPlayer />}
-        {NEST && <Nest />}
-        {FLUTTERINGRIBBON && <FlutteringRibbon />}
-        {COMMENT_TWIKOO_COUNT_ENABLE && <TwikooCommentCounter {...props} />}
-        {RIBBON && <Ribbon />}
-        {DIFY_CHATBOT_ENABLED && <DifyChatbot />}
-        {CUSTOM_RIGHT_CLICK_CONTEXT_MENU && <CustomContextMenu {...props} />}
-        {!CAN_COPY && <DisableCopy />}
-        {WEB_WHIZ_ENABLED && <WebWhiz />}
-        {AD_WWADS_BLOCK_DETECT && <AdBlockDetect />}
-        {TIANLI_KEY && <TianLiGPT/>}
-        <VConsole />
-        <LoadingProgress />
-        <AosAnimation />
-        {ANALYTICS_51LA_ID && ANALYTICS_51LA_CK && <LA51/>}
-
-        {ANALYTICS_51LA_ID && ANALYTICS_51LA_CK && (<>
-            <script id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js" defer/>
-            {/* <script async dangerouslySetInnerHTML={{
+      {ANALYTICS_51LA_ID && ANALYTICS_51LA_CK && (
+        <>
+          <script id='LA_COLLECT' src='//sdk.51.la/js-sdk-pro.min.js' defer />
+          {/* <script async dangerouslySetInnerHTML={{
              __html: `
                    LA.init({id:"${ANALYTICS_51LA_ID}",ck:"${ANALYTICS_51LA_CK}",hashMode:true,autoTrack:true})
                    `
            }} /> */}
-        </>)}
+        </>
+      )}

-        {/* 注入JS脚本 */}
-        {GLOBAL_JS && <script async dangerouslySetInnerHTML={{
-          __html: GLOBAL_JS
-        }} />}
+      {/* 注入JS脚本 */}
+      {GLOBAL_JS && (
+        <script
+          async
+          dangerouslySetInnerHTML={{
+            __html: GLOBAL_JS
+          }}
+        />
+      )}

-        {CHATBASE_ID && (<>
-            <script id={CHATBASE_ID} src="https://www.chatbase.co/embed.min.js" defer />
-            <script async dangerouslySetInnerHTML={{
+      {CHATBASE_ID && (
+        <>
+          <script
+            id={CHATBASE_ID}
+            src='https://www.chatbase.co/embed.min.js'
+            defer
+          />
+          <script
+            async
+            dangerouslySetInnerHTML={{
              __html: `
                    window.chatbaseConfig = {
                        chatbotId: "${CHATBASE_ID}",
                        }
                    `
-            }} />
-        </>)}
+            }}
+          />
+        </>
+      )}

-        {CLARITY_ID && (<>
-          <script async dangerouslySetInnerHTML={{
-            __html: `
+      {CLARITY_ID && (
+        <>
+          <script
+            async
+            dangerouslySetInnerHTML={{
+              __html: `
                (function(c,l,a,r,i,t,y){
                    c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
                    t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
                    y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
                })(window, document, "clarity", "script", "${CLARITY_ID}");
                `
-          }} />
-        </>)}
+            }}
+          />
+        </>
+      )}

-        {COMMENT_DAO_VOICE_ID && (<>
-            {/* DaoVoice 反馈 */}
-            <script async dangerouslySetInnerHTML={{
+      {COMMENT_DAO_VOICE_ID && (
+        <>
+          {/* DaoVoice 反馈 */}
+          <script
+            async
+            dangerouslySetInnerHTML={{
              __html: `
              (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/daf1a94b.js","daovoice")
              `
            }}
-            />
-            <script async dangerouslySetInnerHTML={{
+          />
+          <script
+            async
+            dangerouslySetInnerHTML={{
              __html: `
             daovoice('init', {
                app_id: "${COMMENT_DAO_VOICE_ID}"
@@ -202,34 +274,52 @@ const ExternalPlugin = (props) => {
              daovoice('update');
              `
            }}
-            />
-        </>)}
+          />
+        </>
+      )}

-        {AD_WWADS_ID && <script type="text/javascript" src="https://cdn.wwads.cn/js/makemoney.js" async></script>}
+      {AD_WWADS_ID && (
+        <script
+          type='text/javascript'
+          src='https://cdn.wwads.cn/js/makemoney.js'
+          async></script>
+      )}

-        {COMMENT_TWIKOO_ENV_ID && <script defer src={COMMENT_TWIKOO_CDN_URL} />}
+      {COMMENT_TWIKOO_ENV_ID && <script defer src={COMMENT_TWIKOO_CDN_URL} />}

-        {COMMENT_ARTALK_SERVER && <script defer src={COMMENT_ARTALK_JS} />}
+      {COMMENT_ARTALK_SERVER && <script defer src={COMMENT_ARTALK_JS} />}

-        {COMMENT_TIDIO_ID && <script async src={`//code.tidio.co/${COMMENT_TIDIO_ID}.js`} />}
+      {COMMENT_TIDIO_ID && (
+        <script async src={`//code.tidio.co/${COMMENT_TIDIO_ID}.js`} />
+      )}

-        {/* gitter聊天室 */}
-        {COMMENT_GITTER_ROOM && (<>
-            <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer />
-            <script async dangerouslySetInnerHTML={{
+      {/* gitter聊天室 */}
+      {COMMENT_GITTER_ROOM && (
+        <>
+          <script
+            src='https://sidecar.gitter.im/dist/sidecar.v1.js'
+            async
+            defer
+          />
+          <script
+            async
+            dangerouslySetInnerHTML={{
              __html: `
            ((window.gitter = {}).chat = {}).options = {
              room: '${COMMENT_GITTER_ROOM}'
            };
            `
-            }} />
-        </>)}
+            }}
+          />
+        </>
+      )}

-        {/* 百度统计 */}
-        {ANALYTICS_BAIDU_ID && (
-            <script async
-                dangerouslySetInnerHTML={{
-                  __html: `
+      {/* 百度统计 */}
+      {ANALYTICS_BAIDU_ID && (
+        <script
+          async
+          dangerouslySetInnerHTML={{
+            __html: `
          var _hmt = _hmt || [];
          (function() {
            var hm = document.createElement("script");
@@ -238,29 +328,33 @@ const ExternalPlugin = (props) => {
            s.parentNode.insertBefore(hm, s);
          })();
          `
-                }}
-            />
-        )}
+          }}
+        />
+      )}

-        {/* 站长统计 */}
-        {ANALYTICS_CNZZ_ID && (
-            <script async
-                dangerouslySetInnerHTML={{
-                  __html: `
+      {/* 站长统计 */}
+      {ANALYTICS_CNZZ_ID && (
+        <script
+          async
+          dangerouslySetInnerHTML={{
+            __html: `
          document.write(unescape("%3Cspan style='display:none' id='cnzz_stat_icon_${ANALYTICS_CNZZ_ID}'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D${ANALYTICS_CNZZ_ID}' type='text/javascript'%3E%3C/script%3E"));
          `
-                }}
-            />
-        )}
+          }}
+        />
+      )}

-        {/* 谷歌统计 */}
-        {ANALYTICS_GOOGLE_ID && (<>
-            <script async
-                src={`https://www.googletagmanager.com/gtag/js?id=${ANALYTICS_GOOGLE_ID}`}
-            />
-            <script async
-                dangerouslySetInnerHTML={{
-                  __html: `
+      {/* 谷歌统计 */}
+      {ANALYTICS_GOOGLE_ID && (
+        <>
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${ANALYTICS_GOOGLE_ID}`}
+          />
+          <script
+            async
+            dangerouslySetInnerHTML={{
+              __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
@@ -268,14 +362,17 @@ const ExternalPlugin = (props) => {
                  page_path: window.location.pathname,
                });
              `
-                }}
-            />
-        </>)}
+            }}
+          />
+        </>
+      )}

-        {/* Matomo 统计 */}
-        {MATOMO_HOST_URL && MATOMO_SITE_ID && (
-            <script async dangerouslySetInnerHTML={{
-              __html: `
+      {/* Matomo 统计 */}
+      {MATOMO_HOST_URL && MATOMO_SITE_ID && (
+        <script
+          async
+          dangerouslySetInnerHTML={{
+            __html: `
              var _paq = window._paq = window._paq || [];
              _paq.push(['trackPageView']);
              _paq.push(['enableLinkTracking']);
@@ -287,10 +384,11 @@ const ExternalPlugin = (props) => {
                g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
              })();
            `
-            }} />
-        )}
-
+          }}
+        />
+      )}
    </>
+  )
 }

 export default ExternalPlugin
--- a/components/GoogleAdsense.js
+++ b/components/GoogleAdsense.js
@@ -1,10 +1,14 @@
 import { siteConfig } from '@/lib/config'
 import { loadExternalResource } from '@/lib/utils'
-import { useRouter } from 'next/router'
 import { useEffect } from 'react'

-function requestAd() {
-  const ads = document.getElementsByClassName('adsbygoogle')
+/**
+ * 请求广告元素
+ */
+function requestAd(ads) {
+  if (!ads || ads.length === 0) {
+    return
+  }
  const adsbygoogle = window.adsbygoogle
  if (adsbygoogle && ads.length > 0) {
    for (let i = 0; i <= ads.length; i++) {
@@ -18,31 +22,70 @@ function requestAd() {
  }
 }

+// 获取节点或其子节点中包含 adsbygoogle 类的节点
+function getNodesWithAdsByGoogleClass(node) {
+  const adsNodes = []
+  // 检查节点及其子节点是否包含 adsbygoogle 类
+  function checkNodeForAds(node) {
+    if (
+      node.nodeType === Node.ELEMENT_NODE &&
+      node.classList.contains('adsbygoogle')
+    ) {
+      adsNodes.push(node)
+    } else {
+      // 递归检查子节点
+      for (let i = 0; i < node.childNodes.length; i++) {
+        checkNodeForAds(node.childNodes[i])
+      }
+    }
+  }
+  checkNodeForAds(node)
+  return adsNodes
+}
+
 /**
 * 初始化谷歌广告
 * @returns
 */
-export default function GoogleAdsense() {
-  const initGoogleAdsense = () => {
-    loadExternalResource(
-      `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${siteConfig('ADSENSE_GOOGLE_ID')}`,
-      'js'
-    ).then(url => {
-      setTimeout(() => {
-        requestAd()
-      }, 100)
-    })
-  }
-
-  const router = useRouter()
-  useEffect(() => {
-    // 延迟3秒加载
+export const initGoogleAdsense = async () => {
+  console.log('Load Adsense')
+  loadExternalResource(
+    `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${siteConfig('ADSENSE_GOOGLE_ID')}`,
+    'js'
+  ).then(url => {
    setTimeout(() => {
-      initGoogleAdsense()
-    }, 3000)
-  }, [router])
+      // 页面加载完成后加载一次广告
+      const ads = document.getElementsByClassName('adsbygoogle')
+      if (window.adsbygoogle && ads.length > 0) {
+        requestAd(Array.from(ads))
+      }

-  return null
+      // 创建一个 MutationObserver 实例，监听页面上新出现的广告单元
+      const observer = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+          // 检查每个添加到DOM中的节点
+          mutation.addedNodes.forEach(node => {
+            // 如果节点是adsbygoogle元素，则请求广告
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              const adsNodes = getNodesWithAdsByGoogleClass(node)
+              if (adsNodes.length > 0) {
+                requestAd(adsNodes)
+              }
+            }
+          })
+        })
+      })
+
+      // 配置 MutationObserver 监听特定类型的 DOM 变化
+      const observerConfig = {
+        childList: true, // 观察目标子节点的变化
+        subtree: true // 包括目标节点的所有后代节点
+      }
+
+      // 启动 MutationObserver
+      observer.observe(document.body, observerConfig)
+    }, 100)
+  })
 }

 /**
@@ -128,9 +171,18 @@ const AdEmbed = () => {
          const newInsElement = document.createElement('ins')
          newInsElement.className = 'adsbygoogle w-full py-1'
          newInsElement.style.display = 'block'
-          newInsElement.setAttribute('data-ad-client', siteConfig('ADSENSE_GOOGLE_ID'))
-          newInsElement.setAttribute('data-adtest', siteConfig('ADSENSE_GOOGLE_TEST') ? 'on' : 'off')
-          newInsElement.setAttribute('data-ad-slot', siteConfig('ADSENSE_GOOGLE_SLOT_AUTO'))
+          newInsElement.setAttribute(
+            'data-ad-client',
+            siteConfig('ADSENSE_GOOGLE_ID')
+          )
+          newInsElement.setAttribute(
+            'data-adtest',
+            siteConfig('ADSENSE_GOOGLE_TEST') ? 'on' : 'off'
+          )
+          newInsElement.setAttribute(
+            'data-ad-slot',
+            siteConfig('ADSENSE_GOOGLE_SLOT_AUTO')
+          )
          newInsElement.setAttribute('data-ad-format', 'auto')
          newInsElement.setAttribute('data-full-width-responsive', 'true')