Revert "removing carbon ads accordingly when screen oreintation chang… (

#481) * Revert "removing carbon ads accordingly when screen oreintation changes (#477)" This reverts commit 2e8a38d. * fix media query
json-schema-org · Mar 8, 2024 · cd6d848 · cd6d848
1 parent 2e8a38d
commit cd6d848
Showing 1 changed file with 44 additions and 20 deletions.
diff --git a/components/CarbonsAds.tsx b/components/CarbonsAds.tsx
@@ -1,6 +1,17 @@
 import React, { useEffect, useRef } from 'react';
 import { useRouter } from 'next/router';
 
+declare global {
+  interface Window {
+    _carbonads: {
+      refresh: () => void;
+      reload: (where: string, force_serve: boolean) => void;
+      remove: (el: HTMLElement) => void;
+      srv: () => void;
+    };
+  }
+}
+
 type Props = {
   className?: string;
   variant?: 'sidebar';
@@ -11,28 +22,41 @@ function CarbonAds({ className, variant = 'sidebar' }: Props) {
   const router = useRouter();
 
   useEffect(() => {
-    const hasCarbonAdsScript = document.querySelector('#_carbonads_js');
-    if (!hasCarbonAdsScript) {
-      const carbonAdsScript = document.createElement('script');
-      carbonAdsScript.id = '_carbonads_js';
-      carbonAdsScript.type = 'text/javascript';
-      carbonAdsScript.async = true;
-      document
-        .querySelector('#carbonads-container')
-        ?.appendChild(carbonAdsScript);
-      carbonAdsScript.src = `//cdn.carbonads.com/carbon.js?serve=CE7I627Y&placement=json-schemaorg&rnd=${Math.random()}`;
-    }
+    const mobileMediaQuery = window.matchMedia('(max-width: 1023px)');
+    if (!mobileMediaQuery.matches) {
+      const hasCarbonAds = document.querySelector('#carbonads');
+      // Check if another ad is present to refresh
+      if (hasCarbonAds) {
+        window._carbonads.refresh();
+        return;
+      } else {
+        // Check if the script is present (ad is not yet present) so that duplicate requests are not made to carbon ads
+        const hasCarbonAdsScript = document.querySelector('#_carbonads_js');
+        if (!hasCarbonAdsScript) {
+          const carbonAdsScript = document.createElement('script');
+          carbonAdsScript.id = '_carbonads_js';
+          carbonAdsScript.type = 'text/javascript';
+          carbonAdsScript.async = true;
+          document
+            .querySelector('#carbonads-container')
+            ?.appendChild(carbonAdsScript);
+          carbonAdsScript.src = `//cdn.carbonads.com/carbon.js?serve=CE7I627Y&placement=json-schemaorg&rnd=${Math.random()}`;
+        }
+      }
 
-    const existingStyleSheet = document.querySelector('#_carbonads_css');
-    if (existingStyleSheet) {
-      existingStyleSheet.innerHTML = CarbonAds.stylesheet[variant];
+      const existingStyleSheet = document.querySelector('#_carbonads_css');
+      if (existingStyleSheet) {
+        existingStyleSheet.innerHTML = CarbonAds.stylesheet[variant];
+      } else {
+        const carbonAdsStyleSheet = document.createElement('style');
+        carbonAdsStyleSheet.id = '_carbonads_css';
+        carbonAdsStyleSheet.innerHTML = CarbonAds.stylesheet[variant];
+        document
+          .querySelector('#carbonads-container')
+          ?.appendChild(carbonAdsStyleSheet);
+      }
     } else {
-      const carbonAdsStyleSheet = document.createElement('style');
-      carbonAdsStyleSheet.id = '_carbonads_css';
-      carbonAdsStyleSheet.innerHTML = CarbonAds.stylesheet[variant];
-      document
-        .querySelector('#carbonads-container')
-        ?.appendChild(carbonAdsStyleSheet);
+      (carbonRef.current as HTMLElement).style.display = 'none';
     }
   }, [router.asPath]);