@skywu/ad-manager-sdk

@skywu/ad-manager-sdk

A Vue 3 ad task SDK for monetized task flows with:

• Multi-language UI
• Multi-theme support
• Localized currency display
• USD-based reward callbacks
• Telegram global tasks support

Install

npm install @skywu/ad-manager-sdk

or

yarn add @skywu/ad-manager-sdk

or

pnpm add @skywu/ad-manager-sdk

Quick Start (Vue 3)

<template>
  <AdTaskList
    :api-key="apiKey"
    :end-user-id="userId"
    locale="en-US"
    country="US"
    theme="MODERN"
    @reward="handleReward"
  />
</template>

<script setup lang="ts">
import { AdTaskList } from '@skywu/ad-manager-sdk'
import '@skywu/ad-manager-sdk/style.css'

const apiKey = 'your-publisher-api-key'
const userId = 'user-123'

async function handleReward(event: any) {
  // reward is always USD
  // localReward is localized equivalent for display/reference
  await fetch('/api/user/reward', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      userId: event.endUserId,
      taskId: event.taskId,
      adConfigId: event.adConfigId,
      rewardUSD: event.reward,
      localReward: event.localReward,
      adTitle: event.adTitle,
      adNetwork: event.adNetwork,
      completedAt: event.completedAt,
    }),
  })
}
</script>

Nuxt 3

Create plugins/ad-manager.client.ts:

import { AdTaskList } from '@skywu/ad-manager-sdk'
import '@skywu/ad-manager-sdk/style.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('AdTaskList', AdTaskList)
})

Use in page:

<template>
  <ClientOnly>
    <AdTaskList
      :api-key="apiKey"
      :end-user-id="userId"
      locale="en-US"
      @reward="handleReward"
    />
  </ClientOnly>
</template>

Component Props

Reward Callback

When a task is completed, @reward is emitted.

interface RewardEvent {
  taskId: string
  adConfigId: string
  endUserId: string
  reward: number // USD (always)
  localReward: {
    amount: number
    currency: string
    formatted: string
  }
  adTitle: string
  adNetwork: string
  completedAt: string
}

Important:

• reward is always USD and should be your settlement source-of-truth.
• localReward is an equivalent localized value for display/reference.

Styling Customization (No Logic Changes)

Use taskListStyle to override task list UI tokens from host app.

Vue object form

<AdTaskList
  :api-key="apiKey"
  :end-user-id="userId"
  :task-list-style="{
    cardBackground: '#0f172a',
    cardBorder: '#334155',
    titleColor: '#f8fafc',
    descriptionColor: '#cbd5e1',
    buttonBackground: '#22c55e',
    buttonBackgroundHover: '#16a34a'
  }"
/>

Web Component string form

<ad-task-list
  api-key="your-api-key"
  end-user-id="user-123"
  task-list-style='{"cardBackground":"#0f172a","titleColor":"#f8fafc","buttonBackground":"#22c55e"}'
></ad-task-list>

taskListStyle only affects visuals. Task flow, validation, review, and callback logic stay unchanged.

Global Tasks (Optional)

You can also use:

• GlobalTasksIcon
• GlobalTasksModal

Typical usage:

<GlobalTasksIcon ref="globalTasksIconRef" @click="showGlobalTasks = true" />

<GlobalTasksModal
  :visible="showGlobalTasks"
  :api-key="apiKey"
  :end-user-id="userId"
  :country="country"
  @reward="handleReward"
  @all-completed="onAllGlobalTasksDone"
  @close="showGlobalTasks = false"
/>

Best Practices

• Validate reward idempotency by taskId in your backend.
• Use reward (USD) for accounting, then convert to points/local currency in your own service.
• Keep reward issuing on server side, not only on client callback.

Publish Checklist

Before publishing:

cd sdk
npm run build
npm run build:wc
npm pack

Then publish:

npm publish --access public

Do not commit tokens to repository files.

License

MIT