Key Takeaways

• Sticky and anchor ads remain visible as users scroll, increasing viewability by up to 200% and CTR by 40-60%

• Horizontal sticky ads work well across devices, while vertical ones perform best on desktop

• Implementation requires careful attention to size (less than 30% screen coverage), positioning, and user experience

• Technical setup involves CSS position:fixed property and responsive design considerations

• Google and other networks have specific guidelines publishers must follow for compliance

What Are Sticky Ads and Why Do Publishers Love Them?

Ever seen those ads that follow you down the page as you scroll? Yeah, those sneaky little attention-grabbers that refuse to dissapear as you browse. Those are sticky ads (also called anchor ads when positioned at the bottom of mobile screens), and they've become a staple in the publisher monetization toolkit.

The concept is simple but powerful: instead of dissapearing when a user scrolls past them, sticky ads remain "stuck" to a specific area of the viewport. According to AdPushup's research on sticky ad performance, this persistent visibility can increase viewability rates by up to 200% compared to standard placements. This is why they've become so popular among publishers looking to maximize their ad impressions and boost those sweet, sweet viewability metrics.

Unlike standard display ads that might get scrolled past in a split second, sticky ads hang around, demanding attention and driving up performance. They create that persistent brand exposure advertisers crave while generating more revenue for publishers—a rare win-win in the ad tech ecosystem.

Types of Sticky Ads: Finding Your Perfect Match

Not all sticky ads are created equal. Depending on your site layout, audience, and monetization strategy, you'll want to choose the right type:

Horizontal Sticky Ads

These ads stretch across the top or bottom of the screen, sticking to those edges as users scroll:

• Header Sticky: Pinned to the top of the viewport, often below the navigation menu

• Footer Sticky/Anchor Ads: Attached to the bottom of the screen (commonly called "anchor ads" on mobile)

The team at Newor Media explains in their sticky ad guide that horizontal stickies are versatile champions that work well across devices, making them a solid default choice if you're just getting started.

Vertical Sticky Ads

These portrait-oriented ads cling to the left or right side of the screen:

• Sidebar Sticky: Typically placed in the margin area, staying in view as users scroll

• Rail Sticky: Similar to sidebar but can be placed closer to main content

Vertical sticky ads shine on desktop where there's enough screen real estate to accommodate them without becoming intrusive. On mobile, they can feel cramped and hurt user experience.

I've seen some publishers try to cram both horizontal and vertical stickies onto the same page. Sure, you might squeeze out a few extra pennies, but at what cost? It's like putting ketchup on ice cream—technically possible, but most people will hate you for it.

Implementation Deep Dive: Making Sticky Ads Stick

Let's get into the nitty-gritty of how to actually implement these bad boys. There are a few different approaches depending on your technical setup:

CSS Method: The Foundation

At its core, the sticky behavior relies on CSS positioning. As GeeksforGeeks explains in their sticky ad tutorial, the position:fixed property is key to creating this effect. Here's a basic implementation:

<div class="sticky-ad-container">
  <!-- Your ad code goes here -->
  <div id="div-gpt-ad-123456789-0"></div>
</div>

.sticky-ad-container {
  position: fixed;
  bottom: 0;       /* For bottom anchor ads */
  /* top: 0; */    /* For top sticky ads */
  /* right: 0; */  /* For right sidebar sticky */
  width: 100%;     /* Full width for horizontal ads */
  /* width: 300px; */ /* For vertical sticky ads */
  z-index: 999;    /* Ensure it stays above other content */
  background: #fff;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
  max-height: 90px;  /* Keep it reasonably sized */
}

JavaScript Enhancement: Smarter Stickiness

Basic CSS works, but sometimes you need more control. Maybe you want the ad to only become sticky after scrolling past a certain point, or perhaps you want to add a close button:

// Make ad sticky after scrolling 200px
window.addEventListener('scroll', function() {
  const adContainer = document.querySelector('.sticky-ad-container');
  
  if (window.scrollY > 200) {
    adContainer.classList.add('is-sticky');
  } else {
    adContainer.classList.remove('is-sticky');
  }
});

// Add close button functionality
document.querySelector('.sticky-close-btn').addEventListener('click', function() {
  document.querySelector('.sticky-ad-container').style.display = 'none';
  // Optionally set a cookie to remember user preference
});

Responsive Considerations: Device-Appropriate Sticky Ads

Your sticky implementation needs to adapt to different screen sizes:

/* Base styles */
.sticky-ad-container {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
}

/* Desktop adjustments */
@media (min-width: 1024px) {
  .sticky-ad-container {
    width: 728px; /* Standard leaderboard width */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .sticky-ad-container {
    height: 50px; /* Smaller height on mobile */
  }
}

Publisher Ad Server Setup

If using Google Ad Manager (GAM), you'll need to properly configure your ad units:

1. Create a new ad unit specifically for sticky placements

2. In the ad unit settings, mark it as "Out-of-page" or "Fixed position" depending on your GAM version

3. Set appropriate targeting to maximize revenue from this premium inventory

4. Consider using key-value targeting like position=sticky to track performance separately

Don't forget to check if your ad network or ad exchange allows sticky ads. Some have specific policies or even offer dedicated sticky ad products. Google AdSense, for example, has its own anchor ad format that handles the sticky behavior for you.

Best Practices: Maximizing Performance Without Annoying Users

Sticky ads walk a fine line between performance and annoyance. Here's how to stay on the right side of that line:

Size and Position

• Follow the 30% rule: Chrome's ad filtering will block ads covering more than 30% of the screen

• Keep it slim: Horizontal sticky ads should be 90px or less on desktop, 50-100px on mobile

• Mind the margins: Leave enough space between sticky ads and content to prevent accidental clicks

According to Google's official guidelines for implementing sticky ads, publishers must ensure that vertical sticky ads are limited to one per viewable portion of the page, while horizontal sticky ads are limited to one per page. Following these rules isn't just good practice—it's required for platforms like Google Ad Manager.

User Experience Considerations

• Add a close button: Give users control by letting them dismiss sticky ads they find annoying

• Avoid stacking: One sticky ad per page is usually enough—more becomes intrusive

• Test scrolling depth: If most users only scroll 50% down your page, a bottom sticky might not get much exposure

Technical Performance

• Optimize ad loading: Lazy load sticky ads to prevent them from blocking more important content

• Monitor viewability: Use tools like Google's Active View to ensure your sticky ads meet the 50% pixels in view for 1+ second standard

• Watch page speed: Heavy ads that slow down your site will negate any revenue benefits from improved viewability

I've seen publishers go overboard with sticky implementations, turning their sites into digital billboards where content feels like an afterthought. Don't be that publisher. Remember that your content is still king—sticky ads are just there to monetize it more efficiently.

Measuring Success: Beyond Basic Metrics

How do you know if your sticky ads are actually working? Look beyond basic impressions to these key metrics:

Viewability Rate

The whole point of sticky ads is improved viewability, so this should be your primary metric. According to Bidscube's analysis of sticky ad performance metrics, well-implemented sticky ads can achieve viewability rates of 70-90%, compared to 50-60% for standard display. If you're not seeing at least a 20% lift, something's wrong with your implementation.

Engagement Metrics

Monitor these carefully after implementing sticky ads:

• Bounce rate: Should remain stable or decrease slightly

• Average session duration: Should remain stable or increase

• Pages per session: Should remain stable or increase

• Scroll depth: Should remain consistent with pre-sticky baselines

A study by Publift on sticky ad implementation found that sites using properly optimized sticky ads saw minimal negative impact on user engagement metrics while achieving significantly higher ad revenue.

If these metrics worsen significantly after implementing sticky ads, you may need to adjust your approach.

Revenue Impact

The bottom line matters most. Look for:

• CPM increases: Sticky units often command 30-70% higher CPMs

• Overall revenue lift: Should translate to at least 15-20% more revenue from the same traffic

• Advertiser feedback: Are they seeing better performance from your sticky placements?

Getting Technical: Advanced Implementation Scenarios

For the more technically-inclined publishers, here are some advanced scenarios:

Sticky Ads with Header Bidding

If you're using Prebid or other header bidding solutions, you can apply sticky behavior to these high-yielding units:

// Define your sticky ad unit in Prebid configuration
var adUnits = [{
  code: 'sticky-banner-container',
  mediaTypes: {
    banner: {
      sizes: [[320, 50], [728, 90]]
    }
  },
  bids: [
    { bidder: 'appnexus', params: { placementId: 13144370 } },
    { bidder: 'rubicon', params: { 
      accountId: 14062, 
      siteId: 70608, 
      zoneId: 335918 
    }}
  ]
}];

// Initialize Prebid
pbjs.que.push(function() {
  pbjs.addAdUnits(adUnits);
  pbjs.requestBids({
    timeout: 1000,
    bidsBackHandler: function() {
      googletag.cmd.push(function() {
        pbjs.setTargetingForGPTAsync(['sticky-banner-container']);
        googletag.pubads().refresh();
      });
    }
  });
});

// Make the container sticky with CSS

Integrating with Scroll-Based Features

Sometimes you want sticky behavior that varies based on scroll position:

// Define thresholds for different behaviors
const SCROLL_THRESHOLD_APPEAR = 200;
const SCROLL_THRESHOLD_STICKY = 400;
const SCROLL_THRESHOLD_DISAPPEAR = 2000;

let lastScrollY = 0;
let ticking = false;

function updateStickyAd(scrollY) {
  const adContainer = document.querySelector('.sticky-ad-container');
  
  // Ad initially hidden
  if (scrollY < SCROLL_THRESHOLD_APPEAR) {
    adContainer.classList.remove('is-visible', 'is-sticky');
  } 
  // Ad appears but not sticky yet
  else if (scrollY >= SCROLL_THRESHOLD_APPEAR && scrollY < SCROLL_THRESHOLD_STICKY) {
    adContainer.classList.add('is-visible');
    adContainer.classList.remove('is-sticky');
  }
  // Ad becomes sticky
  else if (scrollY >= SCROLL_THRESHOLD_STICKY && scrollY < SCROLL_THRESHOLD_DISAPPEAR) {
    adContainer.classList.add('is-visible', 'is-sticky');
  }
  // Ad disappears at end of article
  else if (scrollY >= SCROLL_THRESHOLD_DISAPPEAR) {
    adContainer.classList.remove('is-visible', 'is-sticky');
  }
}

// Throttled scroll event handler
window.addEventListener('scroll', function() {
  lastScrollY = window.scrollY;
  
  if (!ticking) {
    window.requestAnimationFrame(function() {
      updateStickyAd(lastScrollY);
      ticking = false;
    });
    
    ticking = true;
  }
});

Custom Close Button with Cookie Persistence

For a more user-friendly approach, remember user preferences:

function setupStickyAdPreferences() {
  // Check if user previously closed the ad
  const adDismissed = getCookie('sticky_ad_dismissed');
  
  if (adDismissed === 'true') {
    document.querySelector('.sticky-ad-container').style.display = 'none';
    return;
  }
  
  // Setup close button
  document.querySelector('.sticky-close-btn').addEventListener('click', function() {
    document.querySelector('.sticky-ad-container').style.display = 'none';
    
    // Set cookie to remember for 7 days
    const expiryDate = new Date();
    expiryDate.setDate(expiryDate.getDate() + 7);
    document.cookie = `sticky_ad_dismissed=true; expires=${expiryDate.toUTCString()}; path=/`;
  });
}

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// Initialize on DOM ready
document.addEventListener('DOMContentLoaded', setupStickyAdPreferences);

Compliance and Guidelines: Playing by the Rules

Different platforms and ad networks have their own rules for sticky ads. Here's what you need to know:

Google's Guidelines

Google has specific requirements:

• Must clearly be distinguished from site content

• Must not overlap with site navigation or content

• Must occupy ≤ 30% of the screen

• Vertical sticky ads: limited to one per viewable page

• Horizontal sticky ads: limited to one per page

• No cursor-driven movements

Coalition for Better Ads Standards

The Coalition for Better Ads doesn't explicitly prohibit sticky ads but has guidelines that could affect implementation:

• Avoid large sticky ads that cover too much content

• Ensure they don't interfere with page scrolling

• Don't place them over important navigation elements

Mobile Considerations

Mobile platforms have additional considerations:

• iOS Safari: Consider the "safe area" to avoid notches and home indicators

• Android Chrome: Bottom sticky ads may interfere with navigation gesture on newer devices

• Both: Account for browser address bars that appear/disappear during scrolling

Sticky and Anchor Ads: The Future of Viewable Impressions

As viewability continues to be a critical metric for advertisers, sticky and anchor ads aren't going anywhere. In fact, they're likely to evolve in interesting ways:

Emerging Trends

• Video sticky ads: Short-form video content in sticky formats is gaining traction

• Interactive sticky units: Expanding to reveal more content when engaged with

• Contextual sticky placements: Adapting to content relevance rather than just position

• Native sticky formats: Looking more like site elements while maintaining stickiness

Testing and Optimization Strategies

The most successful publishers are constantly testing:

• A/B testing positions: Top vs. bottom, left vs. right

• Size variations: Finding the sweet spot between viewability and intrusiveness

• Trigger timing: When should the ad become sticky?

• Dismissal behavior: Should the ad reappear after being closed? When?

Frequently Asked Questions

Will sticky ads hurt my user experience?

Not necessarily, if implemented thoughtfully. Keep them reasonably sized, include a close option, and monitor engagement metrics to ensure they're not driving users away.

Do sticky ads work with responsive design?

Absolutely, but you'll need to adjust your implementation to account for different screen sizes and orientations. Most publishers use different sticky ad strategies for mobile versus desktop.

Which performs better: top sticky or bottom sticky ads?

Bottom sticky/anchor ads typically perform better on mobile, while top sticky ads often work better on desktop. The best approach is to test both on your specific site.

Are sticky ads allowed by all ad networks?

No. Some networks have specific policies or restrictions. Always check your network's policies before implementation—Google, for example, has detailed guidelines for acceptable sticky ad formats.

How many sticky ads should I place on a page?

Less is more. Most publishers find that one horizontal sticky and potentially one vertical sticky (on desktop) provides the optimal balance between revenue and user experience.

Do sticky ads affect page load speed?

If implemented poorly, yes. Use asynchronous loading, consider lazy loading the sticky content, and monitor performance metrics closely after implementation.