---
title: "Ad integration"
slug: "vpe-react-ads"
updated: 2026-09-17T09:22:39Z
published: 2026-09-17T09:22:39Z
canonical: "guide.ncloud-docs.com/vpe-react-ads"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://guide.ncloud-docs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Ad integration

Available in Classic and VPC

The SDK supports Google IMA SDK-based pre-roll ads. Pass a VAST or VMAP tag URL to `options.ads.tagUrl` to automatically play an ad before the content starts.

**How it works**

- The SDK automatically loads the Google IMA SDK externally.
- During ad playback, the content pauses and the control bar hides.
- The content automatically resumes after ad completion, skip, or error.

**Limitations**

- The skip button renders inside the IMA SDK iframe, preventing external styling.
- Without ad options, the player operates identically to the existing playback flow.

## React/UMD example

```
"use client";

import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export default function AdPlayer() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      options={{
        playlist: [
          {
            file: "https://CDN_DOMAIN/example.m3u8",
            poster: "https://CDN_DOMAIN/poster.jpg",
          },
        ],
        autostart: true,
        muted: true,
        ads: {
          tagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=",
        },
      }}
      onEvent={(event) => {
        switch (event.type) {
          case "adStart":
            console.log("Ad started");
            break;
          case "adComplete":
            console.log("Ad completed");
            break;
          case "adSkip":
            console.log("Ad skipped");
            break;
          case "adError":
            console.log("Ad error", event.data?.message);
            break;
        }
      }}
    />
  );
}
```

## Disable ads

Set `false` to `enabled` to disable ads.

```
ads: {
  tagUrl: "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=",
  enabled: false,
}
```