> 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/zh/jiao-cheng/fa-bu-shang-jiao-cheng/exoclick-ad-zone-integration-with-vue.js.md).

# 使用 Vue.js 集成 ExoClick 广告位

在本教程中，我们将通过不同示例讲解如何在 Vue.js 项目中集成 ExoClick 广告区域。

## 示例：横幅

{% 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/b91f93ca5908b1519d9975b0152b465940659f26" 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/3c91dd97416abbdb7c6c62e157ff0fd5b73d81ee" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

## 示例：Popunder

{% stepper %}
{% step %}

### 在你的 public 文件夹中，创建一个名为：popunder\_script.js 的文件

<figure><img src="/files/ca8e0ab1c394d21b680c06a1deee957137fb8d3f" 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){};

   //version 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` 为你在管理面板中的区域 ID。\n更新 `trigger_class` 如果你为点击配置了自定义 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/ee93687286ac5cc2c29f333073b7147e8438d6ca" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Push Notification 广告脚本只有在将脚本添加到 `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/zh/jiao-cheng/fa-bu-shang-jiao-cheng/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.