---
title: "広告連携"
slug: "vpe-react-ads"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
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,
}
```