Need to make collapsable ads for my website

Question

import { useMediaQuery } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import { StyleRoot } from "radium";
import React from "react";
import Display from "../../Display";
import IMPAd from "../../IMPAd";

const RollingLeaderBoards = (props) => {

  const [load, setLoad] = React.useState(true);

  const adHeight = {
    large: "90px",
    medium: "90px",
    small: "60px",
    xlDesktop: "250px",
    xlMobile: "100px",
  };

  const style = {
    marginBottom: "45px",
    // Adding media query..
    "@media only screen and (min-width: 960px) and (max-width: 1300px)": {
      marginBottom: "45px",
    },
    "@media only screen and (min-width: 0px) and (max-width: 600px)": {
      marginBottom: "30px",
    },
    "@media only screen and (min-width: 600px) and (max-width: 960px)": {
      marginBottom: "30px",
    },
  };

  const theme = useTheme();
  const smallmb = useMediaQuery(theme.breakpoints.between("xs", "sm")); //0 - 600
  const largemb = useMediaQuery(theme.breakpoints.between("sm", "md")); //600 - 960

  let timeout = 500;
  let adHeightType = props.adPosition === "top" ? ["xlDesktop"] : ["medium"];
  let adBlockHeight =
    props.adPosition === "top" ? adHeight["large"] : adHeight["medium"];
  if (smallmb || largemb) {
    adBlockHeight = adHeight["small"];
    adHeightType = "small";
  }
  const topStyle = {
    marginTop: "15px",
    height: adBlockHeight,
  };



  const refFunc = (node) => {
    if (node && load) {
      let script = document.createElement("script");
      script.innerHTML = `
      googletag.cmd.push(function () {
        let RollingLeaderBoard = googletag
          .defineSlot(
            "/2744311/Display/Display_Push/Leaderboard",
            [
              [970, 250],
              [970, 90],
              [728, 90],
              [320, 50],
              [320, 100],
              [300, 50],
            ],
            "div-RollingLeaderBoard${props.modId}"
          )
          .addService(googletag.pubads());
        googletag.enableServices();
        if (isMoatDataAvailable()) {
          requestAds();
          googletag.display("div-RollingLeaderBoard${props.modId}");
          googletag.pubads().refresh([RollingLeaderBoard]);
        } else {
          window["moatYieldReady"] = requestAds;
          googletag.display("div-RollingLeaderBoard${props.modId}");
          googletag.pubads().refresh([RollingLeaderBoard]);
        }
        RollingLeaderBoard.setTargeting("adpos", "${props.adPosition}");
      }); 
      `;

      node.appendChild(script);
      setLoad(false);
    }
  };


  return (
    <Display {...props} timeout={timeout}>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
        }}
        id="rollingLeaderBoard"
      >
        <div
          style={{
            height: "300px",
            width: "100%",
            backgroundColor: "#ECEDEF",
            display: "flex",
            justifyContent: "center",
            marginBottom: "32px",
            marginTop: "32px",
          }}
        >
          <div
            style={{
              position: "sticky",
              maxHeight: "120px",
              display: "flex",
              justifyContent: "center",
              margin: "0px 0 16px 0",
              backgroundColor: "#ECEDEF",
              width: "100%",
              height: "100%",
              top: "30px",
            }}
          >
            <div style={style}>
              <IMPAd>
                <StyleRoot>
                  <div
                    id={`div-RollingLeaderBoard${props.modId}`}
                    ref={refFunc}
                  ></div>
                </StyleRoot>
              </IMPAd>
            </div>
          </div>
        </div>
      </div>
    </Display>
  );
};

export default RollingLeaderBoards;

How can I create a collapsible ad slot that can be hidden when there are no ads available using Google Publisher Tag? I want to ensure that the block of code is not displayed until an ad is successfully loaded. This approach will help to resolve issues with the collapsible element that arise when the ad is still loading. Are there any libraries or tools available that can assist with this? Any guidance or suggestions would be appreciated.

Answer 1

You should use PubAdsService_collapseEmptyDivs. You can specify wether your slot is "collapsed" by default or not, depending on the slot's fillrate : if it is mostly empty, keep it collapse by default, otherwise, collapse it only when no ad is found to be displayed.

See here for full samples, and here for the documentation.

Quick note aside : nowaday, CLS is quite important for SEO, so make sure you minimize the layout shifts...

Answer 2

If you're still looking for a solution to this, I'm actively maintaining goopubtag, (github repository here) as well as an accompanying docs repo. It's the only React GPT solution that is both type-safe and provides a hook for common commands.

See the examples section to get started. For collapsable ads, check out collapsable ads example in the docs, it's configurable simply by the fallback prop on the GPTSlot component. You can also set page level collapsable behaviour via the fallback prop on the GPTProvider. I'm really looking to grow this library so reach out if you have any issues!