How to Add a Sticky Header Ad With a Timer

Generating effective ad revenue is one the most important integrations for any publisher. If a site's ad experience is not loaded properly, it will not only result in a bad user experience, but also a low PageSpeed Insights score as measured by Google, and this puts your organic traffic at risk.

The wrong way to integrate ads into your site is to load them before a browser has a chance to display other content. This is a tricky balance to get right because ads still need to load quickly to register impressions and generate revenue.

On RebelMouse, we implement ads so that they load quickly while not affecting page-rendering performance. These ads are referred to as "sticky," which means they're always visible on the page even when a user is scrolling — users still see them, and publishers still get the impressions they need.

Using a sticky header ad with a timer so it loads quickly is a great way to optimize for both ad visibility and site performance. Here's how it works.

First, click here to familiarize yourself with our Header Code and Ad Header Code elements. Then, to create a sticky header ad with a timer, you must first set up an ad wrapper:

<!-- Define the ad placement -->
<div class="top-banner">
   <div id="banner_ad_id">
       <script>
       googletag.cmd.push(function() { googletag.display("banner_ad_id"); });
       </script>
   </div>
</div>

Next, use JavaScript to make it sticky upon load:

<script>
const stickyTime = 4;
googletag.cmd.push(() => {
  const topBanner = document.getElementById("top-banner");
  googletag.pubads().addEventListener('slotRenderEnded', e => {
      let banner_ad_id = "banner_ad_id";
      let div_ad =document.getElementById(banner_ad_id)
      if (banner_ad_id) {
          // check if the slot is empty and if the rendered slot is actually the banner slot
          if (e.slot.getSlotElementId() === banner_ad_id && !e.isEmpty) {
              document.body.classList.add("sticky-banner-ad");
              topBanner.style.height = div_ad.clientHeight + "px";
              setTimeout(() => {
                  document.body.classList.remove('sticky-banner-ad');
              }, stickyTime * 1000);
          }
      }
  });
});
</script>

Finally, add some styling:

<style>
    /*----  style the banner ad to fix it at top ------ */
 .sticky-banner-ad .top-banner{
     position: fixed;
       width: 100vw;
       top: 100px;
       left: 0;
       z-index: 9;
       display: block;
background: #fff;
       margin: 0 !important;
     }
     @media (max-width:767px){
          /*------- mobile top distance if needed------ */
       .sticky-banner-ad .t
op-banner{
       top:70px;
       }     }
     </style>

Your sticky ad header with a timer is complete. For a guide on all the elements available in our Layout & Design tool, click here.

Click the links below to view live examples of this feature on RebelMouse-powered sites:

• No Sitter for Valentine's Day? 8 Last-Minute Family Activities You'll All Love
• A white supremacist unfurled a giant Nazi flag and yelled 'Heil Hitler' at a Bernie Sanders rally
• Artist beautifully illustrates the transformative power of turning toward fear

If you have any questions about how to implement a sticky ad header with a timer, email support@rebelmouse.com or talk to your account manager today.