Fix Low Ad Revenue From Ad Blockers on Frontend Developer Blogs

Audience: Frontend developers. Ad block rate: 58% (measured via script load failure + Plausible custom event). Raw RPM if all ads showed: $6.20. Effective RPM: $2.61.

Measure before fixing

// Lightweight detection — don't arm race
function adBlockDetected() {
  const bait = document.createElement('div');
  bait.className = 'adsbox adsbygoogle';
  bait.style.cssText = 'height:1px;position:absolute;left:-9999px';
  document.body.appendChild(bait);
  const blocked = bait.offsetHeight === 0;
  bait.remove();
  return blocked;
}

if (adBlockDetected()) {
  plausible('AdBlock', { props: { page: location.pathname } });
}

My stats: 58% block on /posts/react-*, 41% on /posts/css-*.

What NOT to do

• Full content gate ("disable adblock to read") — SEO death, reader rage
• Anti-adblock arms race scripts (BlockAdBlock) — 200KB JS, breaks trust
• Fake "broken" overlays — unethical

What worked: polite fallback

Detect block → show non-intrusive message + affiliate CTA:

<div id="abo-fallback" hidden class="abo-notice">
  <p>Looks like you're using an ad blocker. This site is free thanks to ads and affiliate links.</p>
  <a href="/hosts/vps-affiliate">Try this host I use</a> ·
  <button id="abo-dismiss">Continue reading</button>
</div>

.abo-notice {
  background: #f0f9ff; border: 1px solid #bae6fd;
  padding: 1rem; margin: 1rem 0; border-radius: 8px;
  font-size: 0.9rem;
}

Show once per session. Dismissible. Never block content.

Affiliate fallback content

Replace ad slot with affiliate card for blocked users:

<div class="affiliate-card" data-for="adblock">
  <strong>Deploy static sites free</strong>
  <p>I host this blog on [Provider] — free tier works for Hugo.</p>
  <a href="/go/provider" rel="sponsored">Start free →</a>
</div>

Affiliate RPM equivalent: ~$1.80 vs $3.20 display — better than $0.

Sponsor mentions in content

For dev audience, honest sponsorship outperforms display:

"This post uses Tailwind (affiliate link)." — 3.2% CTR on affiliate vs 0.4% on display ads for blocked users who see fallback.

Acceptable AdSense approach

Google allows asking users to support via ads. Wording matters:

OK: "Consider allowing ads on this site to support free tutorials." Not OK: "Click ads to support us."

Results (90 days)

Ad block rate: unchanged (58%)
Affiliate revenue from fallback: +$340/mo
Sponsor inline mentions: +$180/mo
Effective RPM: $2.61 → $3.45 (+32%)
Bounce rate change: +1.2% (acceptable)

You won't beat ad block on dev blogs. Diversify revenue instead of fighting uBlock.