BUZER
Skip to main content
Integration time3 minutes

How to Add Ads to Astro with Buzer (2026 Guide)

Astro is a modern web framework that ships zero JavaScript by default and supports islands architecture for interactive components. Buzer integrates perfectly with Astro's HTML-first approach — ad containers are static HTML that the Buzer script hydrates client-side. Add ads to your Astro site in about 3 minutes.

Step-by-Step Integration

1

Sign up for Buzer

Create your publisher account at buzer.xyz. Face ID or Touch ID authentication, no passwords required.

2

Add the Buzer script to your layout

Add the script tag to your base layout component. Astro layouts are .astro files that wrap your pages.

html
---
// src/layouts/BaseLayout.astro
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{title}</title>
</head>
<body>
  <slot />
  <script async src="https://cdn.buzer.xyz/x402-ad.js"></script>
</body>
</html>
3

Create a BuzerAd component

Create an Astro component for ad placements. Since Astro components render to static HTML, the ad container is in the page source from the start.

html
---
// src/components/BuzerAd.astro
interface Props {
  size?: string;
}
const { size = '300x250' } = Astro.props;
---
<div
  class="buzer-ad-wrapper"
  style="display:flex;justify-content:center;margin:1rem 0;"
>
  <div data-buzer-ad data-size={size}></div>
</div>
4

Use the component in your pages

Import and use the BuzerAd component in any Astro page or content layout. It works alongside any framework island (React, Vue, Svelte).

html
---
// src/pages/blog/[slug].astro
import BaseLayout from '../../layouts/BaseLayout.astro';
import BuzerAd from '../../components/BuzerAd.astro';

const { slug } = Astro.params;
const post = await getEntry('blog', slug);
---
<BaseLayout title={post.data.title}>
  <article>
    <h1>{post.data.title}</h1>
    <BuzerAd size="728x90" />
    <div class="prose">
      <post.render />
    </div>
    <BuzerAd size="300x250" />
  </article>
</BaseLayout>

Astro + Buzer: Zero JS Overhead for Ads

Astro's core principle is shipping zero JavaScript unless explicitly opted in. The BuzerAd component is a pure Astro component — it renders to static HTML with zero client-side JavaScript. The only JavaScript involved is the Buzer ad script itself, which loads asynchronously.

This means your Astro site's perfect Lighthouse score is preserved. The Buzer script loads after the page is interactive and fills ad containers without affecting Core Web Vitals.

For content-heavy Astro sites (blogs, documentation, marketing pages), this is the ideal monetization approach: static HTML containers that are dynamically filled with ads, combining the best of static performance with dynamic ad revenue.

Astro Content Collections and Ads

Astro's content collections (Markdown/MDX) are popular for blogs and documentation. You can place BuzerAd components in your collection layout templates to automatically include ads on every content page.

For MDX content, you can import and use BuzerAd directly within your markdown files, placing ads at specific points in your articles.

The combination of Astro's fast static generation, content collections, and Buzer's lightweight ad script creates a highly performant monetized content site.

Frequently Asked Questions

Does Buzer work with Astro islands (React, Vue, Svelte)?+
Yes. The BuzerAd component is a pure Astro component and does not require an island directive. It renders to static HTML. If you prefer, you can create a React/Vue/Svelte ad component and use it as an island with client:visible for lazy loading.
Can I use Buzer with Astro Starlight (docs)?+
Yes. Starlight is built on Astro and supports custom components. You can override layout sections or use Astro's component injection to add BuzerAd components to your documentation pages.
Does Buzer affect Astro build times?+
No. The Buzer script loads client-side at runtime. The BuzerAd component is a simple HTML template with no build-time dependencies. Your Astro builds remain fast regardless of how many ad placements you add.
Can I use Buzer with Astro's View Transitions?+
Yes. When using Astro's View Transitions API, the Buzer script persists across page navigations and detects new ad containers as they appear in the DOM via MutationObserver.

Related Resources

Add Ads to Next.js

Integrate Buzer ads into your Next.js app. Earn 85% revenue share with instant USDC payments. Works with App Router and Pages Router.

Add Ads to Hugo

Add Buzer ads to your Hugo site for 85% revenue share. Simple partial template integration with instant USDC payments. Complete Hugo monetization guide.

Add Ads to Svelte

Add Buzer ads to your Svelte or SvelteKit app. 85% revenue share with daily USDC payments. Lightweight integration that matches Svelte's philosophy.

Start earning 85% revenue share

Join Buzer and keep more of what you earn. No minimum traffic requirements. Instant payments in USDC.

Start EarningAdvertise With Us