@buzzer/ads

Monetize your site with crypto-native ads. Get paid in USDC, instantly.

The official SDK for Buzzer Network - the ad network that pays publishers 85% revenue share with instant USDC payouts.

Why Buzzer?

| Feature | AdSense | Buzzer | |---------|---------|--------| | Revenue Share | 68% | 85% | | Payout Threshold | $100 | $0 | | Payment Speed | 30 days | Instant | | Payment Method | Bank transfer | USDC to wallet |

Installation

npm install @buzzer/ads

Quick Start (React)

import { BuzzerAd } from '@buzzer/ads/react';

function MyBlog() {
  return (
    <article>
      <h1>My Post</h1>

      {/* Leaderboard ad (728x90) */}
      <BuzzerAd
        publisherId="pub_xxx"
        slot="leaderboard"
      />

      <p>Your content here...</p>

      {/* Medium Rectangle ad (300x250) */}
      <BuzzerAd
        publisherId="pub_xxx"
        slot="mediumRectangle"
      />
    </article>
  );
}

Quick Start (Vanilla JS)

<script type="module">
  import { createBuzzer } from 'https://esm.sh/@buzzer/ads';

  const buzzer = createBuzzer({
    publisherId: 'pub_xxx'
  });

  // Render ad into container
  buzzer.renderAd(document.getElementById('ad-slot'), {
    slot: 'mediumRectangle'
  });
</script>

<div id="ad-slot"></div>

React Components

<BuzzerAd>

The main component for displaying ads.

import { BuzzerAd } from '@buzzer/ads/react';

<BuzzerAd
  publisherId="pub_xxx"        // Required: Your publisher ID
  slot="mediumRectangle"       // Required: Ad format
  testMode={false}             // Optional: Enable test ads
  className="my-ad"            // Optional: CSS class
  style={{ margin: 20 }}       // Optional: Inline styles
  onLoad={() => {}}            // Optional: Called when ad loads
  onError={(err) => {}}        // Optional: Called on error
  onImpression={(data) => {}}  // Optional: Called when impression tracked
  onClick={(data) => {}}       // Optional: Called when ad clicked
/>

useBuzzer Hook

For programmatic ad control.

import { useBuzzer } from '@buzzer/ads/react';

function MyComponent() {
  const {
    requestAd,
    trackImpression,
    trackClick,
    generateImpressionId,
    loading,
    error
  } = useBuzzer({ publisherId: 'pub_xxx' });

  const handleShowAd = async () => {
    const ad = await requestAd('mediumRectangle');
    if (ad) {
      const impressionId = generateImpressionId();
      // Display ad...
      await trackImpression(ad.id, impressionId, 'mediumRectangle');
    }
  };

  return <button onClick={handleShowAd}>Show Ad</button>;
}

Ad Formats

| Format | Dimensions | Best For | |--------|------------|----------| | leaderboard | 728×90 | Header/footer | | mediumRectangle | 300×250 | Sidebar, in-content | | wideSkyscraper | 160×600 | Sidebar | | billboard | 970×250 | Hero sections | | mobileBanner | 320×50 | Mobile header | | mobileLeaderboard | 320×100 | Mobile in-content | | halfPage | 300×600 | Sidebar | | largeRectangle | 336×280 | In-content | | native | Flexible | Content feeds |

Vanilla JS API

createBuzzer(config)

Initialize the SDK.

import { createBuzzer } from '@buzzer/ads';

const buzzer = createBuzzer({
  publisherId: 'pub_xxx',
  testMode: false,           // Optional
  apiUrl: 'https://...'      // Optional: Custom API endpoint
});

buzzer.renderAd(container, config)

Render an ad into a DOM element.

buzzer.renderAd(document.getElementById('my-ad'), {
  slot: 'mediumRectangle',
  onLoad: () => console.log('Ad loaded'),
  onError: (err) => console.error(err),
  onImpression: (data) => console.log('Impression:', data),
  onClick: (data) => console.log('Click:', data)
});

buzzer.requestAd(config)

Request an ad without rendering.

const ad = await buzzer.requestAd({
  publisherId: 'pub_xxx',
  slot: 'mediumRectangle'
});

if (ad) {
  console.log(ad.title, ad.description, ad.url);
}

buzzer.trackImpression(adId, impressionId, slot)

Manually track an impression.

await buzzer.trackImpression('ad_123', 'imp_456', 'mediumRectangle');

buzzer.trackClick(adId, impressionId, slot)

Manually track a click.

await buzzer.trackClick('ad_123', 'imp_456', 'mediumRectangle');

Framework Examples

Next.js

// app/layout.tsx
import { BuzzerAd } from '@buzzer/ads/react';

export default function Layout({ children }) {
  return (
    <html>
      <body>
        <header>
          <BuzzerAd publisherId="pub_xxx" slot="leaderboard" />
        </header>
        <main>{children}</main>
      </body>
    </html>
  );
}

Gatsby

// src/components/AdSlot.tsx
import { BuzzerAd } from '@buzzer/ads/react';

export function AdSlot({ slot }) {
  return (
    <BuzzerAd
      publisherId={process.env.GATSBY_BUZZER_PUBLISHER_ID}
      slot={slot}
    />
  );
}

Astro

---
// src/components/Ad.astro
---
<div id="buzzer-ad" data-slot="mediumRectangle"></div>

<script>
  import { createBuzzer } from '@buzzer/ads';

  const buzzer = createBuzzer({
    publisherId: import.meta.env.PUBLIC_BUZZER_PUBLISHER_ID
  });

  document.querySelectorAll('[id^="buzzer-ad"]').forEach(el => {
    buzzer.renderAd(el, {
      slot: el.dataset.slot || 'mediumRectangle'
    });
  });
</script>

Getting Your Publisher ID

1. Visit buzzernetwork.com/publishers
2. Connect your wallet
3. Add your domain
4. Copy your Publisher ID from the dashboard

Test Mode

Enable test mode to see sample ads without affecting your stats:

<BuzzerAd
  publisherId="pub_xxx"
  slot="mediumRectangle"
  testMode={true}
/>

TypeScript

Full TypeScript support included:

import type { AdFormat, Ad, BuzzerConfig } from '@buzzer/ads';
import { BuzzerAd } from '@buzzer/ads/react';

const format: AdFormat = 'mediumRectangle';

License

MIT

Links

• Buzzer Network
• Publisher Dashboard
• Documentation
• GitHub