---
title: "광고 연동"
slug: "vpe-react-ads"
updated: 2026-09-17T09:08:03Z
published: 2026-09-17T09:08:03Z
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.

# 광고 연동

Classic/VPC 환경에서 이용 가능합니다.

Google IMA SDK 기반의 Pre-roll 광고를 지원합니다. `options.ads.tagUrl`에 VAST/VMAP 태그 URL을 전달하면 콘텐츠 재생 전에 광고가 자동으로 재생됩니다.

**동작 방식**

- Google IMA SDK는 외부에서 자동 로드됩니다.
- 광고 재생 중 콘텐츠는 일시정지되고 컨트롤바가 숨겨집니다.
- 광고 완료, 스킵, 에러 이후 콘텐츠가 자동 재생됩니다.

**제한사항**

- 스킵 버튼은 IMA SDK iframe 내부에 렌더링되어 외부에서 스타일링할 수 없습니다.
- 광고 옵션이 없으면 기존 재생 흐름과 동일하게 동작합니다.

## React/UMD 예제

```
"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("광고 시작");
            break;
          case "adComplete":
            console.log("광고 완료");
            break;
          case "adSkip":
            console.log("광고 스킵");
            break;
          case "adError":
            console.log("광고 에러", event.data?.message);
            break;
        }
      }}
    />
  );
}
```

## 광고 비활성화

`enabled` 값을 `false`로 설정하면 광고를 끌 수 있습니다.

```
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,
}
```