add(3rdparty/js): only load ads and Google Analytics after first app …

…rendering with a 2 seconds delay (#510)
ff14-advanced-market-search · Sep 25, 2024 · 8041b19 · 8041b19
1 parent a4a9d48
commit 8041b19
Showing 1 changed file with 36 additions and 22 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -244,35 +244,49 @@ function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      // Load Google Tag Manager
+      ;(function (w, d, s, l, i) {
+        w[l] = w[l] || []
+        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != 'dataLayer' ? '&l=' + l : ''
+        j.async = true
+        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
+        f.parentNode.insertBefore(j, f)
+      })(window, document, 'script', 'dataLayer', 'GTM-WH4KFG5')
+
+      // Load Ezoic script
+      const script = document.createElement('script')
+      script.src = '//www.ezojs.com/ezoic/sa.min.js'
+      script.async = true
+      document.body.appendChild(script)
+
+      script.onload = function () {
+        window.ezstandalone = window.ezstandalone || {}
+        ezstandalone.cmd = ezstandalone.cmd || []
+        ezstandalone.cmd.push(function () {
+          ezstandalone.define(118, 116)
+          ezstandalone.refresh()
+          ezstandalone.enable()
+          ezstandalone.display()
+        })
+      }
+    }, 2000) // Delay of 1000ms (1 second)
+
+    // Cleanup function to clear the timeout if the component unmounts
+    return () => clearTimeout(timer)
+  }, []) // Empty dependency array means this effect runs once after initial render
+
   return (
     <html lang="en" className={classNames(`h-full`, theme || '')}>
       <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-        })(window,document,'script','dataLayer','GTM-WH4KFG5');`
-          }}
-        />
         <Meta />
         <Links />
         <EnsureThemeApplied />
-        <script async src="//www.ezojs.com/ezoic/sa.min.js"></script>
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `window.ezstandalone = window.ezstandalone || {};
-          ezstandalone.cmd = ezstandalone.cmd || [];
-          ezstandalone.cmd.push(function() {
-            ezstandalone.define(118,116);
-            ezstandalone.refresh();
-            ezstandalone.enable();
-            ezstandalone.display();
-        });`
-          }}
-        />
       </head>
       <body className={`h-full bg-gray-100 dark:bg-slate-800`}>
         <noscript>