improved ads

Author: muhammad-fiaz

src/components/elements/AdUnit.astro

@@ -8,6 +8,7 @@ interface Props {
   adLayout?: string;
   adLayoutKey?: string;
   className?: string;
+  refreshInterval?: number; // in seconds, default 5
 }
 
 const {
@@ -17,12 +18,16 @@ const {
   adLayout,
   adLayoutKey,
   className = "",
+  refreshInterval = 5,
 } = Astro.props;
+
+// Generate unique ID for this ad instance
+const adId = `ad-${adType}-${adSlot}-${Math.random().toString(36).substr(2, 9)}`;
 ---
 
 {
   GOOGLE_CONFIG.ADSENSE_CLIENT_ID && (
-    <div class={`ad-container ${className}`} style="min-height: 0;">
+    <div id={adId} class={`ad-container ${className}`} style="min-height: 0;">
       <script
         is:inline
         async
@@ -77,17 +82,79 @@ const {
         (adsbygoogle = window.adsbygoogle || []).push({});
       </script>
 
+      <script is:inline define:vars={{ adId, refreshInterval }}>
+        // Ad refresh functionality
+        (function() {
+          const adContainer = document.getElementById(adId);
+          if (!adContainer) return;
+
+          let refreshTimer;
+          let refreshCount = 0;
+          const maxRefreshes = 20; // Limit refreshes to prevent abuse
+
+          function refreshAd() {
+            const adElement = adContainer.querySelector('.adsbygoogle');
+            if (!adElement) return;
+
+            // Check if ad is loaded and visible
+            const adStatus = adElement.getAttribute('data-ad-status');
+            const isVisible = adContainer.offsetWidth > 0 && adContainer.offsetHeight > 0;
+
+            if (adStatus === 'filled' && isVisible && refreshCount < maxRefreshes) {
+              try {
+                // Clear existing ad
+                adElement.innerHTML = '';
+
+                // Re-push the ad
+                (adsbygoogle = window.adsbygoogle || []).push({});
+
+                refreshCount++;
+                console.log(`Ad refreshed (${refreshCount}/${maxRefreshes}): ${adId}`);
+              } catch (error) {
+                console.warn('Ad refresh failed:', error);
+              }
+            }
+          }
+
+          // Start refreshing after initial load
+          function startRefreshing() {
+            if (refreshTimer) clearInterval(refreshTimer);
+
+            refreshTimer = setInterval(refreshAd, refreshInterval * 1000);
+
+            // Also refresh on visibility change (tab focus, etc.)
+            document.addEventListener('visibilitychange', function() {
+              if (!document.hidden) {
+                setTimeout(refreshAd, 1000); // Small delay after tab becomes visible
+              }
+            });
+          }
+
+          // Wait for ad to load before starting refresh cycle
+          const checkAdLoaded = setInterval(function() {
+            const adElement = adContainer.querySelector('.adsbygoogle');
+            if (adElement && adElement.getAttribute('data-ad-status') === 'filled') {
+              clearInterval(checkAdLoaded);
+              setTimeout(startRefreshing, 2000); // Start refreshing 2 seconds after initial load
+            }
+          }, 500);
+
+          // Cleanup on page unload
+          window.addEventListener('beforeunload', function() {
+            if (refreshTimer) {
+              clearInterval(refreshTimer);
+            }
+          });
+        })();
+      </script>
+
       <style>
-        .ad-container:empty,
-        .ad-container:has(.adsbygoogle:not([data-ad-status])) {
-          display: none !important;
+        .ad-container {
+          min-height: 0 !important;
         }
         .adsbygoogle {
           min-height: 0 !important;
         }
-        .adsbygoogle[data-ad-status="unfilled"] {
-          display: none !important;
-        }
       </style>
     </div>
   )

src/pages/index.astro

@@ -35,6 +35,7 @@ if (!entry) {
             adSlot="1038118330"
             adFormat="auto"
             className="w-full"
+            refreshInterval={5}
           />
         </div>
       </aside>
@@ -45,7 +46,12 @@ if (!entry) {
         <LatestNews />
 
         <!-- Autorelaxed Ad -->
-        <AdUnit adType="autorelaxed" adSlot="9560154927" className="my-8" />
+        <AdUnit
+          adType="autorelaxed"
+          adSlot="9560154927"
+          className="my-8"
+          refreshInterval={5}
+        />
 
         <Authors />
       </main>
@@ -58,6 +64,7 @@ if (!entry) {
             adSlot="1038118330"
             adFormat="auto"
             className="w-full"
+            refreshInterval={5}
           />
         </div>
       </aside>

src/styles/global.css

@@ -90,18 +90,3 @@
 }
 
 /* Ad handling for responsive layout */
-.ad-container:empty,
-.ad-container:has(.adsbygoogle:not([data-ad-status])) {
-  display: none !important;
-}
-
-.adsbygoogle[data-ad-status="unfilled"] {
-  display: none !important;
-}
-
-/* Ensure sidebar collapses when ad is not loaded */
-aside:has(.ad-container:empty),
-aside:has(.ad-container:has(.adsbygoogle:not([data-ad-status]))),
-aside:has(.ad-container:has(.adsbygoogle[data-ad-status="unfilled"])) {
-  display: none !important;
-}