Have event logged when ad visibility changes

assets/css/global.scss

@@ -539,5 +539,5 @@ label {
   // But we can't do that, because of the way that position: fixed locks the z-index of the children.  That means the
   // effective z-index of the fade and the modal contents is the same.  So we do this, which will occasionally overlap
   // the modal contents in an annoying way.  It would be nice to figure out something better.
-  z-index: 1056 !important;
-}
+  //z-index: 1056 !important;
+}

components/ExternalDa.vue

@@ -135,10 +135,17 @@ async function visibilityChanged(visible) {
                 }
               }, 45000)
             }
-          })
+          }).addEventListener("slotVisibilityChanged", (event) => {
+            const slot = event.slot;
+            console.group("Visibility of slot", slot.getSlotElementId(), "changed.");
+
+            // Log details of the event.
+            console.log("Visible area:", `${event.inViewPercentage}%`);
+            console.groupEnd();
+          });
 
         window.googletag.enableServices()
-      })
+      });
 
       window.googletag.cmd.push(function () {
         window.googletag.display(props.divId)