Simula (https://www.npmjs.com/package/@simula/ads) helps you monetize Komiko with native Pinterest-style ads that automatically match your site design.

image.png

Integration takes three steps:

  1. Initialize with SimulaProvider
  2. Add <NativeBanner />
  3. Update your ads.txt

1. Initialization

Wrap your app with SimulaProvider and pass your API key. We will provide the API key to you over email / WeChat.

import { SimulaProvider } from "@simula/ads";
import KomikoApp from "./KomikoApp";

export default function App() {
  return (
    <SimulaProvider apiKey="SIMULA_xxx" primaryUserID="UUID_xxx">
      <KomikoApp />
    </SimulaProvider>
  );
}

Props

Prop Type Required Default Description
apiKey string ✅ — Your Simula API key from the dashboard
children ReactNode ✅ — Your app components
devMode boolean ❌ false Enables development mode
primaryUserID string ❌ — Publisher-provided user identifier. Recommended for consistent tracking across devices and sessions.
hasPrivacyConsent boolean ❌ true Privacy consent flag. When false, suppresses collection of PII (primaryUserID, userEmail, userProfile).

2. Displaying Native Banner Ads

Use <NativeBanner /> anywhere in your grid or feed.

The ad will automatically match your site's style and aspect ratios.

Example: Anime Discovery Grid

import { NativeBanner } from "@simula/ads";

export default function AnimeGrid({ searchTerm, category }) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
      {animeCards.map((anime, idx) => (
        <>
          <AnimeCard key={anime.id} anime={anime} />

          {/* Native ad every 5 items */}
          {(idx + 1) % 5 === 0 && (
            <NativeBanner
              slot="explore"
              position={idx + 1}
              context={{
                searchTerm: searchTerm,
                category: category,
                title: "Discover Anime"
              }}
              onImpression={(ad) => console.log('Ad impression:', ad.id)}
              onError={(err) => console.error('Ad error:', err)}
            />
          )}
        </>
      ))}
    </div>
  );
}

<NativeBanner /> Props