adinject-devtools

Visual Ad Inspector, Point & Click Placement Designer & Zero-CLS Policy Auditor for adinject-react.
Inspect ad slots in real time, visually point-and-click to place mock ads on any section of your page, audit Better Ads compliance, and export copy-paste ready Next.js JSX code & AI prompts.

---

⚡ Quick Start

1. Install as a dev dependency

npm install --save-dev adinject-devtools
# or
bun add -d adinject-devtools

2. Add to your Root Layout (app/layout.tsx)

import { AdInjectProvider } from "adinject-react";
import { AdInjectDevTools } from "adinject-devtools";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <AdInjectProvider client="ca-pub-1234567890123456">
          {children}
          {/* Automatically only runs in development (NODE_ENV !== 'production') */}
          <AdInjectDevTools />
        </AdInjectProvider>
      </body>
    </html>
  );
}

---

🚀 DevTools Capabilities

1. 🎛️ Floating Dock Toolbar (AdInjectDock)

• Positioned at bottom-center (or bottom-right).
• Quick Action Toolbar:
  • 🎯 Inspect: Activates mouse hover element inspection.
  • ➕ Inject: Launches visual point & click placement mode.
  • 👁 Overlay: Toggles live page DOM bounding box outlines.
  • 4 Ads: Live active slot counter badge.
  • 98%: Better Ads & Zero-CLS compliance score.
  • ⤢ Open: Expands the full DevTools shell.

2. 🎯 Point & Click Visual Ad Designer

• Click any ad format (In-Article Fluid, Medium Rectangle 300×250, Leaderboard 728×90, Skyscraper 160×600).
• Interactive drop zones (+ Click to Inject Ad Here) appear between paragraphs, below heroes, and across content grids.
• Clicking any spot instantly mounts a live mock ad into the webpage DOM with full zero-CLS reservations and controls.

3. ✨ 1-Click Auto-Pick Best Places

• Automatically analyzes article paragraphs, reading flow, and section layout to place high-CTR ads with zero CLS layout shifts.

4. 🤖 1-Click AI Prompt Generator

• Generates structured Markdown prompts with exact target file paths, component names, and DOM anchors formatted for Cursor, Claude Code, Antigravity, and GitHub Copilot.

5. 🔍 Live Element Hover Inspector

• Move your cursor across any element on the webpage.
• Displays live glowing outline, element tag, word count, and one-click "Click to Place Ad" action.

6. 🖥️ Multi-Mode View Shell

• Bottom Dock Mode: Slides up from bottom of viewport.
• Floating Window Mode: Drag/place in any corner of the screen.
• Fullscreen Mode: Full distraction-free monetization studio.

---

⌨️ Keyboard Shortcuts

Shortcut	Action
⌘ + Shift + A or Ctrl + Shift + A	Toggle DevTools Drawer Open / Closed
Esc	Cancel Inspect Mode / Close Drawer

---

🛠️ Configuration Props (<AdInjectDevTools />)

Prop	Type	Default	Description
forceEnable	boolean	false	Force DevTools to render even in production builds.
position	"bottom-center" | "bottom-right" | "bottom-left" | "top-right" | "top-left"	"bottom-center"	Position of the floating toolbar.
viewMode	"bottom-dock" | "float" | "fullscreen"	"bottom-dock"	Initial layout view mode.
defaultTab	"inject" | "slots" | "placement" | "policy" | "simulator" | "mock-ads"	"inject"	Active tab when opening the drawer.
initialOverlay	boolean	true	Show visual bounding box overlays on page load.
articleSelector	string	"article, .adinject-article-body, .prose, main"	CSS selector used to scan article body text for density analysis.

---

📄 License

MIT © LinuxCTRL