Web SDK Overview & Installation

This guide explains how to install and initialize the AdStage Web SDK. For ad rendering, event tracking, and format‑specific usage, read the other pages in this section.

🚀 Installation

Package Managers

Choose a package manager and install:

pnpm add @adstage/web-sdk

Installation Troubleshooting

If you encounter peer dependency conflicts:

# Quick fix
npm install @adstage/web-sdk --legacy-peer-deps
 
# Or add to .npmrc file
echo "legacy-peer-deps=true" >> .npmrc

CDN (Prototype / Static Pages)

Use the UMD bundle when you don't have a build step:

<script src="https://unpkg.com/@adstage/web-sdk/dist/index.umd.js"></script>

After loading, a global AdStage object is available.

⚙️ Initialization

You must call AdStage.init() once before creating any ad slots or tracking events.

init() Pattern

<script>
  AdStage.init({
    apiKey: 'your-api-key',
    debug: true // Enable only in development
  });
</script>

Provider Pattern

Using the AdStageProvider avoids manually calling init() across multiple entry points.

import { AdStageProvider } from '@adstage/web-sdk';
 
export function App() {
  return (
    <AdStageProvider
      config={{
        apiKey: 'your-api-key',
        debug: process.env.NODE_ENV === 'development'
      }}
    >
      <div>{/* App components */}</div>
    </AdStageProvider>
  );
}

🔧 Configuration Options

Example With Environment Guard

AdStage.init({
  apiKey: process.env.AD_STAGE_KEY,
  debug: process.env.NODE_ENV === 'development'
});

✅ Verification Checklist

🧪 Next Steps

• Render your first ad: see Banner / Text / Video pages
• Explore lifecycle patterns: Common Features page
• Track events (if supported in later versions)

Proceed to ad type specific pages to start rendering creatives.