Monetag Native Ads on Astro Static Sites: Integration and RPM Data

Stack: Astro 5 static, 60k monthly pageviews, 65% Tier 2/3 geo. AdSense alone: $1.90 RPM blended. Added Monetag native + push: +$0.90 RPM net after opt-out rate.

Why Monetag on static Astro

Monetag works with script tags — no server required. Native ads blend with content cards. Push requires SW registration.

Native banner integration

src/components/MonetagNative.astro:

---
const zoneId = import.meta.env.PUBLIC_MONETAG_NATIVE_ZONE;
---
<div class="native-ad-slot" data-zone={zoneId}
     style="min-height:120px;margin:1rem 0;border-radius:8px;background:#f8fafc"></div>
<script is:inline define:vars={{ zoneId }}>
  (function(w,d,s,o,f,js,fjs){
    w['Monetag']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
    js.async=1;js.src=f;fjs.parentNode.insertBefore(js,fjs);
  }(window,document,'script','mtag','https://s.monetag.com/tag.js'));
  mtag('native', zoneId, '.native-ad-slot');
</script>

Use is:inline — Vite bundling breaks ad script loaders.

Push notification setup

Monetag provides SW file — place in public/sw.js or their CDN version.

astro.config.mjs:

export default defineConfig({
  vite: {
    build: {
      rollupOptions: {
        external: [/monetag/],
      },
    },
  },
});

Register push only after user gesture (policy + UX):

document.getElementById('notify-btn')?.addEventListener('click', () => {
  mtag('push', { zoneId: 'XXXX' });
});

I use passive prompt on 2nd pageview — controversial but converts 4%.

Styling native to match blog

.native-ad-slot iframe {
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
}
.native-ad-slot::before {
  content: 'Sponsored';
  font-size: 0.7rem;
  color: #94a3b8;
  display: block;
  margin-bottom: 0.25rem;
}

Transparency label reduces complaints, may help policy compliance.

RPM breakdown (30 days)

AdSense display:     $1.90 RPM
Monetag native:       $0.55 RPM
Monetag push:         $0.35 RPM (opt-in 4.2%)
Total:                $2.80 RPM (+47% vs AdSense alone)

US traffic still better on AdSense. Monetag shines on Tier 2.

CLS / CWV impact

Native slot reserved at 120px min-height. CLS stayed 0.02. Push prompt is overlay — no layout shift if position: fixed.

What failed

• Auto push on first visit: 12% bounce spike
• Native in sidebar: low viewability, $0.12 RPM
• Multiple native per post: policy warning from Monetag

Recommendation

One native mid-article + optional push on 2nd visit. Keep AdSense for US display. Don't replace — stack with measurement.