> For the complete documentation index, see [llms.txt](https://docs.exoclick.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.exoclick.com/tutorials/ja/chtoriaru/paburisshkechtoriaru/exoclick-ad-zone-integration-with-vue.js.md).

# Vue.jsとのExoClick広告ゾーン統合

このチュートリアルでは、Vue.js プロジェクト内に ExoClick の Ad Zone を組み込むさまざまな例を順に見ていきます。

## 例: バナー

{% stepper %}
{% step %}

### components/BannerAd.vue を作成

```vue
<template>
 <h2>バナー広告 300x250</h2>
 <ins class="xxxxxxxxx" data-zoneid="xxxxxxxxx"></ins>
</template>


<script>
export default {
 name: 'BannerAd',
 mounted() {
   const adScript = document.createElement('script');
   adScript.src = 'https://a.magsrv.com/ad-provider.js';
   adScript.async = true;
   adScript.type = 'application/javascript';
   document.body.appendChild(adScript);


   adScript.onload = () => {
     (window.AdProvider = window.AdProvider || []).push({ serve: {} });
   };
 }
}
</script>
```

両方を忘れずに置き換えてください `ins class` と `data-zoneid` を実際の class と、管理パネルで取得したご自身のゾーンIDに置き換えてください。
{% endstep %}

{% step %}

### App.vue で使用する

メインアプリに広告コンポーネントをインポートします

```javascript
<script setup>
import BannerAd from './components/BannerAd.vue';
</script>


<template>
 <main>
     <BannerAd />
 </main>
</template>
```

を移動できます `<BannerAd />` レイアウト内の任意の場所（ヘッダー、フッター、サイドバーなど）に

アプリを実行すると、バナー広告が表示されるはずです。

<figure><img src="/files/96a38918e4c19b3f4bb00296a7332cb1fb28ebd4" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

## 例: VAST

この例では [Fluid Player](https://www.fluidplayer.com/) を動画プレーヤーとして使用して広告を配信します。

{% stepper %}
{% step %}

### components/FluidPlayer.vue を作成

```vue
<template>
 <div class="video-section">
   <h2>VAST広告と Fluid Player</h2>
   <div class="video-wrapper">
     <video
       id="example-player"
       controls
       style="width: 640px; height: 360px;"
     >
       <source
         data-fluid-hd
         src="https://www.test.com/video_720.mp4"
         title="720p"
         type="video/mp4"
       />
       <source
         src="https://www.test.com/video_360.mp4"
         title="360p"
         type="video/mp4"
       />
     </video>
   </div>
 </div>
</template>


<script setup>
import { onMounted } from 'vue';


onMounted(() => {
 // Fluid Player の CDN を読み込む
 const script = document.createElement('script');
 script.src = 'https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js';
 script.onload = () => {
   // Fluid Player を初期化する
   window.fluidPlayer('example-player', {
     layoutControls: {
       primaryColor: "#28B8ED",
       timelinePreview: {
         file: 'thumbnails.vtt',
         type: 'VTT'
       },
       controlForwardBackward: {
         show: true,
         doubleTapMobile: false
       }
     },
     vastOptions: {
       adList: [
         {
           roll: "preRoll",
           vastTag: "https://s.magsrv.com/v1/vast.php?idzone=xxxxxxxxx",
           timer: 5
         },
         {
           roll: "onPauseRoll",
           vastTag: "https://s.magsrv.com/splash.php?idzone=xxxxxxxxx",
           vAlign: "middle"
         }
       ],
       adCTAText: "広告"
     }
   });
 };
 document.body.appendChild(script);
});
</script>
```

プレースホルダーの値はすべてご自身の値に置き換えてください。
{% endstep %}

{% step %}

### App.vue で使用する

メインアプリに広告コンポーネントをインポートします

```javascript
<script setup>
import FluidPlayer from './components/FluidPlayer.vue';
</script>

<template>
 <main>
   <FluidPlayer />
 </main>
</template>
```

アプリを実行すると、VAST広告が表示されるはずです。

<figure><img src="/files/92360d4ca5b02eda5c1352db2b73886842bccab0" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

## 例: ポップアンダー

{% stepper %}
{% step %}

### public フォルダー内に、popunder\_script.js という名前のファイルを作成します

<figure><img src="/files/78a61aaa54698b2a94390b7d5372ed8e0e9a9c61" alt=""><figcaption></figcaption></figure>

好きな名前を付けて構いません。
{% endstep %}

{% step %}

### ExoClick の管理パネルから取得した Popunder スクリプトをファイル内に貼り付けます。

以下の例に示すのと同じ書式になっていることを確認してください。

```javascript
(function() {
   function randStr(e,t){for(var n="",r=t||"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",o=0;o<e;o++)n+=r.charAt(Math.floor(Math.random()*r.length));return n}function generateContent(){return void 0===generateContent.val&&(generateContent.val="document.dispatchEvent("+randStr(4*Math.random()+3)+");"),generateContent.val}try{Object.defineProperty(document.currentScript,"innerHTML",{get:generateContent}),Object.defineProperty(document.currentScript,"textContent",{get:generateContent})}catch(e){};

   // バージョン 7.0.0

   var adConfig = {
   "ads_host": "a.pemsrv.com",
   "syndication_host": "s.pemsrv.com",
   "idzone": xxxxxxxxx,
   "popup_fallback": false,
   "popup_force": false,
   "chrome_enabled": true,
   "new_tab": false,
   "frequency_period": 1,
   "frequency_count": 1,
   "trigger_method": 2,
   "trigger_class": "xxxxxxxxx",
   "trigger_delay": 0,
   "capping_enabled": false,
   "tcf_enabled": false,
   "only_inline": false
};


window.document.querySelectorAll||(document.querySelectorAll...
})();
```

次を置き換えることを忘れないでください `idzone` を管理パネルのご自身の Zone ID に置き換えてください。\
更新 `trigger_class` クリック用にカスタムクラスを設定している場合は、これを更新してください。
{% endstep %}

{% step %}

### index.html にスクリプトを追加する

```javascript
<!DOCTYPE html>
<html lang="">

<head>
 <meta charset="UTF-8">
 <link rel="icon" href="/favicon.ico">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>タイトル</title>
</head>

<body>
 <div id="app"></div>
 <script type="module" src="/src/main.js"></script>

<!-- ExoClick Popunder スクリプト -->
 <script type="application/javascript" src="/popunder_script.js"></script>
 <!-- ExoClick Popunder スクリプト ここまで -->
</body>

</html>
```

この設定では、ユーザーの操作時にポップアンダー広告が発火します。

<figure><img src="/files/1425a4925052f6bb2a627df3dc9e045ad20feecd" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

{% hint style="info" %}
プッシュ通知広告スクリプトは、スクリプトが追加されている場合にのみ動作します `index.html`
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.exoclick.com/tutorials/ja/chtoriaru/paburisshkechtoriaru/exoclick-ad-zone-integration-with-vue.js.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.