adpulse

v1.0.0

Published

2 months ago

AdPulse self-hosted ad network management dashboard and publisher SDK engine

0High
0Medium
0Low

anupam-mern

adpulse adflow ads advertising sdk dashboard self-hosted

AdPulse SDK

Drop one script. Run beautiful ads.

A lightweight ad embed SDK for website owners. Add one <script> tag with data-* parameters — AdPulse renders styled, animated ad cards automatically. No manual HTML. No design work.

🚀 Quick Start

<!-- 1. Load SDK once in <head> -->
<script src="https://vulnera.online/sdk.js" async></script>

<!-- 2. Place ad anywhere on page -->
<div
  class="adpulse-ad"
  data-ad-id="ad_9x3kz"
  data-publisher-key="ap_live_pk_..."
  data-position="inline"
  data-animation="fadeUp"
  data-theme="dark"
  data-accent="#22c55e"
  data-cta="Get Started Free"
></div>

📦 Project Structure

adpulse/
├── app/
│   ├── page.tsx              # Landing page
│   ├── dashboard/page.tsx    # Publisher dashboard
│   ├── advertiser/page.tsx   # Advertiser campaign portal
│   ├── preview/page.tsx      # Interactive ad builder
│   ├── docs/page.tsx         # SDK documentation
│   └── api/
│       ├── ads/[id]/         # Ad data endpoint
│       └── track/            # Analytics tracking endpoint
├── components/
│   ├── ads/
│   │   ├── AdCard.tsx        # Core ad card (all 5 positions)
│   │   └── AdPreviewPanel.tsx # Live preview builder
│   ├── dashboard/
│   │   ├── AnalyticsChart.tsx
│   │   └── AdTable.tsx
│   ├── layout/
│   │   ├── Navbar.tsx
│   │   └── Footer.tsx
│   └── ui/
│       ├── Badge.tsx
│       ├── Button.tsx
│       ├── CodeBlock.tsx
│       ├── Input.tsx
│       ├── Select.tsx
│       ├── StatCard.tsx
│       └── Toggle.tsx
├── lib/
│   ├── utils.ts              # Helpers, formatters, embed code generator
│   └── mock-data.ts          # Sample ads, campaigns, analytics
├── types/index.ts            # TypeScript types
└── public/
    └── sdk.js                # The distributable SDK script

🧩 Ad Positions

| Position | Description | |------------|-------------------------------------| | inline | Horizontal card inside content flow | | sidebar | Vertical card for sidebar placement | | float | Fixed corner overlay | | banner | Full-width horizontal strip | | overlay | Modal / lightbox style |

🎬 Animations

fadeUp · fadeIn · slideRight · slideLeft · bounceSoft · none

📊 Parameters

| Attribute | Type | Default | Description | |------------------|---------|-------------|-------------------------------------| | data-ad-id | string | required | Copy from Dashboard > Publisher Keys or Tracked Ads after binding an ad | | data-publisher-key | string | required | Publisher key bound to this ad and website | | data-position | string | inline | Card layout mode | | data-animation | string | fadeUp | Entry animation | | data-theme | string | dark | dark / light / auto | | data-accent | color | #22c55e | Brand accent color | | data-delay | number | 0 | Render delay in milliseconds | | data-cta | string | Learn More| Button label | | data-closeable | boolean | false | Show dismiss button | | data-lazy | boolean | true | Lazy render on viewport entry | | data-radius | number | 12 | Card corner radius (px) |

🛠 Development

npm install
npm run dev

Open http://localhost:3000.

🏗 Tech Stack

Next.js 14 (App Router)
TypeScript
Tailwind CSS
Recharts (analytics charts)
Lucide React (icons)

📡 API Routes

GET /api/ads/[id] — Fetch ad creative by ID
POST /api/track — Log impression/click event

Built with ❤️ for publishers and advertisers who value simplicity.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme