Skip to main content

​
Overview

The Universal SDK provides framework-agnostic functionality for integrating ActionX ads into any JavaScript application.

​
Installation

npm install @ai-ad-network/frontend-sdk

​
Basic Usage

​
Initialize Ad Manager

import { AdManager } from '@ai-ad-network/frontend-sdk/universal';

const manager = new AdManager({
  apiBaseUrl: '/api/v1',
  apiKey: 'ak_your_api_key',
  debug: true,
});

​
Request Ads

const result = await manager.requestAds({
  conversationContext: {
    query: 'Best laptops for programming',
    response: 'Here are some great options...',
  },
  userContext: {
    sessionId: 'session-123',
  },
  slots: [
    {
      slotId: 'main',
      format: 'action_card',
      count: 3,
    },
  ],
});

​
Render Ads

import { DOMRenderer } from '@ai-ad-network/frontend-sdk/universal';

const container = document.getElementById('ad-container');
const ad = result.slots[0].ads[0];

DOMRenderer.renderActionCardWithAnalytics(ad, container, {
  analytics: {
    requestId: result.requestId,
    slotId: 'main',
    position: 0,
    totalAds: result.slots[0].ads.length,
  },
  manager,
});

​
Global Setup

import {
  setupGlobalEntityTracking,
  injectEntityLinkStyles
} from '@ai-ad-network/frontend-sdk/universal';

setupGlobalEntityTracking({
  apiBaseUrl: '/api/v1',
  debug: true,
});

injectEntityLinkStyles();

import { fetchAds, applyEntityFragments } from '@ai-ad-network/frontend-sdk';

const ads = await fetchAds({
  conversationContext: { query, response },
  slots: [{
    format: 'entity_link',
    slotId: 'entity-link',
    count: 1
  }]
});

const entityAd = ads.slots?.[0]?.ads?.find(ad => ad.type === 'entity_link');

if (entityAd?.enhancedFragments) {
  const enhancedContent = applyEntityFragments(
    originalContent,
    entityAd.enhancedFragments
  );
  element.innerHTML = enhancedContent;
}