@adsgram/vue

Vue 3 bindings for the Adsgram SDK. Provides components and composition functions for ad tasks and fullscreen banners.

Installation

npm install @adsgram/vue
# or
yarn add @adsgram/vue
# or
pnpm add @adsgram/vue

Components

<AdsgramTask />

Vue wrapper component for the <adsgram-task> custom element. Using for the Task ad format.

Props

| Prop | Type | Description | |--------------------|----------------|-----------------------------------------| | blockId | string | Unique task block ID (required) | | debug | boolean | Enable debug mode (optional) | | className | string | Optional CSS class name (optional) | | onReward | EventHandler | Reward event callback (optional) | | onError | EventHandler | Error event callback (optional) | | onBannerNotFound | EventHandler | No banner available callback (optional) | | onTooLongSession | EventHandler | Long session callback (optional) |

Customization

More info about customization and slots usage see here

Example

<script setup lang="ts">
import { AdsgramTask } from "@adsgram/vue";

const handleReward = (event: CustomEvent<string>): void => {
  console.log("User earned reward:", event.detail);
};

const handleError = (event: CustomEvent<string>): void => {
  console.error("Task error:", event.detail);
};

</script>

<template>
  <AdsgramTask
    blockId="task-11621"
    data-debug="true"
    class="task"
    :onReward="handleReward"
    :onError="handleError"
  >
    <span slot="reward" className="task__reward">1000 coins</span>
    <div slot="button" className="task__button">go</div>
    <div slot="claim" className="task__button_claim">claim</div>
    <div slot="done" className="task__button_done">done</div>
  </AdsgramTask>
</template>

<style scoped>
.task {
  // your styles for task element
}
</style>

Composition API

useAdsgram

Vue composable for managing fullscreen ads. Using for the Reward and Interstitial ad formats.

Props

| Prop | Type | Description | | ------------------ | ------------------------------ | ------------------------------------------------- | | blockId | string | Unique ad block ID (required) | | debug | boolean | Enable debug mode (optional) | | debugBannerType | string | Forced banner type in debug mode (optional) | | onReward | (event: CustomEvent) => void | Handler for the reward event (optional) | | onError | (event: CustomEvent) => void | Handler for the error event (optional) |

Returns

An object with methods to control the Adsgram ad:

• show(): Promise<ShowPromiseResult> — Shows the ad and resolves with the result.
• addEventListener(event: string, handler: (event: CustomEvent) => void): void — Add event listener.
• removeEventListener(event: string, handler: (event: CustomEvent) => void): void — Remove event listener.
• destroy(): void — Destroys the ad controller.

Example

<script setup lang="ts">
import { useAdsgram } from "@adsgram/vue";

const { show, addEventListener } = useAdsgram({
  blockId: "123",
  onReward: (): void => {
    // user watch ad till the end
    // your code to reward user for rewarded format
  },
  onError: (): void => {
    // user get error during playing ad
    // do nothing or whatever you want
  },
});

// Subscribe on events with addEventListener
addEventListener("onBannerNotFound", () => {
  console.log("Banner not found");
});
</script>

<template>
  <button @click="show">Show Ad</button>
</template>