BUZER
Skip to main content
Integration time5 minutes

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

Gatsby is a powerful React-based static site generator popular with bloggers, documentation sites, and content-heavy publishers. Buzer integrates smoothly with Gatsby's build pipeline and client-side hydration. Add ads to your Gatsby site in under 5 minutes without affecting your blazing-fast build times.

Step-by-Step Integration

1

Sign up for Buzer

Create your publisher account at buzer.xyz using Face ID or Touch ID. Your payment wallet is set up automatically.

2

Add the script via gatsby-ssr.js

Use Gatsby's Server-Side Rendering API to inject the Buzer script into every page. Create or edit gatsby-ssr.js in your project root.

javascript
// gatsby-ssr.js
import React from 'react';

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="buzer-ad"
      async
      src="https://cdn.buzer.xyz/x402-ad.js"
    />,
  ]);
};
3

Create a BuzerAd component

Build a React component for ad slots. Since Gatsby pre-renders pages as static HTML, the ad container is included in the initial HTML and hydrated client-side.

javascript
import React, { useEffect, useRef } from 'react';

const BuzerAd = ({ size = '300x250' }) => {
  const adRef = useRef(null);

  useEffect(() => {
    if (typeof window !== 'undefined' && window.buzer && adRef.current) {
      window.buzer.refresh(adRef.current);
    }
  }, [size]);

  return (
    <div
      ref={adRef}
      data-buzer-ad
      data-size={size}
      style={{ display: 'flex', justifyContent: 'center', margin: '1rem 0' }}
    />
  );
};

export default BuzerAd;
4

Place ads in your blog templates

Import the BuzerAd component into your Gatsby page templates or blog post templates. Place it between content sections for the best user experience.

javascript
import BuzerAd from '../components/BuzerAd';

const BlogPostTemplate = ({ data }) => {
  const post = data.markdownRemark;
  return (
    <article>
      <h1>{post.frontmatter.title}</h1>
      <BuzerAd size="728x90" />
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
      <BuzerAd size="300x250" />
    </article>
  );
};

Gatsby + Buzer: Static Sites That Earn

Gatsby sites are pre-built at deploy time, resulting in ultra-fast load times and excellent SEO. Adding ads to a Gatsby site requires a script that works with static HTML and client-side hydration — which is exactly how Buzer operates.

The Buzer script loads asynchronously after hydration, scans the DOM for ad containers, and fills them with relevant ads. Since Gatsby pages are static HTML first, the ad containers are already in the page source, ensuring fast detection and fill.

This makes Buzer ideal for Gatsby-powered blogs, documentation sites, and portfolio sites that want to monetize without sacrificing the performance benefits that made them choose Gatsby in the first place.

Optimizing Ad Revenue on Gatsby Blogs

Gatsby blogs tend to have long-form content, which is ideal for ad monetization. Place a 728x90 leaderboard below the post title, a 300x250 medium rectangle after the third paragraph, and a 300x600 half-page ad in the sidebar on desktop.

For mobile visitors, Buzer automatically serves mobile-optimized sizes (320x50 or 300x250) based on viewport width. You do not need to add separate mobile ad slots — the responsive behavior is handled by the script.

With Buzer's 85% revenue share and daily USDC settlements, a Gatsby blog with 50,000 monthly page views can realistically earn $200-500/month depending on niche and audience geography.

Frequently Asked Questions

Does Buzer affect Gatsby build times?+
No. The Buzer script is loaded client-side at runtime. It is not part of the Gatsby build process and has zero impact on build times. The only build-time change is adding the script tag via gatsby-ssr.js.
Do Buzer ads work with Gatsby's prefetching?+
Yes. When Gatsby prefetches a page and the user navigates to it, the BuzerAd component mounts and the Buzer script detects the new ad container via MutationObserver. Ads appear seamlessly during client-side transitions.
Can I use Buzer with gatsby-plugin-google-analytics?+
Yes. Buzer operates independently of analytics plugins. You can run Google Analytics, Plausible, or any other analytics alongside Buzer ads without conflicts.

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 React

Monetize your React app with Buzer ads. Earn 85% revenue share with instant USDC payments. Simple component-based integration for any React project.

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.

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