Merge pull request #175 from reuters-graphics/ads-collapse

Ads collapse

.changeset/chilly-eyes-hear.md

@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Ads will collapse if unfulfilled

src/components/AdSlot/AdSlot.svelte

@@ -53,3 +53,9 @@
 </script>
 
 <div data-freestar-ad="{dataFreestarAd || null}" id="{adId}"></div>
+
+<style>
+  :global(div.freestar-adslot:has(.unfulfilled-ad)) {
+    display: none;
+  }
+</style>

src/components/AdSlot/LeaderboardAd.svelte

@@ -47,7 +47,7 @@
 <svelte:window bind:innerWidth="{windowWidth}" />
 
 <div
-  class="leaderboard__sticky {cls}"
+  class="freestar-adslot leaderboard__sticky {cls}"
   class:sticky
   class:unstick
   {id}

src/components/AdSlot/adScripts/bootstrap.ts

@@ -54,6 +54,19 @@ export const loadBootstrap = () => {
       // @ts-ignore window global
       window.googletag.pubads().enableAsyncRendering();
       window.googletag.pubads().collapseEmptyDivs(true);
+
+      window.googletag
+        .pubads()
+        .addEventListener('slotRenderEnded', function (event) {
+          const adDiv = document.getElementById(event.slot.getSlotElementId());
+          if (!adDiv) return;
+          // If the ad slot is empty
+          if (event.isEmpty) {
+            adDiv.classList.add('unfulfilled-ad');
+          } else {
+            adDiv.classList.remove('unfulfilled-ad');
+          }
+        });
     });
 
     // Set page-level key-values