-
Notifications
You must be signed in to change notification settings - Fork 0
Home
Soufiane Amediaz edited this page Aug 30, 2026
·
1 revision
adinject-reactis a zero-dependency headless ad monetization and content insertion engine built natively for Next.js App Router (Next 14–16) and React 19.
It provides a unified, deterministic framework to insert display ads, native feed slots, affiliate product cards, and equipment lists into articles and item grids with zero Cumulative Layout Shift (0.000 CLS), consent-aware gating (GDPR / Google Consent Mode v2 / IAB GPP), multi-network support (AdSense, GAM, Ezoic, Custom), and automated affiliate fallbacks for blocked or unfilled inventory.
| Capability | What adinject-react Delivers |
|---|---|
| 0 Dependencies | Pure native TypeScript with zero runtime node_modules dependencies for lightning-fast build & load times. |
| CLS-Safe by Design | Pre-allocates exact aspect-ratio bounding boxes before ad network scripts execute to maintain a 0.000 CLS Core Web Vitals score. |
| Consent Gated | Gated on Google Consent Mode v2, IAB GPP, and TCF v2. No ad network script executes when consent is denied or pending. |
| Automatic Fallback | Unfilled, errored, or consent-denied ad slots automatically swap into high-converting affiliate product cards or custom CTAs. |
| Multi-Network | Pluggable network adapter pattern supporting Google AdSense, Google Ad Manager (GAM/GPT), Ezoic, or custom networks. |
| Idempotent Caching | Safe to call across re-renders, SPA route navigations, and React StrictMode without duplicate ads or keyword links. |
| Zero External Telemetry | 100% first-party code execution with zero analytics, tracking beacons, or third-party phone-home requests. |
Explore the complete documentation sections:
-
Quick Start
Step-by-step installation, peer dependencies, root layout setup, and first ad insertion. -
Architecture & Core Concepts
The headless philosophy, placement pipeline, zero-CLS layout calculations, and RSC boundaries. -
Components Reference
Complete API documentation, props, and examples for all 12 React components. -
Transformers & Content Adapters
AST & string manipulators for HTML, Markdown/MDX, Sanity Portable Text, and Feed arrays. -
Multi-Network Adapters
Connecting Google AdSense, Google Ad Manager (GAM), Ezoic, or authoring custom ad adapters. -
Consent & Privacy (GDPR, GPP, TCF)
Configuring Google Consent Mode v2, IAB Global Privacy Platform, and cookie-free fallback banners. -
Affiliate Monetization & Autolinker
Affiliate product cards, equipment boxes, FTC disclosures, keyword autolinking, and deterministic A/B testing. -
IAB Metrics & Viewability Tracking
Measuring 50%/1s IAB viewability milestones, active duration, and Invalid Traffic (IVT) bot filtering. -
Live Edge Config API
Dynamic remote configuration via AdInject Edge API with ISR revalidation and exponential backoff. -
Companion Visual DevTools
Usingadinject-devtoolsfor point-and-click placement, AI prompt generation, and policy auditing. -
Troubleshooting & FAQ
Solutions to common setup issues, server-client boundary errors, and ad blocker debugging.
// app/layout.tsx
import { AdInjectProvider, ConsentProvider, AdSenseScript } from "adinject-react";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<AdSenseScript client="ca-pub-1234567890123456" />
</head>
<body>
<ConsentProvider mode="google-consent-v2">
<AdInjectProvider client="ca-pub-1234567890123456">
{children}
</AdInjectProvider>
</ConsentProvider>
</body>
</html>
);
}// app/recipes/page.tsx
import { AdInjectFeed } from "adinject-react";
import { RecipeCard } from "@/components/recipe-card";
export default async function RecipesPage() {
const recipes = await getRecipes();
return (
<AdInjectFeed
items={recipes}
interval={3} // Injects an ad card every 3 recipes
startOffset={1} // First ad appears after 1st recipe
className="grid grid-cols-1 md:grid-cols-3 gap-6"
renderItem={(recipe) => <RecipeCard key={recipe.id} recipe={recipe} />}
/>
);
}- 🌐 Live Production Showcase (lady.recipes) — Experience live in-feed ad insertion with zero layout shift.
- 📺 Watch Walkthrough Video — Step-by-step video demonstration of feed placement and responsive behavior.
adinject-react is maintained by LinuxCTRL. Distributed under the MIT License.
GitHub • npm • Live Showcase • Report Issue